# Cartão de pré-visualização de combinação de fontes Visualize uma combinação de fontes para título e corpo com texto real, tamanhos, pesos, alturas de linha, caracteres e CSS. > Página canônica: https://elysiatools.com/pt/tools/font-pairing-preview-card - **Categoria:** Design - **Palavras-chave:** combinação de fontes, tipografia, pré-visualização de fonte, CSS ## Visão geral O cartão usa os nomes informados como pilhas CSS sem baixar arquivos de fonte. O resultado é determinístico e funciona offline; a aparência depende das fontes disponíveis na página hospedeira. ## Entradas - **Pilha de fonte do título** (text): Fraunces, Georgia, serif - **Pilha de fonte do corpo** (text): Inter, system-ui, sans-serif - **Texto de exemplo** (textarea): A thoughtful interface starts with readable type. - **Conjunto de caracteres** (select) - **Tamanho do título (px)** (number) - **Tamanho do corpo (px)** (number) - **Peso do título** (number) - **Peso do corpo** (number) - **Altura de linha do título** (number) - **Altura de linha do corpo** (number) ## Quando usar - Ao testar combinações tipográficas para sites, landing pages ou interfaces. - Antes de definir tamanhos, pesos e alturas de linha para títulos e textos. - Ao verificar a aparência de caracteres latinos, cirílicos, gregos, chineses, árabes ou devanagari. ## Como funciona - Informe a pilha CSS da fonte do título e a pilha CSS da fonte do corpo. - Digite o texto de exemplo que será exibido na prévia. - Escolha o conjunto de caracteres e ajuste tamanhos, pesos e alturas de linha. - Visualize o cartão HTML com a combinação tipográfica configurada. ## Casos de uso - Comparar uma fonte serifada editorial com uma fonte sem serifa para interfaces. - Validar a legibilidade de textos em diferentes conjuntos de caracteres. - Documentar decisões tipográficas com valores claros de tamanho, peso e altura de linha. ## Perguntas frequentes ### O cartão baixa arquivos de fonte? Não. Ele usa os nomes informados como pilhas CSS e não baixa arquivos de fonte. ### O que é uma pilha CSS de fontes? É uma lista de fontes em ordem de preferência, normalmente terminada por um fallback como serif, sans-serif ou system-ui. ### A aparência exibida será igual em qualquer dispositivo? Não necessariamente. O resultado depende das fontes instaladas ou carregadas pela página hospedeira. ### Posso usar texto em outros alfabetos? Sim. O cartão oferece conjuntos latino, cirílico, grego, chinês, árabe e devanagari. ### Quais ajustes tipográficos estão disponíveis? É possível ajustar tamanho, peso e altura de linha do título e do corpo, além das pilhas CSS e do texto de exemplo. ## Ferramentas relacionadas - [Explicador BFV, CKKS, LWE de orçamento de ruído, relinearização e bootstrapping FHE](https://elysiatools.com/pt/tools/bfv-ckks-lwe-fhe-ciphertext-noise-budget-relin-and-bootstrapping-explainer): Executa um mini-pipeline BFV/CKKS real sobre Z_q\[x\]/(xⁿ+1): orçamentos de ruído invariante exatos em bits, multiplicação com relinearização, troca de módulo, empacotamento SIMD e renovação por bootstrapping. - [Auditor de consistência de estilo de manuscrito](https://elysiatools.com/pt/tools/manuscript-style-consistency-auditor): Verifica números, datas, unidades, aspas, travessões, níveis de título e nomes próprios; gera uma folha de estilo - [Ajustador de Opacidade de Cor](https://elysiatools.com/pt/tools/color-opacity-adjuster): Ajustar opacidade/transparência alfa de cores com visualização em tempo real e processamento em lote - [Extrator de tokens de tema ECharts](https://elysiatools.com/pt/tools/echarts-theme-token-extractor): Extrai design tokens — cores, números, tamanhos de fonte e strings — de um JSON de tema ECharts e os exporta direto no seu design system. Cole um objeto de tema (o registrado e passado a echarts.init(dom, themeName)) e a ferramenta percorre cada folha, marcando cada cor (com normalização opcional nomeada/rgb → hex), número de espaçamento, tamanho de fonte e string, depois emite variáveis CSS limpas, um config theme.extend do Tailwind, tokens.json do Style Dictionary ou variáveis SCSS. Faz a ponte entre um tema de visualização ECharts e os tokens de design Figma/CSS/Tailwind sem copiar cada valor à mão. - [Cartão de especificação responsiva Figma iOS Android pt dp sp](https://elysiatools.com/pt/tools/figma-ios-android-pt-dp-sp-responsive-design-spec-card): Converte valores px do Figma para as unidades corretas de cada plataforma e gera um spec card para devs: pt do iOS (@1x/@2x/@3x com px renderizados por escala), dp/sp do Android (tabela de renderização mdpi…xxxhdpi e escala de fonte), rem/vw web com snippet clamp(); auditoria de alvos de toque mínimos (44pt iOS / 48dp Android / 44px e 24px WCAG) com classes de janela do Material e breakpoints do Tailwind. - [Inspetor de arquivos de fonte (TTF / OTF / WOFF / WOFF2)](https://elysiatools.com/pt/tools/font-file-inspector): Envie uma fonte TTF, OTF, WOFF ou WOFF2 (WOFF2 é descomprimida automaticamente) e inspecione todos os metadados: família/subfamília/designer/copyright/versão, número de glifos, unitsPerEm, peso e largura, ângulo itálico, bandeiras de estilo e caixa delimitadora; mapa de calor de cobertura por blocos Unicode; pré-visualização SVG de glifos (texto personalizável, amostra automática para fontes de ícones); ligaduras liga e recursos OpenType; eixos fvar e instâncias nomeadas de fontes variáveis. - [Laboratório de Tipografia PDF](https://elysiatools.com/pt/tools/pdf-typography-playground): Experimente com configurações de tipografia: espaçamento entre linhas, espaçamento, alinhamento e recuo - [Remover Linhas Duplicadas](https://elysiatools.com/pt/tools/remove-duplicate-lines): Remove duplicatas de linhas em uma lista ou bloco de texto. Mantém a primeira ou última ocorrência, com opções de diferenciação de maiúsculas, corte de espaços e ignorar linhas vazias. ## Exemplos - [Exemplos de Cartão de Crédito](https://elysiatools.com/pt/samples/credit-card): Números de cartão de teste para várias redes (Visa, MasterCard, Amex, etc.) - [Amostras de Fontes Variáveis](https://elysiatools.com/pt/samples/variable-font-samples): Arquivos de fontes variáveis com eixos fvar para o inspetor de eixos/instâncias e construtor CSS - [Amostras de Áudio MP3 Livres de Direitos Autorais](https://elysiatools.com/pt/samples/mp3-samples): Coleção de amostras de áudio livres de direitos autorais para testes e desenvolvimento, incluindo sons da natureza, música de meditação e áudio ambiente - [Exemplos SVG](https://elysiatools.com/pt/samples/svg-samples): Exemplos de Gráficos Vetoriais Escaláveis (SVG) demonstrando vários recursos e técnicas SVG