Tipografia Dinâmica e Escala de Fontes

Q: Qual é um padrão seguro para maxFontSizeMultiplier?

Corpo: sem limite. Elementos de navegação: 1.1–1.2. Botões e títulos de lista: 1.3–1.5. Ajuste por sistema de design - documente nos knobs do Storybook.

Q: PixelRatio.getFontScale() atualiza em tempo real?

Não continuamente - releia em AppState ativo ou em mudanças de dimensão. Não consulte em um setInterval - a atualização orientada por eventos é suficiente.

Respeitando o tamanho do texto do sistema sem quebras de layout. Um guia de receitas para allowFontScaling, maxFontSizeMultiplier e padrões de layout que sobrevivem às configurações de Dynamic Type do iOS e tamanho de fonte do Android.

Receita

Cartão de receita de referência rápida - pronto para copiar e colar.

import type { TextProps } from "react-native";
import { PixelRatio, StyleSheet, Text, View } from "react-native";
 
type AppTextProps = TextProps & {
  variant?: "body" | "caption" | "toolbar";
};
 
const SCALE_CAPS = {
  body: undefined,
  caption: 1.5,
  toolbar: 1.2,
} as const;
 
export function AppText({ variant = "body", style, ...rest }: AppTextProps) {
  const cap = SCALE_CAPS[variant];
 
  return (
    <Text
      allowFontScaling
      maxFontSizeMultiplier={cap}
      style={[typography[variant], style]}
      {...rest}
    />
  );
}
 
const typography = StyleSheet.create({
  body: { fontSize: 16, lineHeight: 24 },
  caption: { fontSize: 13, lineHeight: 18 },
  toolbar: { fontSize: 14, lineHeight: 18, fontWeight: "600" },
});
 
export function useFontScale() {
  return PixelRatio.getFontScale();
}
 
export function ScalableRow({ title, meta }: { title: string; meta: string }) {
  return (
    <View style={styles.row}>
      <AppText variant="body" style={styles.title}>
        {title}
      </AppText>
      <AppText variant="caption" style={styles.meta}>
        {meta}
      </AppText>
    </View>
  );
}
 
const styles = StyleSheet.create({
  row: { flexDirection: "row", flexWrap: "wrap", gap: 8, paddingVertical: 12, alignItems: "center" },
  title: { flexShrink: 1 },
  meta: { color: "#64748b" },
});

Quando usar isso: Qualquer tela com toolbars de altura fixa, chips, abas inferiores ou linhas multicolunadas - usuários com configurações de texto grande podem cortar ou sobrepor sua UI se você não planejar para a escala.

Exemplo de Trabalho

Lista de configurações que se reorganiza de linha única para várias linhas quando a escala da fonte excede um limite.

import { useMemo } from "react";
import { PixelRatio, Pressable, StyleSheet, Text, View } from "react-native";
 
const LARGE_SCALE_THRESHOLD = 1.3;
 
export function SettingsScreen() {
  const fontScale = PixelRatio.getFontScale();
  const stacked = useMemo(() => fontScale >= LARGE_SCALE_THRESHOLD, [fontScale]);
 
  return (
    <View style={styles.screen}>
      <View style={[styles.toolbar, stacked && styles.toolbarStacked]}>
        <Text
          style={styles.toolbarTitle}
          maxFontSizeMultiplier={1.2}
          numberOfLines={stacked ? 2 : 1}
        >
          Configurações
        </Text>
      </View>
 
      <Pressable style={[styles.row, stacked && styles.rowStacked]}>
        <Text style={styles.rowTitle} allowFontScaling>
          Notificações
        </Text>
        <Text style={styles.rowValue} maxFontSizeMultiplier={1.4}>
          Ativado
        </Text>
      </Pressable>
 
      <Pressable style={[styles.row, stacked && styles.rowStacked]}>
        <Text style={styles.rowTitle} allowFontScaling>
          Idioma
        </Text>
        <Text style={styles.rowValue} maxFontSizeMultiplier={1.4}>
          Português
        </Text>
      </Pressable>
    </View>
  );
}
 
