Typography

Set your typography rules in the 'custom-style/_typography.scss' file.

🔍 On this page:

1. Font family
2. Type scale
3. How to change the typography unit
4. .text-component
5. Custom unordered/ordered list
6. Code snippets
7. Line-height crop
8. Typography visual editor
9. Utility classes

Font family #

Set the main font-family by updating the value of the --font-family custom property. Optionally, you can create other custom properties to add more font-families:

:root {
    // font family
    --font-primary: Inter, Helvetica, sans-serif;
    --font-secondary: Georgia, serif;
}

You can use the variables on a component level:

.component__title {
  font-family: var(--font-secondary);
}

If you use the typography editor, it will automatically generate utility classes for the additional font families:

<h1 class="font-secondary">Title</h1>  

Type scale #

The type scale is a modular scale of font sizes stored in CSS variables:

:root {
  // font size
  --text-base-size: 1rem; // body font-size
  --text-scale-ratio: 1.2; // multiplier used to generate the scale values 👇
}

:root, * {
  // type scale
  --text-xs: calc((var(--text-unit) / var(--text-scale-ratio)) / var(--text-scale-ratio));
  --text-sm: calc(var(--text-xs) * var(--text-scale-ratio));
  --text-md: calc(var(--text-sm) * var(--text-scale-ratio) * var(--text-scale-ratio));
  --text-lg: calc(var(--text-md) * var(--text-scale-ratio));
  --text-xl: calc(var(--text-lg) * var(--text-scale-ratio));
  --text-xxl: calc(var(--text-xl) * var(--text-scale-ratio));
  --text-xxxl: calc(var(--text-xxl) * var(--text-scale-ratio));
  --text-xxxxl: calc(var(--text-xxxl) * var(--text-scale-ratio));
}

The --text-base-size and the --text-scale-ratio control the type scale. The first one is the body font size, while the second one is the multiplier used to generate the scale.

By updating the --text-base-size and --text-scale-ratio values at a specific breakpoint, you set a (global) responsive rule that affects all the text elements.

@supports(--css: variables) {
  @include breakpoint(md) {
    :root {
      --text-base-size: 1.25rem;
      --text-scale-ratio: 1.25;
    }
  }
}

Use the type scale variables to set the font-size of your text elements.

You can either use the custom properties in CSS:

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

or use one of the font-size utility classes:

<h1 class="text-xxxl">Title</h1>

Optionally, you can set off-scale values in CSS:

.title {
  // size no longer affected by the --text-scale-ratio
  font-size: 3rem;

  // use base size to create new value - off scale
  font-size: calc(var(--text-base-size) * 3);

  // use original font-size to create new value - off scale
  font-size: calc(var(--text-xxl) - 0.8rem);

  // update the value of the font-size using a different variable
  font-size: var(--text-xl);
}

Change typography unit #

By default, CodyFrame's typography system uses Rem units.

If you prefer to use Em units, make the following changes in the 'custom-style/_typography.scss' file:

:root {
  --text-base-size: 1em; // 👈 [1/3]
  --text-unit: 1em; // 👈 [2/3]
}

@supports(--css: variables) {
  @include breakpoint(md) {
    :root {
      --text-base-size: 1.25em; // 👈 [3/3]
    }
  }
}

To use pixels:

:root {
  --text-base-size: 16px; // 👈 [1/3]
  --text-unit: var(--text-base-size); // 👈 [2/3]
}

@supports(--css: variables) {
  @include breakpoint(md) {
    :root {
      --text-base-size: 20px; // 👈 [3/3]
    }
  }
}

Optionally, you can modify the typography unit on a component level using the textUnit mixin: 

.component {
  @include textUnit(1em);
}

// starting from CodyFrame v2.8.0, the textUnit mixin is equivalent to 👇
.component {
  --text-unit: 1em;
  font-size: var(--text-unit);
}

or one of CodyFrame's typography-unit utility classes:

There are cases where switching unit can be extremely useful.

For example, you have a component with tons of text elements and you want to reduce the font size of all of them at once. With Em units, modifying the parent's font size will affect all its children. 

Here's how you do it:

<!-- 👇 switch to Em units + reduce text-size of all children proportionally using .text-sm  -->
<div class="text-unit-em text-sm">
  <h1 class="text-md">Title</h1>
  <p class="text-sm">Lorem ipsum dolor sit.</p>
  <!-- ... -->
</div>

.text-component #

The .text-component is a class to be applied to any block containing typography elements. It takes care of 1) vertical rhythm and 2) styling inline elements. A good example of how to use this class is our Article component.

Vertical Spacing #

To control the vertical spacing of a text-component, you can edit the following CSS variables:

Example:

Alternatively, you can use one of the line-height and vertical spacing utility classes.

.text-component__block #

The .text-component__block class can be added to any block element within a text-component. It's used to automatically set vertical spacing and, optionally, to outset content or create grids containing images.

⚠️ Note: when used within the .text-component, the following elements already have vertical spacing applied and don't require the .text-component__block class: <h1>, <h2>, <h3>, <h4>, <ul>, <ol>, <p>, <blockquote>, <hr>. A good example of how to use this class is the Article component.

Custom unordered/ordered list #

To include customizable unordered/ordered lists in your text components, import the List component.

Code snippets #

To stylize code blocks within the text component, import the Code Snippet component.

The Code Snippet component applies a very basic style to make your code blocks presentable; it doesn't include syntax highlighting. If you're looking for more advanced code snippet plugins, check Prism and highlight.js.

Line-height crop #

To remove the top space on a text element caused by its line-height, you can use the lhCrop mixin.

Typography editor #

The Typography Editor is a visual tool that helps you set the typography of your web project. Use it for font pairing, to generate the type scale, and set responsive rules. Paste the generated code into the 'custom-style/_typography.scss' file of CodyFrame.

Set the basic typography rules:

How to create and edit the typography scale:

How to use the Line-height Crop tool:

Utility Classes #

For a full list of typography utility classes, refer to the Utilities page.