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