Тема: typography
-
Загрузка веб-шрифтов: font-display, preload, подмножества unicode-range и запасные шрифты с подобранными метриками
Показывайте текст при первой отрисовке и загружайте фирменный шрифт без скачков макета: делите начертания на подмножества через unicode-range, чтобы загружались только используемые письменности, выбирайте font-display по роли — optional для основного текста, swap для заголовков, — предзагружайте первые файлы с crossorigin и задавайте запасное начертание с size-adjust и переопределением ascent/descent, чтобы переносы строк совпадали до и после замены.
-
Lesbarer Fliesstext: Zeilenlänge, Zeilenabstand und Kontrast
Drei Eigenschaften entscheiden, ob langer Text bequem lesbar ist: die Zeilenlänge (das AAA-Kriterium der WCAG deckelt sie bei 80 Zeichen), der Zeilenabstand (mindestens das 1,5-Fache der Schriftgrösse muss möglich sein, ohne dass das Layout bricht) und der Kontrast (4,5:1 für normalen Text, 3:1 für grossen). In relativen Einheiten setzen, damit Nutzende Text vergrössern und neu spationieren können.
-
Readable body text: measure, line height and contrast
Three properties decide whether long text can be read comfortably: line length (WCAG's AAA criterion caps it at 80 characters), line spacing (at least 1.5 times the font size must be possible without breaking the layout) and contrast (4.5:1 for normal text, 3:1 for large text). Set them in relative units so users can resize and re-space the text.
Машиночитаемо: JSON