Ir para o conteúdo principal

Font-Size

As classes utilitárias de font-size no WPF permitem ajustar o tamanho da fonte de elementos HTML de maneira rápida e consistente. Elas utilizam a propriedade CSS font-size e suportam unidades absolutas e relativas, como px, em, rem e %, oferecendo flexibilidade para diferentes contextos de design.

Como Funcionam as Classes de Font-Size

As classes seguem o padrão fs-[valor][unidade], onde:

  • [valor] é um número (inteiro ou decimal) que define o tamanho da fonte.

  • [unidade] é uma unidade de medida obrigatória: px, em, rem ou %.

Regras CSS Geradas

Cada classe é traduzida diretamente para a propriedade CSS font-size. Por exemplo:

  • fs-16px → font-size: 16px;

  • fs-1.5rem → font-size: 1.5rem;

  • fs-120% → font-size: 120%;

Como Usar

Aplique as classes diretamente a elementos de texto, como <p>, <h1>, <span>, etc., para ajustar o tamanho da fonte. As classes são ideais para criar hierarquias tipográficas claras e consistentes.

Exemplo 1: Texto de Corpo

<p class="fs-16px">Este parágrafo tem fonte de 16px.</p>
<p class="fs-1.2rem">Este parágrafo tem fonte de 1.2rem, relativo ao elemento raiz.</p>

Exemplo 2: Títulos

<h1 class="fs-32px">Título Principal (32px)</h1>
<h2 class="fs-24px">Subtítulo (24px)</h2>

Exemplo 3: Tamanhos Relativos

<div class="fs-1.5em">
  <p>Este texto é 1.5 vezes maior que o pai.</p>
  <p class="fs-80%">Este texto é 80% do tamanho do pai (1.5em * 0.8 = 1.2em do original).</p>
</div>

Exemplo 4: Percentuais

<p class="fs-150%">Este texto é 150% maior que o tamanho da fonte do pai.</p>

Dicas e Melhores Práticas

Hierarquia: Combine diferentes tamanhos para criar uma hierarquia visual clara entre títulos, subtítulos e textos de corpo. Mantenha-se consistente em quais tags html utilizar para quais tamanhos;

Acessibilidade: Evite tamanhos muito pequenos (ex.: fs-10px) para garantir legibilidade, especialmente em dispositivos móveis. O tamanho recomendado para texto é a partir de 12 pixels de tamanho.

Testes: Verifique o comportamento em diferentes navegadores e tamanhos de tela para garantir que o texto se ajuste corretamente.

Voltar ao topo