Escala de tipografía y carga de fuentes

npx expo install expo-font expo-splash-screen

// app/_layout.tsx (raíz de Expo Router) o App.tsx
import { useFonts } from "expo-font";
import * as SplashScreen from "expo-splash-screen";
import { useEffect } from "react";
import { Text, View } from "react-native";
import { typography } from "./theme/typography";
 
SplashScreen.preventAutoHideAsync();
 
export default function RootLayout() {
  const [loaded, error] = useFonts({
    "Inter-Regular": require("./assets/fonts/Inter-Regular.ttf"),
    "Inter-SemiBold": require("./assets/fonts/Inter-SemiBold.ttf"),
  });
 
  useEffect(() => {
    if (loaded || error) SplashScreen.hideAsync();
  }, [loaded, error]);
 
  if (!loaded && !error) return null;
 
  return (
    <View style={{ flex: 1 }}>
      <Text style={typography.title}>Tipografía lista</Text>
      <Text style={typography.body}>Inter se carga antes del primer renderizado.</Text>
    </View>
  );
}

// theme/typography.ts
import { StyleSheet } from "react-native";
 
export const typography = StyleSheet.create({
  title: {
    fontFamily: "Inter-SemiBold",
    fontSize: 24,
    lineHeight: 32,
    letterSpacing: -0.3,
    color: "#0f172a",
  },
  body: {
    fontFamily: "Inter-Regular",
    fontSize: 16,
    lineHeight: 24,
    color: "#334155",
  },
  caption: {
    fontFamily: "Inter-Regular",
    fontSize: 12,
    lineHeight: 16,
    color: "#64748b",
  },
});

import { useFonts } from "expo-font";
import * as SplashScreen from "expo-splash-screen";
import { useEffect } from "react";
import { PixelRatio, StyleSheet, Text, View } from "react-native";
 
SplashScreen.preventAutoHideAsync();
 
const FONT_SCALE = PixelRatio.getFontScale();
 
type TextVariant = "display" | "title" | "body" | "caption" | "label";
 
const variantStyles: Record<TextVariant, object> = {
  display: typography.display,
  title: typography.title,
  body: typography.body,
  caption: typography.caption,
  label: typography.label,
};
 
function AppText({
  variant = "body",
  children,
  maxScale = 1.35,
}: {
  variant?: TextVariant;
  children: React.ReactNode;
  maxScale?: number;
}) {
  return (
    <Text
      style={variantStyles[variant]}
      allowFontScaling
      maxFontSizeMultiplier={maxScale}
    >
      {children}
    </Text>
  );
}
 
export default function TypographyScreen() {
  const [fontsLoaded, fontError] = useFonts({
    "Inter-Regular": require("./assets/fonts/Inter-Regular.ttf"),
    "Inter-SemiBold": require("./assets/fonts/Inter-SemiBold.ttf"),
    "Inter-Bold": require("./assets/fonts/Inter-Bold.ttf"),
  });
 
  useEffect(() => {
    if (fontsLoaded || fontError) SplashScreen.hideAsync();
  }, [fontsLoaded, fontError]);
 
  if (!fontsLoaded && !fontError) return null;
 
  return (
    <View style={styles.screen}>
      <AppText variant="display">Buenos días</AppText>
      <AppText variant="title">Tus tareas hoy</AppText>
      <AppText variant="body">
        La escala de fuente del sistema es {FONT_SCALE.toFixed(2)}×. El texto del cuerpo se escala con la configuración de accesibilidad hasta el límite configurado.
      </AppText>
      <AppText variant="caption">Última sincronización hace 2 minutos</AppText>
      <View style={styles.chip}>
        <AppText variant="label" maxScale={1.2}>
          3 vencidas
        </AppText>
      </View>
    </View>
  );
}
 
const typography = StyleSheet.create({
  display: {
    fontFamily: "Inter-Bold",
    fontSize: 34,
    lineHeight: 40,
    letterSpacing: -0.5,
    color: "#0f172a",
  },
  title: {
    fontFamily: "Inter-SemiBold",
    fontSize: 22,
    lineHeight: 28,
    color: "#0f172a",
  },
  body: {
    fontFamily: "Inter-Regular",
    fontSize: 16,
    lineHeight: 24,
    color: "#334155",
  },
  caption: {
    fontFamily: "Inter-Regular",
    fontSize: 13,
    lineHeight: 18,
    color: "#64748b",
  },
  label: {
    fontFamily: "Inter-SemiBold",
    fontSize: 12,
    lineHeight: 16,
    letterSpacing: 0.6,
    textTransform: "uppercase",
    color: "#475569",
  },
});
 
const styles = StyleSheet.create({
  screen: { flex: 1, padding: 24, gap: 12, backgroundColor: "#f8fafc" },
  chip: {
    alignSelf: "flex-start",
    marginTop: 8,
    paddingHorizontal: 10,
    paddingVertical: 4,
    borderRadius: 6,
    backgroundColor: "#fee2e2",
  },
});

import * as Font from "expo-font";
 
// Carga imperativa en lote (p. ej. antes de que se monte la navegación)
await Font.loadAsync({
  "Inter-Regular": require("./assets/fonts/Inter-Regular.ttf"),
});

npx expo install expo-font expo-splash-screen

import * as SplashScreen from "expo-splash-screen";
 
SplashScreen.preventAutoHideAsync();
 
// En el componente raíz
useEffect(() => {
  if (loaded || error) SplashScreen.hideAsync();
}, [loaded, error]);
 
if (!loaded && !error) return null;

// Funciona - familia explícita por archivo
{ fontFamily: "Inter-SemiBold", fontSize: 18 }
 
// No confiable con familia personalizada - puede volver a la negrita del sistema
{ fontFamily: "Inter-Regular", fontWeight: "600", fontSize: 18 }

export const fontSize = {
  xs: 12,
  sm: 14,
  md: 16,
  lg: 20,
  xl: 24,
  "2xl": 32,
} as const;
 
// lineHeight ≈ 1.4–1.5 × fontSize para cuerpo; más ajustado para display

<Text allowFontScaling maxFontSizeMultiplier={1.3} style={typography.body}>
  Copia de cuerpo accesible
</Text>
 
// UI densa - barra de herramientas, etiquetas de pestaña
<Text maxFontSizeMultiplier={1.1} numberOfLines={1}>
  Panel de control
</Text>

body: {
  fontSize: 16,
  lineHeight: 24, // 1.5× - párrafo cómodo
},
display: {
  fontSize: 34,
  lineHeight: 40, // ~1.18× - héroe ajustado
},

import { Asset } from "expo-asset";
import * as Font from "expo-font";
 
export async function loadResources() {
  await Promise.all([
    Asset.loadAsync([require("./assets/logo.png")]),
    Font.loadAsync({
      "Inter-Regular": require("./assets/fonts/Inter-Regular.ttf"),
    }),
  ]);
}

import type { TextStyle } from "react-native";
 
export type TypographyVariant = "display" | "title" | "body" | "caption";
 
export const typography: Record<TypographyVariant, TextStyle> = StyleSheet.create({
  display: { fontFamily: "Inter-Bold", fontSize: 34, lineHeight: 40 },
  title: { fontFamily: "Inter-SemiBold", fontSize: 22, lineHeight: 28 },
  body: { fontFamily: "Inter-Regular", fontSize: 16, lineHeight: 24 },
  caption: { fontFamily: "Inter-Regular", fontSize: 13, lineHeight: 18 },
});