const styles = StyleSheet.create({
  screen: { flex: 1, padding: 16, gap: 8 },
  toolbar: { minHeight: 44, justifyContent: "center" },
  toolbarStacked: { minHeight: 56, paddingVertical: 8 },
  toolbarTitle: { fontSize: 20, fontWeight: "700" },
  row: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    minHeight: 48,
    paddingVertical: 8,
    gap: 12,
  },
  rowStacked: { flexDirection: "column", alignItems: "flex-start" },
  rowTitle: { fontSize: 16, fontWeight: "600", flexShrink: 1 },
  rowValue: { fontSize: 14, color: "#64748b" },
});

O que isso demonstra:

PixelRatio.getFontScale() controla os modos de layout em escalas extremas
maxFontSizeMultiplier na toolbar vs texto do corpo sem limite
flexWrap / reorganização de colunas em vez de truncamento numberOfLines={1} em rótulos primários
minHeight nas linhas preserva alvos de toque quando o texto quebra

Padrões de Receita

Padrão 1: Tabela de Política de Escala

Região da UI	`allowFontScaling`	`maxFontSizeMultiplier`	Nota de Layout
Parágrafos do corpo	`true`	nenhum (sem limite)	Deixe o texto quebrar; evite alturas fixas
Botões (primários)	`true`	`1.3`–`1.5`	`minHeight: 44`, preenchimento vertical
Rótulos da barra de abas	`true`	`1.1`–`1.2`	Rótulos curtos; permita duas linhas se necessário
Chips / badges	`true`	`1.1`	`flexWrap` nas linhas de chips
Cabeçalhos de tabelas de dados	`true`	`1.2`	Mudar para layout de cartão em escala alta
Ícones decorativos	N/A	N/A	Tamanho do ícone fixo; o rótulo carrega o significado

Padrão 2: AppText no Sistema de Design

Centralize os tokens de tipografia - veja Escala de Tipografia e Carregamento de Fontes e Noções Básicas de Sistemas de Design.

// shared/ui/AppText.tsx - política de escala única
export const typography = StyleSheet.create({
  display: { fontSize: 34, lineHeight: 40 },
  title: { fontSize: 22, lineHeight: 28 },
  body: { fontSize: 16, lineHeight: 24 },
  caption: { fontSize: 13, lineHeight: 18 },
});

