Conversor de cores
Converta HEX, RGB e HSL com transparência, veja a amostra e copie valores CSS prontos para usar.
Gerador de fonte fluida com clamp()
Calcule font-size: clamp() a partir dos limites de fonte e de largura da janela, com saída em px ou rem.
rem é calculado com o tamanho raiz informado. Na página final, verifique também o zoom do navegador e as configurações de texto ampliado.
Uma boa tipografia torna cada frase mais agradável de ler.
CSS
Sobre a ferramenta
Defina o tamanho de títulos no celular e no computador e veja os valores intermediários.
Como usar
Informe os tamanhos mínimo e máximo da fonte e as larguras de janela correspondentes. Escolha px ou rem, ajuste a largura simulada e copie ou baixe a declaração. As larguras precisam estar em ordem crescente, e o tamanho mínimo não pode superar o máximo.
A fonte varia linearmente entre as larguras escolhidas e respeita os limites fora desse intervalo. Para rem, configure o tamanho da fonte raiz usado na sua página. A fórmula considera a janela, não o contêiner, e não muda outras regras de tipografia.
Perguntas frequentes
Por que informar o tamanho raiz ao usar rem?
A prévia usa esse tamanho para converter rem em pixels. Ele deve coincidir com o tamanho da fonte do elemento raiz da sua página. A fórmula responde à largura da área visível do navegador; outro tamanho de fonte raiz muda seu comportamento.
Como definir 16px no celular e 32px no computador?
Escolha px e informe 16px para uma viewport de 400px e 32px para 1200px. O resultado é clamp(16px, 8px + 2vw, 32px): em 800px, o tamanho é 24px; fora do intervalo, ele permanece nos limites. O cálculo segue a largura da viewport, não a do contêiner.
Ferramentas relacionadas
Abre em uma nova aba
Comentários
0