css • Typography and fonts - martindubenet/wed-dev-design GitHub Wiki
body {
font: font-style font-variant font-weight font-size/line-height font-family;
font: italic small-caps normal 13px/150% Arial, sans-serif;
}
| 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. |
The value of em is relative to the width of the uppercase M character.
While the em size value is based on the latest defined font-size value inherited from his parent while the rem (Relative em) is relative to the base font-size value assigned to the <body> of an HTML document.
*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 | Readybility | Letters | Spreadsheets | Comment |
|---|---|---|---|---|
| Arial* | 5 | 4 | 5 | Common but always great. |
| Consolas (OS Windows) | 5 | 3 | 5 | Perfect for digits |
| https://fonts.google.com/specimen/IBM+Plex+Sans | 4 | 4 | 4 | |
| https://fonts.google.com/specimen/Lexend | 5 | 5 | 5 | Proven UX |
| https://fonts.google.com/specimen/Roboto | 5 | 5 | 4 | Burned. Used everywhere since MATERIAL librairy exist. |
| Trebuchet MS* | 4 | 5 | 3 | Common but always great. |
| Verdana* | 5 | 1 | 5 | Created especially for Spreadsheet column/row readability |