Como criar tipografia responsiva com CSS

Desenvolver um site com tantos pontos de interrupção pode ser cansativo. Existem muitas novas técnicas para aprender em CSS, seja você um desenvolvedor experiente ou um desenvolvedor de nível médio.

Mas como você começa com a tipografia responsiva? Veja como seguir as etapas para adaptar páginas da Web a qualquer tamanho de tela.

Importância da tipografia responsiva

A tipografia desempenha um papel vital no desenvolvimento e design da Web, garantindo a legibilidade, a usabilidade e a estética geral de um site. Todo mundo quer um site responsivo. Não seria ótimo se o texto ou as fontes se ajustassem automaticamente a diferentes tamanhos de tela? Outras vantagens da tipografia responsiva no desenvolvimento web incluem o seguinte;

• Ele melhora a experiência geral do usuário em vários dispositivos ou tamanhos de tela, garantindo legibilidade e legibilidade.
instagram viewer
• Aumenta a acessibilidade acomodando usuários com deficiência visual ou outras deficiências. Ele acomoda várias preferências do usuário, como tamanhos de fonte ajustáveis.
• A tipografia consistente em todos os dispositivos e resoluções ajuda a preservar a identidade da marca e a unidade visual.

Aqui está um modelo de código que você pode copiar para seu editor de código antes de começar, para que possa seguir as técnicas a serem discutidas.

O arquivo de código HTML

index.html
html>
<htmlidioma="en">
<cabeça>
<metaconjunto de caracteres="UTF-8">
<metanome="janela de exibição"contente="largura=largura do dispositivo, escala inicial=1,0">
<linkrele="folha de estilo"href="estilo.css">
<título> Tipografia Responsiva título>
cabeça>
<corpo>
<divaula="recipiente">
<h1> Lorem ipsum h1>
<p> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ut, obcaecati. Corporis quam, blanditiis odit optio dignissimos facilis magni doloribus adipisci at quaerat oluptas molestiae eius dicta officia quod eaque perspiciatis! 
p>
div>
corpo>
html>

O arquivo de código CSS

/*style.css*/
corpo{
mostrar: flex;
justificar-conteúdo: Centro;
itens de alinhamento: Centro;
altura: 100vh;
}
.recipiente{
largura: 400px;
cor de fundo: branco antigo;
preenchimento: 15px;
Sombra da caixa:0 2px 5pxrgba(0,0,0, 0.1) ;
}
h1{
cor: Rosa quente;
}

Agora, vamos explorar alguns métodos e técnicas eficazes para implementar tipografia responsiva usando CSS

1. Fixação

Esta é uma técnica de tipografia CSS moderna que permite e garante que o tamanho da fonte de um elemento permaneça dentro de um determinado intervalo. A função de fixação “Clamp()” recebe três parâmetros, o valor mínimo, o valor ideal e o valor máximo. A função de grampo não se limita à tipografia. Ele pode ser usado para imagens, cartões, vídeos e outras mídias. É assim que funciona.

Braçadeira (valor mínimo, valor ideal, valor máximo):

h1{
tamanho da fonte: braçadeira(2rem, 5vw, 3rem);
}
p{
tamanho da fonte: braçadeira(1rem, 3vw, 2rem);
}

Neste exemplo, os tamanhos de fonte para o título e o parágrafo são definidos usando a função “clamp()”. Para o cabeçalho “h1”, o valor mínimo é definido como “2rem”, garantindo que o tamanho da fonte não fique abaixo de duas vezes o tamanho da fonte raiz. O valor ideal ou preferencial é definido como “5vw”, que é 5% da largura da janela de visualização, tornando-a responsiva a diferentes tamanhos de tela. O valor máximo é definido como “3 rem” garantindo que o tamanho da fonte não seja maior que três vezes o tamanho da fonte raiz. Vice-versa para o estilo de parágrafo.

É uma boa prática usar a largura da viewport “vw” ou a porcentagem “%” para o valor ideal, pois permite que a propriedade seja dimensionada proporcionalmente com base no espaço disponível, tornando o design mais responsivo. Certifique-se de que você sabe qual unidade CSS você deve usar para o seu cenário.

Esta é a técnica de tipografia mais comum usada pelos desenvolvedores. Envolve a criação de consultas de mídia para cada ponto de interrupção. Ele permite que você aplique estilos específicos com base em diferentes tamanhos de tela. Aqui está uma ilustração:

/* Tamanho da fonte padrão */
h1{
tamanho da fonte: 38px;
}
p{
tamanho da fonte: 20px;
}
/* Tamanho da fonte para telas pequenas */
@meios de comunicação (largura máxima:800px){
h1{
tamanho da fonte: 32px;
}
p{
tamanho da fonte: 18px;
}
}
/* Tamanho da fonte para telas menores */
@meios de comunicação (largura máxima:400 px){
h1{
tamanho da fonte: 28px;
}
p{
tamanho da fonte: 15px;
}
}

Neste exemplo, o título e o parágrafo são definidos com um valor padrão de “38px” a “20px” respectivamente. Em seguida, são definidas condições para tamanhos de tela menores para tornar o layout responsivo em telefones celulares. Você pode criar quantas consultas de mídia quiser com base no design e na capacidade de resposta que desejar, entre muitos outros truques CSS de consulta de mídia que você deve saber.

3. Propriedades personalizadas do CSS

Também conhecidas como variáveis ​​personalizadas CSS, armazenam valores que podem ser reutilizados em todo o seu estilo. Ele pode ser utilizado para tipografia para facilitar o gerenciamento e a personalização. Aqui está um exemplo.

:raiz {
--heading-font-size: 3rem;
--paragraph-font-size: 1.5rem;
}
h1{
tamanho da fonte: var(--heading-font-size);
}
p{
tamanho da fonte: var(--paragraph-font-size);
}
@meios de comunicação (largura máxima:800px){
:raiz {
--heading-font-size: 2rem;
--paragraph-font-size: 0.9rem;
}
}
@meios de comunicação (largura máxima:400 px){
:raiz {
--heading-font-size: 1.5rem;
--paragraph-font-size: 0.8rem;
}
}

Neste exemplo, a propriedade CSS é definida no nível raiz, o que nos permite acessá-la globalmente. O --heading-font-size e --paragraph-font-size são nomes descritivos para o título e o parágrafo, respectivamente, com valores padrão fornecidos a ambos. Essa técnica pode ser reutilizada para várias consultas de mídia para garantir a consistência geral.

Práticas recomendadas de tipografia responsiva

É uma prática comum entre os desenvolvedores usar a largura da janela de visualização (vw) diretamente para realizar a tipografia. Embora seja simples e pareça funcionar, torna-se minúsculo em telas pequenas e extremamente grande em telas grandes. Isso também ocorre quando você aumenta e diminui o zoom da sua página. Se puder, evite usar a viewport diretamente dessa forma;

h1{
tamanho da fonte: 2vh;
 }

Sempre teste e certifique-se de que sua tipografia seja legível em vários tamanhos de tela e sempre teste a compatibilidade do navegador. Considere a legibilidade e certifique-se de que os tamanhos de fonte não sejam muito pequenos ou muito grandes

Tipografia responsiva, a chave para o design da Web legível

A tipografia responsiva desempenha um papel fundamental no design e desenvolvimento da web. Ao implementar os métodos e técnicas, como fixação, consultas de mídia e propriedades personalizadas de CSS, você pode garantir que sua tipografia seja dimensionada em vários tamanhos de tela e dispositivos. Existem muitas técnicas a serem exploradas ao tentar criar capacidade de resposta usando CSS - use essas técnicas para começar a desenvolver experiência nessa área.