CSS about font

Collections

• The relative font weight axis — how variable fonts ease font weight transitions
• Variable Fonts
• Introducing four new international features in CSS
  • From Chrome 119: Japanese phrase line breaking with word-break: auto-phrase.
  • Behind a flag from Chrome 120: Inter-script spacing with the text-autospace property.
  • Under development: Chinese, Japanese, and Korean (CJK) punctuation kerning with the text-spacing-trim property.
• Generally speaking, you’ll want to use text-wrap: balance for headings and text-wrap: pretty for body text.
• When to use CSS text-wrap: balance; vs text-wrap: pretty;

  Use text-wrap: balance; on headings and subheadings. And use text-wrap: pretty; on paragraphs of text to get rid of orphans on the last line. Despite the Chromium-only support, these would be a good candidate for progressive enhancement.

• Cap Unit

Preventing layout shift with numbers using CSS

An example

<button data-count="down">Decrease</button>

<span class="count" aria-live="polite">
	0/5
</div>

<button data-count="up">Increase</button>

The font-variant-numeric: tabular-nums property

.count {
  font-variant-numeric: tabular-nums;
}

---

Children

1. Better font loading with the font-display:swap property
2. How to avoid layout shifts caused by web fonts
3. Making Google Fonts Faster in 2022