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 font-size scale to ensure size consistency across all typography elements:

:root {
  --text-xs: 0.6875rem;
  --text-sm: 0.8125rem;
  --text-base: 1rem;
  --text-md: 1.1875rem;
  --text-lg: 1.4375rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.0625rem;
  --text-3xl: 2.5rem;
  --text-4xl: 3rem;
}

/* ↓ the font-size variables are updated from 64rem */
@media (min-width: 64rem) {
  :root {
    --text-xs: 0.75rem;
    --text-sm: 0.9375rem;
    --text-base: 1.125rem;
    --text-md: 1.375rem;
    --text-lg: 1.625rem;
    --text-xl: 2rem;
    --text-2xl: 2.5rem;
    --text-3xl: 3rem;
    --text-4xl: 3.625rem;
  }
}

In CSS, you should use a font-size variable anytime 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>

To customize the font-size scale, pass the $font-size map to the config module in your style.scss file:

@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'
  )
);

The above map will automatically update the font-size CSS variables.

Optionally, you can edit the font-size variables at a specific breakpoint:

// @all → from min-width: 0
// @md → from breakpoint: md
@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'
    )
  )
);