Typographie

Titres — Google Sans Flex, Medium

.ice-h1Votre rythme de veille
.ice-h2Votre rythme de veille
.ice-h3Votre rythme de veille
.ice-h4Votre rythme de veille
.ice-h5Votre rythme de veille
.ice-h6Votre rythme de veille
.ice-h7Votre rythme de veille
modificateurs
de graisseRegularMediumSemibold

Corps — Google Sans Flex, Regular

.ice-body-lNous préférons trois vrais signaux à vingt articles, et nous vous laissons décider de ce qui mérite votre lundi.
.ice-body-mNous préférons trois vrais signaux à vingt articles, et nous vous laissons décider de ce qui mérite votre lundi.
.ice-body-sNous préférons trois vrais signaux à vingt articles, et nous vous laissons décider de ce qui mérite votre lundi.
.ice-body-xsNous préférons trois vrais signaux à vingt articles, et nous vous laissons décider de ce qui mérite votre lundi.
modificateurs
de graisseRegularMediumSemibold

Caps — Google Sans Flex, Semibold, capitales

.ice-caps-lSignaux faibles
.ice-caps-mSignaux faibles
.ice-caps-sSignaux faibles
en situationTechnoVuFréquence

Ce que chaque rôle fixe

ClassePoliceGraisseInterligneInterlettrage
.ice-h1 Google Sans Flex 500 1.15 0.02em
.ice-h2 Google Sans Flex 500 1.15 0.02em
.ice-h3 Google Sans Flex 500 1.15 0.02em
.ice-h4 Google Sans Flex 500 1.15 0.02em
.ice-h5 Google Sans Flex 500 1.3 0.01em
.ice-h6 Google Sans Flex 500 1.3 0.01em
.ice-h7 Google Sans Flex 500 1.3 0.01em
.ice-body-l Google Sans Flex 400 1.5 0.01em
.ice-body-m Google Sans Flex 400 1.5 0.01em
.ice-body-s Google Sans Flex 400 1.5 0.01em
.ice-body-xs Google Sans Flex 400 1.5 0.01em
.ice-caps-l Google Sans Flex 600 1.15 0.12em
.ice-caps-m Google Sans Flex 600 1.15 0.12em
.ice-caps-s Google Sans Flex 600 1.15 0.12em

Deux polices, une famille

--font-title: var(--font-sans);   /* titres + caps */
--font-body:  var(--font-sans);   /* texte courant */

Liens

.ice-linkLe tour est mené par Nexus Capital, qui prend un siège au board.
data-variant="subtle"Le tour est mené par Nexus Capital, qui prend un siège au board.
data-variant="stealth"Le tour est mené par Nexus Capital, qui prend un siège au board.
.ice-h2Helios lève 40M avec Nexus, Alpha et Vertex
.ice-h4Helios lève 40M avec Nexus, Alpha et Vertex
.ice-h6Helios lève 40M avec Nexus, Alpha et Vertex
.ice-link--source
avec icône wired.com
VarianteCouleur au reposFilet au reposAu survol
accent · par défaut--fg-link --link-underline --fg-link-hover
filet en currentColor
subtlehéritée--link-underline
stealthhéritéetransparent

En contexte

Votre rythme de veilleFréquenceHebdomadaireNous préférons 3 vrais signaux à 20 articles.Le rituel du lundi. Recommandé.wired.com

Emphase

.ice-emph-highThis is high emphasis color for text. Emphasis text color is unrelated to size (h1, body-S…), to font-weight, to link emphasis… They just determine what should be the color of the text.
.ice-emph-mediumThis is medium emphasis color for text. Emphasis text color is unrelated to size (h1, body-S…), to font-weight, to link emphasis… They just determine what should be the color of the text.
.ice-emph-lowThis is low emphasis color for text. Emphasis text color is unrelated to size (h1, body-S…), to font-weight, to link emphasis… They just determine what should be the color of the text.
.ice-emph-high
icôneHigh emphasis icon color
.ice-emph-medium
icôneMedium emphasis icon color
.ice-emph-low
icôneLow emphasis icon color

Tailles adaptatives

Titres Notebook & smaller < 1400 Laptop 1440 Desktop 1700+ iMac 27″ 2000+
.h1 28 30 33 36
.h2 25 27 29 32
.h3 22 24 26 28
.h4 20 21 23 25
.h5 17 18 20 21
.h6 15 16 17 19
.h7 13 14 15 17
Corps Notebook & smaller < 1400 Laptop 1440 Desktop 1700+ iMac 27″ 2000+
.body-l 15 16 17 19
.body-m 13 14 15 17
.body-s 11 12 13 14
.body-xs 10 11 12 13
Caps Notebook & smaller < 1400 Laptop 1440 Desktop 1700+ iMac 27″ 2000+
.caps-l 13 14 15 17
.caps-m 11 12 13 14
.caps-s 10 = base */ /* --- Space --- */ --space-6: 5 10 11 12