Typography lexicon for font designers
[ Designing fonts ][ [Coding fontsl ]
© The following datagrid contents are extracted from Google Fonts Knowledge.
| Commun terms | Height ascenders VS descenders | Letter details |
|---|---|---|
 |
 |
 |
| Diacritics (accents) | Apostrophes VS Hyphen VS Quotes | Material Symbols |
|---|---|---|
 |
 |
 |
More Goole Fonts knowledges are available on their website: «
—em dash unit », « dash VS hephem « Latin type anatomy », « Exploring typeface weights », « Punctuation », « Typographic classifications », « Diacritics », « Blurry halation », « Variable fonts ».Also the new Material Symbols that we can adjust with variables are available from « fonts.google.com/icons ».
| Reference | CSS property | English printing terms | French printing terms |
|---|---|---|---|
| A | line-height |
Leading | Interligne |
| B | font-size |
Font size | Corps du charactères |
| C | vertical-align |
Baseline shift | Ligne de base |
| D | letter-spacing |
Tracking Kerning |
Crénage |
margin-bottom |
Buttom gutter | Justification de paragraphe | |
text-align: left/rightflex-direction: flex-start/flex-endjustify-content: flex-start/flex-end
|
Left or Right justified. | Justifié à gauche ou à droite. |
This is a relative length unit that dynamically adapts to the font size. A value in em is relative to the width of the capital letter M in the assigned font family.
While the em size value is based on the last font-size value inherited from its parent, the rem (Relative em) value is relative to the base font size value assigned to the root <body> tag of an HTML document. The latter offers the advantage of not being affected by the laborious cascade of complex stylesheets, thus providing better adherence to original approved mockups.
- Microsoft offers a complete Typography documentation.
- « Typography crash course | graphic design tutorial » by @Daria
Accessibility ⌝
*Universal native OS fonts, supported in ALL 3 major Operating Systems.- Ratings on a score from
0 > 5stars. ☆☆☆☆☆- All listed fonts supports latin punctuations.
French test string:ÀÇçà haÏïtmMon-—l’éÉcoledDeGgarçon {(0>1<9)&(0123456789)})
| Name/Link | Serif | Readybility | Letters | Datasheets | Figma | Comment |
|---|---|---|---|---|---|---|
| Arial* | 🛑 | 5 | 4 | 5 | Common but always great. | |
| Consolas (OS Windows) | 🛑 | 5 | 3 | 5 | Perfect for digits and <code>. |
|
| Fraunces | ✅ | 4 | 5 | 2 | New-York style. Good heading <h*>. |
|
| IBM Plex Sans | 🛑 | 4 | 4 | 4 | ||
| Inter | 🛑 | 5 | 5 | 5 | Gemini: The «Inter» font is one of the most popular and widely used fonts in Google Font's catalog. | |
| JetBrains Mono | 🛑 | 4 | 2 | 5 | Perfect for digits and <code>. |
|
| Josefin Sans | 🛑 | ? | ? | ? | ✅ | Heavy, medium width, elegant, geometric, vintage typeface meant to be used at larger sizes. |
| Lato | 🛑 | ? | ? | ? | ✅ | Medium width, supports 100+ Latin-based languages. |
| Lexend | 🛑 | 5 | 5 | 5 | Proven UX | |
| Lora | ✅ | ? | ? | ? | ✅ | Well balanced, roots in calligraphy. |
| Noto Sans | 🛑 | 4 | 5 | 4 | Great reading. Good for body <p>. |
|
| Outfit | 🛑 | 5 | 5 | 5 | Airy line-height. Rounded shapes. Elegant whit a font-weight: 300 for body <p>. |
|
| Montserrat | 🛑 | ? | ? | ? | ✅ | Heavy, large width. |
| Nunito | 🛑 | ? | ? | ? | ✅ | Rounded, medium width. |
| Open Sans | 🛑 | ? | ? | ? | ✅ | Heavy, medium width. Optimized for print, web, and mobile. |
| Plus Jakarta Sans | 🛑 | 5 | 3 | 5 | Bulky line-height. Rouded shape. | |
| Raleway | 🛑 | ? | ? | ? | ✅ | Elegant, medium width. |
| Roboto | 🛑 | 5 | 5 | 4 | ✅ | ⚠Burned! Used everywhere since MATERIAL librairy exist. |
| Space Mono | 🛑 | 5 | 4 | 5 | Airy rounded shapes. Great for digits and <code>. |
|
| Source Sans | 🛑 | ? | ? | ? | ✅ | Adobes first open source typeface. |
| Trebuchet MS* | 🛑 | 4 | 5 | 3 | Common but always great. | |
| Ubuntu | 🛑 | ? | ? | ? | ✅ | Heavy, large width. |
| Verdana* | 🛑 | 5 | 1 | 5 | Created especially for Spreadsheet column/row readability |
Ready-made Google Fonts type pairing palettes available to use instantly, for free, in Figma: https://www.figma.com/google-fonts/
Wide ⌝
Lexend Exa — Lexend Giga — Montserrat — Verdana
"Courrier New" — Google Sans Code EB Garamond — Libre Baskerville — Patua One — Georgia — "Times New Roman"
Cartoon dialogs (Bandes dessinées) ⌝
Bangers — Bevan — Luckiest Guy — Marhey
Terminals ⌝
Bungee — Coda — Electrolize — Oswald — Quantico
Computer pixels ⌝
Courrier New (css =
"Courrier New") — Google Sans Code Cutive Mono
-
Spring flowers— - Scary Halloween
Snowy Xmast Winter
The following fonts are safe to use across ALL Operation Systems (without loading them) : Android, iOS, Linux, macOS and Windows.
"Andale Mono"—Arial—"Courrier New"—Georgia—Impact—"Times New Roman"—"Trebuchet MS"—Verdana