Tipografia
Un tipus de lletra, un grapat de pesos i una escala basada en rols que baixa un graó a les pantalles més petites. Cada mida de sota és una variable de CSS llegida del full d'estils.
Tipus de lletra
La interfície està composta amb Inter, allotjada de forma pròpia en comptes de carregar-se des d'un servei de fonts perquè el primer pintat no esperi mai una petició de tercers. No hi ha cap tipus de lletra decoratiu ni de títol: el pes i la mida porten la jerarquia. Els títols van a 800, els subtítols i les etiquetes a 700, els botons i l'èmfasi a 600, i el text del cos a 400.
La pila completa recorre a la sans-serif del sistema si Inter no s'ha carregat, de manera que el text sempre és llegible.
L'escala
Les mides són rols, no casos únics. La mateixa variable governa cada títol de pàgina, cada capçalera de secció, etcètera. Les tres columnes són el valor d'escriptori i les dues reduccions, aplicades als punts de ruptura de tauleta i mòbil de la pàgina de Disposició.
| Token | Escriptori | Tauleta | Mòbil | Rol |
|---|---|---|---|---|
--fs-h1 | 34px | 32px | 30px | Títol de pàgina, amb la barra verda. |
--bar-h1 | 52px | 48px | 44px | Amplada de la barra verda sota el títol. |
--fs-h2 | 26px | 20px | 18px | Capçaleres de secció. |
--fs-h3 | 20px | 18px | 17px | Subtítols i avanttítols de detall. |
--fs-h4 | 18px | 16px | 14px | Etiquetes menors a pàgines amb múltiples rols. |
--fs-body | 17px | 15px | 14px | Text llarg fora dels articles. |
--lh-body | 1.6 | 1.6 | 1.7 | Alçada de línia del text del cos. |
--fs-prose | 17px | 16px | 16.5px | Mida de lectura d'article. |
--fs-prose-h2 | 24px | 21px | 21px | Capçaleres de secció d'article. |
Mostres
Renderitzades a les seves mides reals. Estreny la finestra i baixaran un graó exactament com ho fa el lloc.
El títol de la pàgina
--fs-h1 34px · 32px · 30px 800 Títol de pàgina. Porta la barra verda a sota.
Una capçalera de secció
--fs-h2 26px · 20px · 18px 700 Capçalera de secció.
Una capçalera de secció d'article
--fs-prose-h2 24px · 21px · 21px 700 Capçalera de secció d'article, amb el subratllat verd.
Un subtítol de detall
--fs-h3 20px · 18px · 17px 700 Subtítol de detall i avanttítol.
Una etiqueta menor
--fs-h4 18px · 16px · 14px 700 Etiqueta menor, pàgines amb múltiples rols.
El text del cos marca el ritme de lectura fora dels articles: prou llarg per respirar, prou curt per fer-hi un cop d'ull. És la mida a què es llegeixen la majoria de paraules del lloc.
--fs-body 17px · 15px · 14px 400 Text llarg fora dels articles.
Mida de lectura d'article, una mica més gran i airejada, pensada per a una estona llarga amb una sola columna de text.
--fs-prose 17px · 16px · 16.5px 400 Mida de lectura d'article.
Tractaments de capçalera
Dues marques verdes, dues funcions. Els títols de pàgina i de secció porten una barra verda curta sota les primeres paraules: un accent d'amplada fixa que no s'estira amb el text. Les capçaleres d'article porten en canvi un subratllat complet que recorre tota l'amplada de les paraules. Si la marca abasta el text, ets dins d'un article; si és una barra curta, ets davant d'un títol de pàgina o de secció.
Monoespai
Una pila monoespaiada marca tot el que és compost per màquina: línies de metadades i dates, etiquetes i distintius, capçaleres de taula, codi i els petits avanttítols en majúscules. Assenyala «això són dades, no prosa». La pila és SF Mono, Fira Code, Cascadia Code i, després, la monoespaiada del sistema.
En ús
On apareix cada rol:
Un matís acompanya el rol de cos: a la portada, el primer paràgraf del text de presentació puja a color primari i pes mitjà, un tractament d’entradeta discret.
- Títol de pàgina. L'h1 de cada pàgina de primer nivell, amb la barra verda.
- Capçalera de secció. Capçaleres de banda, amb el subratllat verd curt.
- Capçalera d'article. L'h2 dins d'una entrada de blog, amb el subratllat verd. Només l'h2 d'article; els subtítols baixen a un pes normal.
- Cos. Text de presentació, introduccions de pàgina, text de targetes.
- Prosa. La columna de lectura d'un article.
- Metadades. Dates, temps de lectura, etiquetes. Monoespaiada.