Typography
Composite token translated into readily accessible Tailwind base & components layers.
Font family parameter
Have a look at the token and the generated CSS below.
fontFamily Example
Token
tokens.json
{
"global": {
"h1": {
"value": {
"fontFamily": "Inter"
},
"type": "typography"
}
}
}Generated CSS
base-global.css
@layer base {
h1 {
@apply: font-Inter
}
}| Token | Generated CSS | |
|---|---|---|
fontFamily Example | tokens.json{
"global": {
"h1": {
"value": {
"fontFamily": "Inter"
},
"type": "typography"
}
}
} | base-global.css@layer base {
h1 {
@apply: font-Inter
}
} |
To resolve this, the fontFamily needs to be set and defined.
Set the font variable (for example using Next.js)
Start by adding the CSS variable to your HTML document.
app/layout.tsx
import { Inter } from 'next/font/google' const fontInter = Inter({ subsets: ['latin'], variable: '--font-Inter', }); export default function MyApp({ Component, pageProps }) { return ( <main className={`${fontInter.variable} font-Inter`}> <Component {...pageProps} /> </main> ) }Add the CSS variable
Define the CSS variable in your `tailwind.config.ts` file.
tailwind.config.ts
import { fontFamily } from 'tailwindcss/defaultTheme'; module.exports = { ... theme: { extend: { fontFamily: { Inter: ['var(--font-Inter)', ...fontFamily.sans], ... }, }, }
All parameters
fontSize
Parameter
fontSizeAllowed units
px | % | rem | em
Default unit
px
Allowed values
-Default value
0px
Information
-letterSpacing
Parameter
letterSpacingAllowed units
px | % | rem | em
Default unit
px
Allowed values
-Default value
0px
Information
% will be transform to em
lineHeight
Parameter
lineHeightAllowed units
px | %
Default unit
px
Allowed values
-Default value
0px
Information
-paragraphIndent
Parameter
paragraphIndentAllowed units
px | %
Default unit
px
Allowed values
-Default value
0px
Information
-fontWeight
textCase
textDecoration
paragraphSpacing
Parameter
paragraphSpacingAllowed units
-Default unit
-Allowed values
-Default value
-Information
Ignored
fontFamily
Parameter
fontFamilyAllowed units
-Default unit
-Allowed values
-Default value
sans
Information
Require a manual intervention
- Token name: The token's name determines whether it is categorized as a base or a layer component. Tokens defined with names such as h1 | h2 | h3 | h4 | p | li | a | blockquote | button | th | td | code | small belong to the Tailwind base layer and can be directly applied using the corresponding HTML tag in your template.
- Usage with Media Queries: Some design tokens, such as typography tokens, are not designed to work directly with media queries. For example, when defining typography with varying font sizes based on screen size, it is crucial to maintain distinct tokens. It is recommended to initially create tokens for smaller screens before addressing larger screen configurations.
Example
tokens.json
{
"global": {
"h1": {
"value": {
"fontFamily": "{fontFamilies.Inter}",
"fontWeight": "Bold",
"lineHeight": "48",
"fontSize": "1.875rem",
"letterSpacing": "-0.025em",
"paragraphSpacing": "",
"paragraphIndent": "",
"textCase": "none",
"textDecoration": "none"
},
"type": "typography"
},
"h1-lg": {
"value": {
"fontFamily": "{fontFamilies.Inter}",
"fontWeight": "Bold",
"lineHeight": "72",
"fontSize": "3rem",
"letterSpacing": "-0.025em",
"paragraphSpacing": "",
"paragraphIndent": "",
"textCase": "none",
"textDecoration": "none"
},
"type": "typography"
},
"subtitle": {
"value": {
"fontFamily": "{fontFamilies.Inter}",
"fontSize": "1.125rem",
"lineHeight": "28",
"fontWeight": "400"
},
"type": "typography"
},
"subtitle-lg": {
"value": {
"fontFamily": "{fontFamilies.Inter}",
"fontSize": "1.25rem",
"lineHeight": "30",
"fontWeight": "400"
},
"type": "typography"
}
}
}Usage
page.tsx
<>
<h1 className="lg:h1-lg">
Title
</h1>
<p className="subtitle lg:subtitle-lg">
Description
</p>
</>Render
Title
Description