Tamanho, Peso e Estilo da Fonte
Controle o tamanho do texto com font-size, o peso com font-weight e o estilo com font-style.
Tamanho, Peso e Estilo da Fonte é uma aula grátis de CSS Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de CSS Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de CSS Academy inclui 4 aulas no total.
font-size
font-size define a altura dos glifos. Aceita qualquer unidade de comprimento. Recomenda-se usar rem para uma tipografia escalável e acessível.
<h1>Heading (2.5rem)</h1>
<p>Body text (1rem)</p>
<small>Fine print (0.75rem)</small>
Tamanhos de fonte com palavras-chave
O CSS também fornece tamanhos absolutos com palavras-chave (xx-small a xx-large) e palavras-chave relativas (smaller, larger) em relação ao tamanho da fonte do elemento pai.
<p class="note">Smaller note text</p>
<p class="big">Extra large text</p>
Peso da fonte
font-weight define a espessura do texto. Use valores numéricos (de 100 a 900, em incrementos de 100) ou palavras-chave:
<p class="thin">Thin weight (100)</p>
<p>Normal body weight (400) with <strong>bold strong text (700)</strong></p>
<p class="heavy">Heavy weight (900)</p>
Peso da fonte e fontes variáveis
Com fontes variáveis, qualquer peso inteiro (por exemplo, font-weight: 550) é válido, e a fonte interpola entre os eixos definidos. Isso proporciona um controle tipográfico detalhado.
Estilo da fonte
font-style controla a renderização em itálico e oblíquo:
<p>This has <em>italic emphasis</em> inline.</p>
<p class="normal">Normal style text</p>
<p class="oblique">Oblique 20deg text</p>
Variante da fonte
font-variant habilita recursos tipográficos, como versaletes:
<p>The <abbr title="Cascading Style Sheets">CSS</abbr> abbreviation uses small-caps.</p>
Atalho da fonte
O atalho font reúne estilo, variante, peso, tamanho, altura da linha e família:
<p>Shorthand font: italic bold 1.1rem/1.6 Roboto.</p>
Dimensionamento responsivo do tamanho da fonte
Use clamp() para criar uma tipografia fluida que se ajusta suavemente entre um tamanho mínimo e um máximo:
<h1>Resize the window — this heading scales fluidly.</h1>
Altura da linha para legibilidade
line-height define o espaçamento vertical entre as linhas. Recomenda-se o valor sem unidade (por exemplo, 1.5), pois ele é dimensionado de acordo com o tamanho da fonte dos elementos descendentes.
<h1>Tight Heading Line Height</h1>
<p>Body copy with relaxed 1.5 line-height wraps across multiple lines for comfortable reading, demonstrating the effect of the line-height property on paragraph text blocks.</p>
Espaçamento entre letras e palavras
letter-spacing adiciona espaço entre os caracteres; word-spacing adiciona espaço entre as palavras. Use unidades em para que esses valores acompanhem o tamanho da fonte.
<h2 class="heading">Spaced Out Heading Text</h2>
Dimensionamento acessível de fontes
Nunca defina font-size em px no elemento html ou body. Isso substitui a preferência de tamanho de fonte definida pelo usuário no navegador. Em vez disso, use unidades rem baseadas no padrão do navegador.
Verificação rápida
Qual valor numérico de font-weight é equivalente à palavra-chave bold?
Recapitulação
Use rem para font-size e respeite as preferências do usuário. font-weight aceita valores de 100 a 900 ou palavras-chave. O atalho font reúne várias propriedades. Use clamp() para uma tipografia fluida e line-height sem unidade para manter um espaçamento consistente.
Perguntas Frequentes
A aula “Tamanho, Peso e Estilo da Fonte” é grátis?
Sim — o texto completo de “Tamanho, Peso e Estilo da Fonte” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de CSS Academy, atualize para CoddyKit PRO. O curso de CSS Academy inclui 4 aulas no total.
O que vou aprender em “Tamanho, Peso e Estilo da Fonte”?
Controle o tamanho do texto com font-size, o peso com font-weight e o estilo com font-style. Você pratica CSS Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar CSS Academy?
Nenhuma experiência prévia é necessária. CSS Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Tamanho, Peso e Estilo da Fonte”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de CSS Academy?
Sim. Cada aula de CSS Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Famílias de Fontes e Fontes Seguras para a Web
- Tamanho, Peso e Estilo da Fonte
- Alinhamento, Decoração e Espaçamento de Texto
- Google Fonts e @font-face