Typography
Alignment
Line height and the ascent/descent font metrics add leading above and below text content.
That sometimes interferes with the visual alignment of text, for example with the vertical centering in combination with an icon.
That additional space above the first and below the last line of a block can be trimmed with the text-box property.
It is a shorthand for the text-box-trim and text-box-edge properties.
The former specifies whether to trim the start, end, or both.
The latter specifies where on the different font metrics the trimming should occur.
For example, text-box: trim-both cap alphabetic trims above cap-height and below the alphabetic baseline.
[spec,
caniuse,
chrome-dev,
css-tricks.com,
piccalil.li]
Wrapping & Breaking
The hyphens property specifies how words are hyphenated: not at all, manually, or automatically by the browser.
Automatic hyphenation requires the lang attribute [MDN] to be set.
Manual hyphenation occurs when the soft hyphen character ­ is inserted into the words that should break.
[MDN]
Styling of inline elements that break across multiple lines is sometimes not ideal.
For example, the border-radius is only applied on both the start and the end of an element.
But it is not applied at line breaks by default.
This behaviour can be configured with box-decoration-break.
[MDN]
Widows and Orphans
A widow is a paragraph-ending line that falls at the beginning of the following page or column, thus separated from the rest of the text
.
An orphan is a paragraph-opening line that appears by itself at the bottom of a page or column, thus separated from the rest of the text. [...] Alternately, a word, part of a word, or very short line that appears by itself at the end of a paragraph.
[Wikipedia]
text-wrap: balance may be used to avoid orphans in some cases (for example in headings) [spec].
Fonts
-
The Local Font Access API can be used to enumerate the installed font faces of a user using
queryLocalFonts[chrome-dev]. -
The locally installed font families can be used for fingerprinting [chrome-dev].
System Font Stack
Custom Fonts
FOUT, FOIT
Custom fonts have to be loaded before they can be applied. That leads to an annoying effect where the actual text has already been retrieved by the browser, but the font is still being loaded. Browsers may apply different strategies to handle that situation.
- FOUT ("flash of unstyled text", sometimes FOUC for "content") [paulirish.com] means that the text is being displayed in a fallback font, and as soon as the actual custom font has loaded, it will be applied. This leads to a layout shift during the loading process.
- FOIT ("flash of invisible text") means that the content is hidden until the custom font has loaded. This leads to a layout shift during the loading process. If the loading of the custom font fails, a fallback font family is being used.
Using font-display, it can be configured if and how fallback and custom fonts should be applied to text [MDN].
To reduce the effects of FOUT, it may be an idea to style the websafe/fallback font as similarly as possible to how the custom font will look once it loaded. This works by adapting the various CSS text styles accordingly. There are tools available to simplify that. [meowni.ca, screenspan.net]
It is possible to detect when a custom font has finished loading. When using @font-face, you can use third-party tools for that [bramstein/fontfaceobserver]. But you can also load fonts programmatically with FontFace and then use FontFace.loaded to verify that [MDN].
Variable Fonts
developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
Color Fonts
The OpenType font format supports multicolored glyphs. Of the four different standards OpenType-SVG, COLR, SBIX, and CBDT/CBLC, only COLR is (currently) relevant for the web. COLRv0 only supports solid colors [caniuse]. The newer COLRv1 additionally supports gradients and other graphic operations [caniuse]. [Wikipedia, css-tricks.com, webkit.org]