EspañolEscala tipográfica e fonte fluida (clamp)
Escolha o tamanho base e a proporção para celular e para computador. A ferramenta gera os tamanhos de h1 a texto pequeno, com clamp() para a fonte crescer suavemente entre as duas telas.
Tamanhos de fonte em harmonia
Disponível em: 
Escala tipográfica e fonte fluida (clamp): para que serve
Escolha o tamanho base e a proporção (de segunda menor a proporção áurea) para o celular e para o computador, e as larguras de tela de cada um. A ferramenta calcula os tamanhos de h1, h2, h3, h4, h5, texto e pequeno nas duas telas e monta o clamp() de cada um, em rem.
A prévia mostra o seu texto em cada tamanho, no celular ou no computador, e o CSS sai com variáveis prontas.
Como usar
- Escolha base e proporção para celular e computador.
- Confira a prévia de cada nível.
- Copie as variáveis CSS.
Quando usar
- Definir os tamanhos de fonte de um site novo.
- Títulos que se ajustam ao celular sem media queries.
- Criar a tipografia de um sistema de design.
Perguntas frequentes
O que é uma escala tipográfica?
É uma sequência de tamanhos em que cada um é o anterior multiplicado pela mesma proporção, como 1,25 (terça maior). Os títulos ficam proporcionais entre si e o site parece mais organizado do que com tamanhos escolhidos ao acaso.
Como funciona o clamp()?
clamp(mínimo, preferido, máximo) deixa a fonte crescer com a largura da tela (o valor preferido usa vw) sem passar dos limites. Com isso, um título tem um tamanho no celular e outro no computador, sem media queries.
Por que usar rem?
Em rem, os tamanhos respeitam a configuração de tamanho de fonte do navegador da pessoa, o que é importante para quem aumenta a letra para ler melhor. A ferramenta usa 1rem = 16px.
É grátis mesmo?
Sim, 100% grátis. Sem cadastro, sem assinatura e sem limite de uso. Todas as ferramentas do Ferramentas123 são gratuitas e rodam direto no seu navegador.