Proíba Text bruto em features/** via ESLint - force variantes de AppText
Documente quais variantes são sem limite no Storybook

Padrão 3: Evite Cortes com Layout Flexível

// Frágil - altura fixa corta texto grande
<View style={{ height: 40 }}>
  <Text numberOfLines={1}>Configurações da conta e controles de privacidade</Text>
</View>
 
// Resiliente - cresce com o conteúdo
<View style={{ minHeight: 44, paddingVertical: 8 }}>
  <Text style={{ flexShrink: 1 }}>Configurações da conta e controles de privacidade</Text>
</View>

Anti-padrão	Correção
`height: 32` em rótulos	`minHeight` + preenchimento
`numberOfLines={1}` em títulos	Layout de envolvimento ou empilhamento
Linha horizontal sem `flexShrink`	`flexShrink: 1` no lado do texto
Badges posicionados absolutamente sobre o texto	Mover o badge abaixo do título em escala alta

Padrão 4: adjustsFontSizeToFit (iOS, Use com Moderação)

<Text
  adjustsFontSizeToFit
  numberOfLines={1}
  minimumFontScale={0.85}
  maxFontSizeMultiplier={1.2}
  style={styles.tabLabel}
>
  Dashboard
</Text>

Reduz o texto para caber na caixa - aceitável para rótulos de abas de uma palavra, não para o corpo do texto
O Android ignora adjustsFontSizeToFit - não confie nele multiplataforma

Padrão 5: Ouça Mudanças na Escala da Fonte

A escala da fonte pode mudar enquanto o aplicativo está em segundo plano (o usuário ajusta as configurações do sistema).

import { useEffect, useState } from "react";
import { PixelRatio, AppState } from "react-native";
 
export function useFontScale() {
  const [scale, setScale] = useState(PixelRatio.getFontScale());
 
  useEffect(() => {
    const sub = AppState.addEventListener("change", (state) => {
      if (state === "active") {
        setScale(PixelRatio.getFontScale());
      }
    });
    return () => sub.remove();
  }, []);
 
  return scale;
}

Recalcula flags de layout quando o app volta ao estado ativo
Emparelhe com breakpoints responsivos em tablets - Split View & Layouts de Tablet

Padrão 6: Não Desative a Escala Globalmente

// Anti-padrão - rejeita configurações de acessibilidade
<Text allowFontScaling={false}>Termos e condições</Text>
 
// Prefira o limite seletivo apenas em elementos de interface densos
<Text maxFontSizeMultiplier={1.15} style={styles.badge}>
  PRO
</Text>

Desativar a escala globalmente é um risco de revisão de loja e aquisição - limite seletivamente em vez disso.

Mergulho Profundo

Dynamic Type do iOS vs Tamanho da Fonte do Android

Caminho da Configuração	Efeito em RN
iOS Display & Text Size → Larger Text	Escala `Text` quando `allowFontScaling` é true
Android Display → Font size	O mesmo via `PixelRatio.getFontScale()`
Tamanho de texto por app (iOS 15+)	Ainda passa pelas APIs de escala de fonte

lineHeight deve escalar com fontSize - use pares de tokens (16/24, 22/28), não valores únicos arbitrários.

Procedimento de Teste

1. iOS: Settings → Accessibility → Display & Text Size → Larger Text → maximum
2. Android: Settings → Display → Font size → largest
3. Percorra o onboarding, formulário, barra de abas e checkout
4. Verifique: CTAs não cortados, ícones de abas não sobrepostos, texto legal não truncado
5. Capture falhas para revisão de design - não apenas tickets de engenharia

Relação com Leitores de Tela

Texto grande e leitores de tela frequentemente se sobrepõem - usuários podem habilitar ambos. Layouts que sobrevivem à escala de fonte geralmente ajudam usuários de zoom e leitores também. Anuncie mudanças de layout com moderação; a reorganização por si só não precisa de announceForAccessibility.

Armadilhas

allowFontScaling={false} em TextInput - usuários não podem aumentar o texto do campo; evite a menos que duplique o texto de pré-visualização próximo.
Tamanhos de fonte mistos em uma linha - linhas de base desalinhadas quando apenas um lado escala; normalize variantes.
Ícones dimensionados apenas em dp - o texto cresce, os ícones não; deixe um espaço entre o ícone e o rótulo.
Abas inferiores com altura de barra de abas fixa - abas nativas do Expo Router podem cortar; teste no dispositivo.
Conteúdo WebView - a escala de fonte do RN não se propaga; o chrome nativo ainda deve escalar.

FAQs

Qual é um padrão seguro para maxFontSizeMultiplier?

Corpo: sem limite.
Elementos de navegação: 1.1–1.2.
Botões e títulos de lista: 1.3–1.5.
Ajuste por sistema de design - documente nos knobs do Storybook.

Imagens e ícones devem escalar com o texto?

Ícones geralmente permanecem de tamanho fixo; aumente o preenchimento de toque.
Ilustrações com texto embutido devem usar SVG/sobreposições de texto que escalam - ou fornecer rótulos acessíveis.

PixelRatio.getFontScale() atualiza em tempo real?

Não continuamente - releia em AppState ativo ou em mudanças de dimensão.
Não consulte em um setInterval - a atualização orientada por eventos é suficiente.

Relacionados

Escala de Tipografia e Carregamento de Fontes - tokens de fonte e alturas de linha
Melhores Práticas de Estilização - limites de escala em UI densa
Noções Básicas de Sistemas de Design - propriedade AppText primitiva
Noções Básicas de Acessibilidade - fundamentos de teste de dispositivo
Checklist de Auditoria de Acessibilidade - portão de escala de fonte antes do lançamento
Melhores Práticas de Acessibilidade - resumo da seção

Versões da Stack: Esta página foi escrita para React 19.2.3, React Native 0.86.0 e Expo SDK 57 (expo ~57.0.4).

Receita

Cartão de receita de referência rápida - pronto para copiar e colar.

import type { TextProps } from "react-native";
import { PixelRatio, StyleSheet, Text, View } from "react-native";
 
type AppTextProps = TextProps & {
  variant?: "body" | "caption" | "toolbar";
};
 
const SCALE_CAPS = {
  body: undefined,
  caption: 1.5,
  toolbar: 1.2,
} as const;
 
export function AppText({ variant = "body", style, ...rest }: AppTextProps) {
  const cap = SCALE_CAPS[variant];
 
  return (
    <Text
      allowFontScaling
      maxFontSizeMultiplier={cap}
      style={[typography[variant], style]}
      {...rest}
    />
  );
}
 
const typography = StyleSheet.create({
  body: { fontSize: 16, lineHeight: 24 },
  caption: { fontSize: 13, lineHeight: 18 },
  toolbar: { fontSize: 14, lineHeight: 18, fontWeight: "600" },
});
 
export function useFontScale() {
  return PixelRatio.getFontScale();
}
 
export function ScalableRow({ title, meta }: { title: string; meta: string }) {
  return (
    <View style={styles.row}>
      <AppText variant="body" style={styles.title}>
        {title}
      </AppText>
      <AppText variant="caption" style={styles.meta}>
        {meta}
      </AppText>
    </View>
  );
}
 
const styles = StyleSheet.create({
  row: { flexDirection: "row", flexWrap: "wrap", gap: 8, paddingVertical: 12, alignItems: "center" },
  title: { flexShrink: 1 },
  meta: { color: "#64748b" },
});

Exemplo de Trabalho

Lista de configurações que se reorganiza de linha única para várias linhas quando a escala da fonte excede um limite.

import { useMemo } from "react";
import { PixelRatio, Pressable, StyleSheet, Text, View } from "react-native";
 
const LARGE_SCALE_THRESHOLD = 1.3;
 
export function SettingsScreen() {
  const fontScale = PixelRatio.getFontScale();
  const stacked = useMemo(() => fontScale >= LARGE_SCALE_THRESHOLD, [fontScale]);
 
  return (
    <View style={styles.screen}>
      <View style={[styles.toolbar, stacked && styles.toolbarStacked]}>
        <Text
          style={styles.toolbarTitle}
          maxFontSizeMultiplier={1.2}
          numberOfLines={stacked ? 2 : 1}
        >
          Configurações
        </Text>
      </View>
 
      <Pressable style={[styles.row, stacked && styles.rowStacked]}>
        <Text style={styles.rowTitle} allowFontScaling>
          Notificações
        </Text>
        <Text style={styles.rowValue} maxFontSizeMultiplier={1.4}>
          Ativado
        </Text>
      </Pressable>
 
      <Pressable style={[styles.row, stacked && styles.rowStacked]}>
        <Text style={styles.rowTitle} allowFontScaling>
          Idioma
        </Text>
        <Text style={styles.rowValue} maxFontSizeMultiplier={1.4}>
          Português
        </Text>
      </Pressable>
    </View>
  );
}
 
const styles = StyleSheet.create({
  screen: { flex: 1, padding: 16, gap: 8 },
  toolbar: { minHeight: 44, justifyContent: "center" },
  toolbarStacked: { minHeight: 56, paddingVertical: 8 },
  toolbarTitle: { fontSize: 20, fontWeight: "700" },
  row: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    minHeight: 48,
    paddingVertical: 8,
    gap: 12,
  },
  rowStacked: { flexDirection: "column", alignItems: "flex-start" },
  rowTitle: { fontSize: 16, fontWeight: "600", flexShrink: 1 },
  rowValue: { fontSize: 14, color: "#64748b" },
});

O que isso demonstra:

PixelRatio.getFontScale() controla os modos de layout em escalas extremas
maxFontSizeMultiplier na toolbar vs texto do corpo sem limite
flexWrap / reorganização de colunas em vez de truncamento numberOfLines={1} em rótulos primários
minHeight nas linhas preserva alvos de toque quando o texto quebra

Padrões de Receita

Padrão 1: Tabela de Política de Escala

Região da UI	`allowFontScaling`	`maxFontSizeMultiplier`	Nota de Layout
Parágrafos do corpo	`true`	nenhum (sem limite)	Deixe o texto quebrar; evite alturas fixas
Botões (primários)	`true`	`1.3`–`1.5`	`minHeight: 44`, preenchimento vertical
Rótulos da barra de abas	`true`	`1.1`–`1.2`	Rótulos curtos; permita duas linhas se necessário
Chips / badges	`true`	`1.1`	`flexWrap` nas linhas de chips
Cabeçalhos de tabelas de dados	`true`	`1.2`	Mudar para layout de cartão em escala alta
Ícones decorativos	N/A	N/A	Tamanho do ícone fixo; o rótulo carrega o significado

Padrão 2: AppText no Sistema de Design

Centralize os tokens de tipografia - veja Escala de Tipografia e Carregamento de Fontes e Noções Básicas de Sistemas de Design.

// shared/ui/AppText.tsx - política de escala única
export const typography = StyleSheet.create({
  display: { fontSize: 34, lineHeight: 40 },
  title: { fontSize: 22, lineHeight: 28 },
  body: { fontSize: 16, lineHeight: 24 },
  caption: { fontSize: 13, lineHeight: 18 },
});

Proíba Text bruto em features/** via ESLint - force variantes de AppText
Documente quais variantes são sem limite no Storybook

Padrão 3: Evite Cortes com Layout Flexível

// Frágil - altura fixa corta texto grande
<View style={{ height: 40 }}>
  <Text numberOfLines={1}>Configurações da conta e controles de privacidade</Text>
</View>
 
// Resiliente - cresce com o conteúdo
<View style={{ minHeight: 44, paddingVertical: 8 }}>
  <Text style={{ flexShrink: 1 }}>Configurações da conta e controles de privacidade</Text>
</View>

Anti-padrão	Correção
`height: 32` em rótulos	`minHeight` + preenchimento
`numberOfLines={1}` em títulos	Layout de envolvimento ou empilhamento
Linha horizontal sem `flexShrink`	`flexShrink: 1` no lado do texto
Badges posicionados absolutamente sobre o texto	Mover o badge abaixo do título em escala alta

Padrão 4: adjustsFontSizeToFit (iOS, Use com Moderação)

<Text
  adjustsFontSizeToFit
  numberOfLines={1}
  minimumFontScale={0.85}
  maxFontSizeMultiplier={1.2}
  style={styles.tabLabel}
>
  Dashboard
</Text>

Reduz o texto para caber na caixa - aceitável para rótulos de abas de uma palavra, não para o corpo do texto
O Android ignora adjustsFontSizeToFit - não confie nele multiplataforma

Padrão 5: Ouça Mudanças na Escala da Fonte

A escala da fonte pode mudar enquanto o aplicativo está em segundo plano (o usuário ajusta as configurações do sistema).

import { useEffect, useState } from "react";
import { PixelRatio, AppState } from "react-native";
 
export function useFontScale() {
  const [scale, setScale] = useState(PixelRatio.getFontScale());
 
  useEffect(() => {
    const sub = AppState.addEventListener("change", (state) => {
      if (state === "active") {
        setScale(PixelRatio.getFontScale());
      }
    });
    return () => sub.remove();
  }, []);
 
  return scale;
}

Recalcula flags de layout quando o app volta ao estado ativo
Emparelhe com breakpoints responsivos em tablets - Split View & Layouts de Tablet

Padrão 6: Não Desative a Escala Globalmente

// Anti-padrão - rejeita configurações de acessibilidade
<Text allowFontScaling={false}>Termos e condições</Text>
 
// Prefira o limite seletivo apenas em elementos de interface densos
<Text maxFontSizeMultiplier={1.15} style={styles.badge}>
  PRO
</Text>

Desativar a escala globalmente é um risco de revisão de loja e aquisição - limite seletivamente em vez disso.

Mergulho Profundo

Dynamic Type do iOS vs Tamanho da Fonte do Android

Caminho da Configuração	Efeito em RN
iOS Display & Text Size → Larger Text	Escala `Text` quando `allowFontScaling` é true
Android Display → Font size	O mesmo via `PixelRatio.getFontScale()`
Tamanho de texto por app (iOS 15+)	Ainda passa pelas APIs de escala de fonte

lineHeight deve escalar com fontSize - use pares de tokens (16/24, 22/28), não valores únicos arbitrários.

Procedimento de Teste

1. iOS: Settings → Accessibility → Display & Text Size → Larger Text → maximum
2. Android: Settings → Display → Font size → largest
3. Percorra o onboarding, formulário, barra de abas e checkout
4. Verifique: CTAs não cortados, ícones de abas não sobrepostos, texto legal não truncado
5. Capture falhas para revisão de design - não apenas tickets de engenharia

Relação com Leitores de Tela

Armadilhas

allowFontScaling={false} em TextInput - usuários não podem aumentar o texto do campo; evite a menos que duplique o texto de pré-visualização próximo.
Tamanhos de fonte mistos em uma linha - linhas de base desalinhadas quando apenas um lado escala; normalize variantes.
Ícones dimensionados apenas em dp - o texto cresce, os ícones não; deixe um espaço entre o ícone e o rótulo.
Abas inferiores com altura de barra de abas fixa - abas nativas do Expo Router podem cortar; teste no dispositivo.
Conteúdo WebView - a escala de fonte do RN não se propaga; o chrome nativo ainda deve escalar.

FAQs

Qual é um padrão seguro para maxFontSizeMultiplier?

Corpo: sem limite.
Elementos de navegação: 1.1–1.2.
Botões e títulos de lista: 1.3–1.5.
Ajuste por sistema de design - documente nos knobs do Storybook.

Imagens e ícones devem escalar com o texto?

Ícones geralmente permanecem de tamanho fixo; aumente o preenchimento de toque.
Ilustrações com texto embutido devem usar SVG/sobreposições de texto que escalam - ou fornecer rótulos acessíveis.

PixelRatio.getFontScale() atualiza em tempo real?

Não continuamente - releia em AppState ativo ou em mudanças de dimensão.
Não consulte em um setInterval - a atualização orientada por eventos é suficiente.

Relacionados

Escala de Tipografia e Carregamento de Fontes - tokens de fonte e alturas de linha
Melhores Práticas de Estilização - limites de escala em UI densa
Noções Básicas de Sistemas de Design - propriedade AppText primitiva
Noções Básicas de Acessibilidade - fundamentos de teste de dispositivo
Checklist de Auditoria de Acessibilidade - portão de escala de fonte antes do lançamento
Melhores Práticas de Acessibilidade - resumo da seção

Versões da Stack: Esta página foi escrita para React 19.2.3, React Native 0.86.0 e Expo SDK 57 (expo ~57.0.4).

Tipografia Dinâmica e Escala de Fontes

Buscar na documentação

Tipografia Dinâmica e Escala de Fontes