Prévia de Tipografia CSS
Ajuste font-size, line-height e letter-spacing em tempo real.
Copie o CSS gerado com um clique.
↑ Clique no texto acima para editá-lo diretamente
Sobre
A Prévia de Tipografia CSS permite ajustar font-size, line-height, letter-spacing e font-weight com sliders e ver o resultado imediatamente em uma área de visualização ao vivo.
Compatível com Google Fonts, incluindo fontes japonesas. Depois de definir a configuração ideal, copie o CSS gerado com um clique. Apenas o carregamento do Google Fonts requer comunicação de rede externa; o texto e as configurações nunca são transmitidos.
Como Usar
Ajuste os sliders
Arraste os sliders de font-size, line-height, letter-spacing e font-weight. Ou comece com uma predefinição para os casos de uso mais comuns.
Revise a prévia
Observe as alterações instantaneamente na área de prévia. Clique no texto para editá-lo com seu próprio conteúdo.
Copie o CSS
Clique em "Copiar CSS" para levar o código para a área de transferência e colá-lo na sua folha de estilos.
Glossário
- font-size
- Define o tamanho da fonte. Pode ser especificado em px, em, rem, %, etc. O valor padrão do navegador é 16px.
- line-height
- Define a altura da linha. Recomenda-se um valor sem unidade (ex. 1.75). Para texto de corpo, 1.5–1.8 é habitual.
- letter-spacing
- Define o espaçamento entre caracteres. Recomenda-se unidades em para um design escalável.
- font-weight
- Define a espessura da fonte. Os valores vão de 100 (fino) a 900 (extra-negrito).
- font-family
- Especifica o tipo de fonte. Podem ser listadas múltiplas fontes de reserva separadas por vírgulas.
- Tipografia
- A arte de combinar tipos para que a linguagem escrita seja legível e visualmente atraente.
- Google Fonts
- Serviço gratuito de fontes web do Google. As fontes são carregadas por uma tag link CSS e aplicadas com font-family.
- Web Font
- Fonte carregada de um servidor via @font-face. Garante uma renderização consistente entre dispositivos.
FAQ
- Q.Meu texto é enviado a algum servidor?
- Não. O texto de prévia e toda a configuração são processados localmente no seu navegador.
- Q.Por que o carregamento do Google Fonts requer requisições externas?
- Apenas o arquivo de fonte é salvo dos servidores do Google. O texto e as configurações nunca são transmitidos.
- Q.Posso usar fontes que não estão na lista?
- Você pode carregar qualquer Google Font adicionando seu nome à propriedade font-family na sua folha de estilos. A lista integrada cobre as opções mais populares.
- Q.Funciona no celular?
- Sim. Os sliders suportam entrada por toque.
- Q.Posso inserir valores exatos em vez de usar sliders?
- Não diretamente. Use as predefinições para os valores habituais e ajuste com os sliders.
Casos de Uso
Tipografia para Design Web
Encontre visualmente a combinação ideal de font-size e line-height para títulos, corpo e legendas.
Otimização de Legibilidade em Blog
Ajuste o espaçamento entre linhas e caracteres para melhorar a leitura de artigos longos.
Verificação de Fontes para Apresentações
Verifique se o tamanho e o peso da fonte ficam bons antes de finalizar a tipografia dos slides.
Aprender CSS
Entenda visualmente como cada propriedade de tipografia CSS funciona experimentando em tempo real.
Enviar feedback
Deixe-nos saber sua opinião para nos ajudar a melhorar a ferramenta.
O feedback está temporariamente suspenso
O servidor está ocupado ou a proteção contra spam está ativa. Tente novamente mais tarde.