How to typography css variables: naming conventions reference
- Step 1Tailwind: size-based — --text-xs (12px), --text-sm (14px), --text-base (16px), --text-lg (18px), --text-xl (20px), --text-2xl (24px), --text-3xl (30px), --text-4xl (36px). Designers love it; matches utility-class names.
- Step 2Material Design: role-based — --md-sys-typescale-display-large, --md-sys-typescale-headline-medium, --md-sys-typescale-body-large, --md-sys-typescale-label-small. Highly descriptive; verbose.
- Step 3IBM Carbon: hybrid — $body-01, $heading-01–04, $expressive-headings-01–06. Numbered scales within roles. Compact but requires memorising the numbering.
Frequently asked questions
Which convention should I pick?+
Tailwind if your team uses Tailwind utilities. Material if you ship apps. Custom semantic if you want full control. The worst choice is mixing — pick one and stick with it.
Can I map between conventions?+
Yes — Style Dictionary transforms emit different naming for different platforms. Define tokens in your preferred convention; transforms produce Tailwind-style for web and Material-style for native.
What about case?+
Kebab-case (--font-size-base) for CSS. camelCase (fontSizeBase) for JS. snake_case (font_size_base) for Android XML. Style Dictionary handles all three from a single token source.
Privacy first
Every JAD Font tool runs entirely in your browser using opentype.js and the wawoff2 WASM Brotli encoder. Your fonts never leave your device — verified by zero outbound network requests during processing.