Typography system

Let’s explore how to organize font and typography-related variables, including font-family, font-size, font-weight, and line-height.

Top-level directory

To keep the variable structure clear and intuitive, and to align with Tailwind CSS configuration structure, please follow these naming rules:

Tailwind CSS V4 naming rules

font/{variable} -> font-family
text/{variable} -> font-size
font-weight/{variable} -> font-weight
leading/{variable} -> line-height
tracking/{variable} -> letter-spacing

For example:

text/sm
font/sans
font-weight/bold

Tailwind CSS V3 naming rules

font-family/{variable} -> font-family
font-size/{variable} -> font-size
font-weight/{variable} -> font-weight
line-height/{variable} -> line-height
letter-spacing/{variable} -> letter-spacing

For example:

font-size/sm
font-family/sans
font-weight/bold

💡

You can choose either of the above naming conventions, and Variables Xporter will be compatible with both. It will automatically adjust to the corresponding Tailwind CSS configuration naming rules based on the exported format. However, in the following documentation, we will use the Tailwind CSS V4 naming convention by default.

Merge processing

You can also choose to combine related properties in the format of text/{variable}/{property}. This approach is particularly suitable for managing text-related variables with fixed style combinations.

For example, Tailwind CSS’s default Font Size utility consists of different levels such as sm, base, lg, etc. Each level includes not only the default font-size property but also the line-height property, for example:

`sm`

text/sm/DEFAULT
text/sm/line-height

`base`

text/base/DEFAULT
text/base/line-height

`lg`

text/lg/DEFAULT
text/lg/line-height

This is an excellent way to create atomic variables for font-size.

In addition to the above atomic variables, there’s a typical example of further abstracting these font properties into variables such as display, heading, body, etc.:

`display`

text/display/DEFAULT
text/display/font-weight
text/display/line-height
text/display/letter-spacing

`heading`

text/heading/DEFAULT
text/heading/font-weight
text/heading/line-height
text/heading/letter-spacing

`body`

text/body/DEFAULT
text/body/font-weight
text/body/line-height
text/body/letter-spacing

With this organization method, Variables Xporter will automatically generate the following Tailwind CSS configuration and corresponding CSS variables:

Tailwind CSS V4


@theme {
--text-display: 1.5rem;
--text-display--line-height: 2rem;
--text-display--letter-spacing: -0.01em;
--text-display--font-weight: 500;
 
--text-heading: 1.25rem;
--text-heading--line-height: 1.75rem;
--text-heading--letter-spacing: -0.01em;
--text-heading--font-weight: 500;
 
--text-body: 1rem;
--text-body--line-height: 1.5rem;
--text-body--letter-spacing: -0.01em;
--text-body--font-weight: 400;
}

Tailwind CSS V3


/** @type {import('tailwindcss').Config} */
module.exports = {
theme: {
  fontSize: {
    'display': ['var(--font-size-display)', {
      lineHeight: 'var(--font-size-display-line-height)',
      letterSpacing: 'var(--font-size-display-letter-spacing)',
      fontWeight: 'var(--font-size-display-font-weight)',
    }],
    'heading': ['var(--font-size-heading)', {
      lineHeight: 'var(--font-size-heading-line-height)',
      letterSpacing: 'var(--font-size-heading-letter-spacing)',
      fontWeight: 'var(--font-size-heading-font-weight)',
    }],
    'body': ['var(--font-size-body)', {
      lineHeight: 'var(--font-size-body-line-height)',
      letterSpacing: 'var(--font-size-body-letter-spacing)',
      fontWeight: 'var(--font-size-body-font-weight)',
    }],
  }
}
}


:root {
  --font-size-display: 1.5rem;
  --font-size-display-line-height: 2rem;
  --font-size-display-letter-spacing: -0.01em;
  --font-size-display-font-weight: 500;
 
  --font-size-heading: 1.25rem;
  --font-size-heading-line-height: 1.75rem;
  --font-size-heading-letter-spacing: -0.01em;
  --font-size-heading-font-weight: 500;
 
  --font-size-body: 1rem;
  --font-size-body-line-height: 1.5rem;
  --font-size-body-letter-spacing: -0.01em;
  --font-size-body-font-weight: 400;
}

CSS Variables


:root {
--text-display: 1.5rem;
--text-display-line-height: 2rem;
--text-display-letter-spacing: -0.01em;
--text-display-font-weight: 500;
 
--text-heading: 1.25rem;
--text-heading-line-height: 1.75rem;
--text-heading-letter-spacing: -0.01em;
--text-heading-font-weight: 500;
 
--text-body: 1rem;
--text-body-line-height: 1.5rem;
--text-body-letter-spacing: -0.01em;
--text-body-font-weight: 400;
}

⚠️

It’s important to note that the merge processing feature only supports four style properties: font-size, font-weight, line-height, and letter-spacing. Additionally, this feature will only take effect when the font-size property is present. This is to maintain consistency with Tailwind CSS’s fontSize configuration feature.