Typography

• Base style
• Text component
• Font family
• Type scale

CodyFrame provides a convenient way to define font sizes, font families, line heights, and other properties for your text elements.

Base style #

The typography.scss file is a template you can use to set the basic style for your typography elements. It sets a default font-size for the heading elements and other general rules.

If you're not using SASS, use the typography.css file.

Text component #

The .text-component class can be applied to any block containing typography elements. It creates vertical rhythm and style defaults. The class is defined in the typography.scss file.

The .text-component has two variations (--tight and --relaxed) that modify the vertical space and line height: 

<article class="text-component text-component--tight">
  <!-- 1. reduce vertical spacing and line-height -->
</article>

<article class="text-component">
  <!-- 2. default vertical spacing and line-height -->
</article>

<article class="text-component text-component--relaxed">
  <!-- 3. increase vertical spacing and line-height -->
</article>

You can create more variations in the typography.scss file by adjusting three CSS variables:

/* custom spacing variation */
.text-component--loose {
  --heading-line-height: 1.3; /* ← heading line-height */
  --body-line-height: 1.85; /* ← body line-height */
  --spacing: 2rem; /* ← gap between block elements */
}

Here's the text component demo:

Font family #

You can set the project font families by passing the $font-family map to the config module in your style.scss file:

@use 'config' as * with (
  $font-family: (
    'primary': 'system-ui, sans-serif',
    'secondary': 'serif'
  )
);

The above map will generate a list of CSS variables:

:root {
  --font-primary: system-ui, sans-serif;
  --font-secondary: serif;
}

You can then apply the font-family in CSS...

.title {
  font-family: var(--font-primary);
}

...or use the font-family utility classes:

<h1 class="font-primary">Hello</h1>

Type scale #

CodyFrame has a default, fluid font-size scale to ensure size consistency across all typography elements:

:root {
  /* --text-{size}: clamp({min-value}, {dynamic-value}, {max-value}); */
  --text-xs: clamp(0.6875rem, calc(0.59375rem + 0.1953125vw), 0.75rem); 
  /* 11px → 12px */
  --text-sm: clamp(0.8125rem, calc(0.625rem + 0.390625vw), 0.9375rem); 
  /* 13px → 15px */
  --text-base: clamp(1rem, calc(0.8125rem + 0.390625vw), 1.125rem);
  /* 16px → 18px */
  --text-md: clamp(1.1875rem, calc(0.90625rem + 0.5859375vw), 1.375rem);
  /* 19px → 22px */
  --text-lg: clamp(1.4375rem, calc(1.15625rem + 0.5859375vw), 1.625rem);
  /* 23px → 26px */
  --text-xl: clamp(1.75rem, calc(1.375rem + 0.78125vw), 2rem);
  /* 28px → 32px */
  --text-2xl: clamp(2.0625rem, calc(1.40625rem + 1.3671875vw), 2.5rem);
  /* 33px → 40px */
  --text-3xl: clamp(2.5rem, calc(1.75rem + 1.5625vw), 3rem);
  /* 40px → 48px */
  --text-4xl: clamp(3rem, calc(2.0625rem + 1.953125vw), 3.625rem);
  /* 48px → 58px */
}

The clamp function is used to set a minimum size, a preferred size that automatically changes with the viewport width, and a maximum size.

Don't worry about the calculations! To customize the font-size scale, all you need to do is passing a $font-size map to the config module in your style.scss file, and CodyFrame will automatically assign the correct values to the CSS variables:

// option 1: create a static font-size scale
@use 'config' as * with (
  $font-size: (
    'xs': '0.6875rem',
    'sm': '0.8125rem',
    'base': '1rem',
    'md': '1.1875rem',
    'lg': '1.4375rem',
    'xl': '1.75rem',
    '2xl': '2.0625rem',
    '3xl': '2.5rem',
    '4xl': '3rem'
  )
);

// option 2: edit the font-size variables at a specific breakpoint
// @all → initial font-size scale
// @md → update the scale at the medium breakpoint
@use 'config' as * with (
  $font-size: (
    '@all': (
      'xs': '0.6875rem',
      'sm': '0.8125rem',
      'base': '1rem',
      'md': '1.1875rem',
      'lg': '1.4375rem',
      'xl': '1.75rem',
      '2xl': '2.0625rem',
      '3xl': '2.5rem',
      '4xl': '3rem'
    ),
    '@md': (
      'xs': '0.75rem',
      'sm': '0.9375rem',
      'base': '1.125rem',
      'md': '1.375rem',
      'lg': '1.625rem',
      'xl': '2rem',
      '2xl': '2.5rem',
      '3xl': '3rem',
      '4xl': '3.625rem'
    )
  )
);

// option 3: create a fluid typography scale
// @sm → minimum scale values
// between @sm and @lg → the scale values are automatically updated
// @lg → maximum scale values
// important: use the same unit for font-size and breakpoints
@use 'config' as * with (
  $font-size: (
    'fluid': (
      '@sm': (
        'xs': '0.6875rem',
        'sm': '0.8125rem',
        'base': '1rem',
        'md': '1.1875rem',
        'lg': '1.4375rem',
        'xl': '1.75rem',
        '2xl': '2.0625rem',
        '3xl': '2.5rem',
        '4xl': '3rem'
      ),
      '@lg': (
        'xs': '0.75rem',
        'sm': '0.9375rem',
        'base': '1.125rem',
        'md': '1.375rem',
        'lg': '1.625rem',
        'xl': '2rem',
        '2xl': '2.5rem',
        '3xl': '3rem',
        '4xl': '3.625rem'
      )
    )
  )
);

Here's a preview of the font-size default values:

After setting the scale, you should use a font-size variable in CSS whenever you set the text size:

.title {
  font-size: var(--text-3xl);
}

Alternatively, you can use the font-size utility classes:

<h1 class="text-3xl">Hello</h1>