⌘+\

Typefaces for the Web

  1. State of Text Rendering:

Subsetting:

  • What does vertical-align do?

  • ☐ Gothic Fonts

  • ☐ Disable font-synthesis. Force use the fonts/font-weights provided

Guidance on Choosing a Font

Font size

Mono Font Choices

  1. weiweihuanghuang/fragment-mono: Helvetica Monospace Coding Font (github.com)
  2. The JuliaMono Typeface
  3. Commit Mono. Neutral programming typeface.
  4. displaay/Azeret: GF font from Displaay (github.com)
  5. Twilio Sans Mono (⭐)

OpenType

Ligatures

/* Keyword values */
font-variant-ligatures: normal;
font-variant-ligatures: none;
font-variant-ligatures: common-ligatures; /* <common-lig-values> */
font-variant-ligatures: no-common-ligatures; /* <common-lig-values> */
font-variant-ligatures: discretionary-ligatures; /* <discretionary-lig-values> */
font-variant-ligatures: no-discretionary-ligatures; /* <discretionary-lig-values> */
font-variant-ligatures: historical-ligatures; /* <historical-lig-values> */
font-variant-ligatures: no-historical-ligatures; /* <historical-lig-values> */
font-variant-ligatures: contextual; /* <contextual-alt-values> */
font-variant-ligatures: no-contextual; /* <contextual-alt-values> */


/* Global values */
font-variant-ligatures: inherit;
font-variant-ligatures: initial;
font-variant-ligatures: revert;
font-variant-ligatures: revert-layer;
font-variant-ligatures: unset;

Numeric

font-variant-numeric: normal;
font-variant-numeric: ordinal;
font-variant-numeric: slashed-zero;
font-variant-numeric: lining-nums; /* <numeric-figure-values> */
font-variant-numeric: oldstyle-nums; /* <numeric-figure-values> */
font-variant-numeric: proportional-nums; /* <numeric-spacing-values> */
font-variant-numeric: tabular-nums; /* <numeric-spacing-values> */
font-variant-numeric: diagonal-fractions; /* <numeric-fraction-values> */
font-variant-numeric: stacked-fractions; /* <numeric-fraction-values> */
font-variant-numeric: oldstyle-nums stacked-fractions;


/* Global values */
font-variant-numeric: inherit;
font-variant-numeric: initial;
font-variant-numeric: revert;
font-variant-numeric: revert-layer;
font-variant-numeric: unset;

Variable Font

  • font-optical-size
  • font-stretch
  • font-weight
  • font-variation-settings

Font Stretch (Width | wdth)

Absolute keyword valueNumeric value
ultra-condensed50%
extra-condensed62.5%
condensed75%
semi-condensed87.5%
normal100%
semi-expanded112.5%
expanded125%
extra-expanded150%
ultra-expanded200%

Links on Typography | CSS-Tricks

List of topics in the 👆🏼article:

  1. How to pick fonts for UI and App Design
  2. Uniwidth typefaces for interface design (this one’s really good)

Uniwidth typefaces for interface design

  1. On legibility and Readability
  2. Font size is useless, let’s fix it
  3. The sans selection - Huge selection of fonts
  4. Plymouth Press - SVG Fonts/Characters
  5. Why should you self-host your Google Fonts in 2021

Font Performance

[!important] > Best practices for fonts (web.dev) Inlining font declarations and adjusting stylesheets may be a more effective approach.

Aftab’s notes: Inlining critical subset font for headers (for LCP/FCP) and above the fold text might work out. then later on we can use the full(latin + extended + symbols), which maybe won’t need preload.

  • ☐ Need to experiment and see if preload / prefetch / early hints are required for the second set of subset fonts

Subsetting

Terminal window
pyftsubset LiterataTT.ttf
    -unicodes="U+0020-007F, U+00A0-00FF, U+0100-017F, U+2000-206F, U+2070-209F, U+20A0-20CF, U+2100-214F, U+2200-22FF, U+FB00-FB4F"
    -layout-features='*'
    -flavor="woff2"
    -output-file="LiterataTT.woff2"

[!info]

Character(s)Unicode (range)
Basic LatinU+0020-007F
Latin-1 SupplementU+00A0-00FF
Euro signU+20AC
ApostropheU+20BC
HyphenU+2010
En dashU+2013
Em dashU+2014
Left quoteU+2018
Right quoteU+2019
Single low quoteU+201A
Left double quoteU+201C
Right double quoteU+201D
Double low quoteU+201E
BullitU+2022
EllipsisU+2026
Single left pointing angleU+2039
Single right pointing angleU+203A

Tools

Font Fallback

#cls #fallback #fout #foit

Tools

Upcoming Features

Font Caching

  • ☐ max-age??
  • ☐ immutable??
  • ☐ CF only saves it for 24 hours.
  • ☐ Does it get browser-cached, if so, for how long?≤m

Inline Layout | Text Box Adjustments

#trim #vertical-baseline #baseline

[!note] Overrides should ideally be calculated automatically by the browser. But in the meantime, until Safari’s font-size-adjust is implemented in all 3, other tools like fontaine need to be utilized.

Tools

Upcoming features

  • text-box-trim: both
    • `text-box-edge: cap alphabetic
    • Reference: CSS

Checklist

  1. Create a tiny base subset, which has latin, and other things.
  2. Use the font-feature-settings to aggressively remove unnecessary layout features
  3. Use union interchange to create a second, third subset of other features
    1. LATIN + Punctuation + Common Symbols.
    2. LATIN A + LATIN B
    3. LATIN-ext
    4. ()
    5. Symbols
    6. LATIN-ext
    7. Greek, Cyrillic (based on the typeface support)
    8. Everything else