SWCore / CSS / Tipografia

Tipografia CSS

Escala de texto pronta, do rótulo minúsculo ao título — sem tocar em font-size na mão.

O que é

Classes utilitárias pra tamanho, peso, família, cor e tratamento de texto, numa escala única e consistente em todo o framework. A fonte é a Geist (sans) + Geist Mono — as únicas duas do SWCore 2, self-hosted (sem Google Fonts em produção) e VARIÁVEIS: um arquivo só cobre o peso inteiro, de 100 (fininha) a 900 (bem larga/preta).

Como funciona

Escala de tamanho vai de t-pp (12px) a t-xxg (48px). As classes de título t-h1…t-h6 aplicam o MESMO visual de um heading nativo em qualquer tag — útil quando a hierarquia semântica (h1/h2/h3) precisa ser diferente da hierarquia visual. Os títulos h1–h6 nativos (via reset) já usam essa escala sozinhos, fluida com clamp() do mobile ao desktop — peso 400 em todos; o "forte" vem de tamanho + tracking negativo, não de font-weight.

Exemplos

As duas fontes, na largura real Ao vivo

Ágil, o cão marrom pula sobre a raposa. 0123456789

<!-- Geist (sans) — var(--sw-f-san) / .sw-f1–.sw-f3 — texto e títulos -->
<p style="font-family:var(--sw-f-san)">Ágil, o cão marrom pula sobre a raposa.</p>

<!-- Geist Mono — var(--sw-f-mon) / .sw-f4–.sw-f6 — código, números, rótulos -->
<p style="font-family:var(--sw-f-mon)">Ágil, o cão marrom pula sobre a raposa.</p>

<!-- ambas: fonte VARIÁVEL (100–900 num arquivo só), self-hosted, zero request de terceiro -->

Peso — da fininha (100) à bem larga (900) Ao vivo

Aa fininha 100 — o rápido cão marrom

Aa leve 300 — o rápido cão marrom

Aa regular 400 — o rápido cão marrom

Aa semi bold 600 — o rápido cão marrom

Aa bold 800 — o rápido cão marrom

Aa bem larga 900 — o rápido cão marrom

<p class="fw1">fininha — peso 100</p>
<p class="fw3">leve — peso 300</p>
<p class="fw4">regular — peso 400 (padrão do corpo de texto)</p>
<p class="fw6">semi bold — peso 600</p>
<p class="fw8">bold — peso 800</p>
<p class="fw9">bem larga (black) — peso 900</p>

<!-- fw1…fw9 = 100 a 900, de 100 em 100 — a fonte é variável, então
     QUALQUER peso no intervalo funciona, não só os 9 marcados -->

Escala de tamanho completa Ao vivo

legenda (12px)

texto de UI (14px)

corpo padrão (17px)

texto de leitura (19px)

destaque (22px)

subtítulo (32px)

<p class="t-pp">legenda — 12px</p>
<p class="t-p">texto de UI — 14px</p>
<p class="t-m">corpo padrão — 17px (= var(--sw-f-base))</p>
<p class="t-g">texto de leitura — 19px</p>
<p class="t-gg">destaque — 22px</p>
<p class="t-xg">subtítulo — 32px</p>
<p class="t-xxg">título grande — 48px</p>

Títulos fluidos (t-h1…t-h6) Ao vivo

Parece um h3 Parece um h5

<!-- cada um usa clamp() — cresce do mobile ao desktop sozinho -->
<span class="t-h1">clamp(32px → 72px)</span>
<span class="t-h2">clamp(28px → 48px)</span>
<span class="t-h3">clamp(22px → 34px)</span>
<span class="t-h4">clamp(19px → 24px)</span>
<span class="t-h5">clamp(16px → 19px)</span>
<span class="t-h6">clamp(14px → 16px)</span>

<!-- os <h1>–<h6> nativos já vêm com essa escala, sem classe nenhuma -->

Peso, cor e tratamento Ao vivo

Bold (700) cor primária apagado rótulo espaçado

<!-- peso: 100 a 900 -->
<b class="fw4">Regular</b>
<b class="fw6">Semi Bold</b>
<b class="fw7">Bold</b>

<!-- cor semântica do texto -->
<span class="t-pri">primária</span>
<span class="t-suc">sucesso</span>
<span class="t-err">erro</span>
<span class="t-mut">apagada (secundário)</span>

<!-- transformação, alinhamento, quebra -->
<span class="t-upp ls-w">MAIÚSCULAS ESPAÇADAS</span>
<span class="t-ct">centralizado</span>
<span class="truncate">corta numa linha…</span>
<h2 class="twr-b">título que quebra de forma equilibrada</h2>

Atributos

Nenhum.

Variantes

t-pp · t-p · t-m · t-g · t-gg · t-xg · t-xxg

escala de tamanho — 12 · 14 · 17(base) · 19 · 22 · 32 · 48px

t-h1…t-h6

aplica o visual do heading nativo (clamp fluido) em qualquer tag

fw1…fw9

peso — 100 a 900, de 100 em 100

sw-f1…sw-f6

troca a família da fonte (slot 1 a 6 da paleta de fontes)

t-pri · t-sec · t-suc · t-err · t-ale · t-inf · t-acc · t-mut · t-inv

cor semântica do texto

t-upp · t-low · t-cap · t-ital · t-ct

maiúsculas / minúsculas / capitaliza / itálico / centralizado

lh-1 · lh-sn · lh-bs · lh-lo

entrelinha avulsa — 1 · apertada · padrão · larga

ls-tt · ls-t · ls-n · ls-w · ls-ww

espaçamento entre letras avulso, de bem fechado a bem aberto

twr-b · twr-p

quebra de texto equilibrada (balance) / legível (pretty)

wordb-ba · wordb-bw · truncate

quebra em qualquer ponto / quebra por palavra / corta numa linha com …

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

Nenhuma.

Limitações — o que ele não faz

Nenhuma.

← AnteriorTema e tokens Próximo →Cores semânticas