Skip to content

Instantly share code, notes, and snippets.

@softmarshmallow
Created September 4, 2025 22:45
Show Gist options
  • Select an option

  • Save softmarshmallow/5e89a878092af47c750a0a297a814b29 to your computer and use it in GitHub Desktop.

Select an option

Save softmarshmallow/5e89a878092af47c750a0a297a814b29 to your computer and use it in GitHub Desktop.
list of google fonts, with `slnt` axes support
family slnt ital italic
Afacad Flux yes no no
Bitcount yes no no
Bitcount Grid Double yes no no
Bitcount Grid Single yes no no
Bitcount Prop Double yes no no
Bitcount Prop Single yes no no
Bitcount Single yes no no
Cairo yes no no
Cairo Play yes no no
Commissioner yes no no
Geologica yes no no
Gluten yes no no
Recursive yes no no
Roboto Flex yes no no
TikTok Sans yes no no
@softmarshmallow
Copy link
Author

softmarshmallow commented Sep 4, 2025

Google Fonts with slnt/ital Axes

This document analyzes variable fonts in Google Fonts that support slant or italic functionality through variable font axes.

Overview

Variable fonts can implement italic/slant functionality in two ways:

  1. Discrete italic variants - Separate font files for regular and italic styles
  2. Continuous slant axes - Using slnt (slant) or ital (italic) axes for dynamic slanting

Analysis Results

Total fonts with slant/italic axes: 15

All fonts use the slnt (slant) axis - no fonts use the ital axis.

Command

jq -r '.items[] | select(has("axes")) | select(.axes[] | .tag == "slnt" or .tag == "ital") | .family as $family | .axes as $axes | .variants as $variants | ($axes | map(.tag) | contains(["slnt"])) as $has_slnt | ($axes | map(.tag) | contains(["ital"])) as $has_ital | ($variants | contains(["italic"])) as $has_italic_variant | [$family, (if $has_slnt then "yes" else "no" end), (if $has_ital then "yes" else "no" end), (if $has_italic_variant then "yes" else "no" end)] | @csv' webfonts-vf.json

Fonts with Slant/Italic Axes

Family SLNT ITAL Italic Variant
Afacad Flux yes no no
Bitcount yes no no
Bitcount Grid Double yes no no
Bitcount Grid Single yes no no
Bitcount Prop Double yes no no
Bitcount Prop Single yes no no
Bitcount Single yes no no
Cairo yes no no
Cairo Play yes no no
Commissioner yes no no
Geologica yes no no
Gluten yes no no
Recursive yes no no
Roboto Flex yes no no
TikTok Sans yes no no

Key Findings

  • All 15 fonts use the slnt axis for slant control
  • No fonts use the ital axis (binary italic on/off)
  • All fonts have only ["regular"] variants - no separate italic font files
  • Slant ranges vary from -15° to +14° depending on the font
  • Bitcount family has 6 variants, all with the same slant range (-8° to 0°)

Slant Ranges

Font Slant Range
Afacad Flux -14° to 14°
Bitcount family (6 fonts) -8° to 0°
Cairo, Cairo Play -11° to 11°
Commissioner, Geologica -12° to 0°
Gluten -13° to 13°
Recursive -15° to 0°
Roboto Flex -10° to 0°
TikTok Sans -6° to 0°

Design Implications

Fonts with slnt axes provide:

  • Continuous slant control - users can adjust the exact degree of slanting
  • Single font file - more efficient than separate regular/italic files
  • Flexible styling - can create subtle or dramatic slanting effects
  • No separate italic variants needed - slanting is handled dynamically

This approach is particularly useful for:

  • Design systems requiring precise control over text styling
  • Applications where file size optimization is important
  • Creative typography where custom slant angles are desired

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment