Typography
How we use fonts and the spaces in between.
Our company font is Bely. We use Bely Display for h1 headings and Bely Regular for everything else.
Bely Display should not be used on a small scale as it loses legibility.
Our line spacing is defined in our CSS. We have a generous relationship with white space.
On our website we use genuine responsive typography, using a CSS custom property as a multiplier. This is an adaptation of a method described by Lauri Lännenmäki.
/* Responsive typography */
h1, h2, h3 {line-height:1.2em!important}
:root {
--text-multiplier: 1;
}
@media (max-width: 32rem) {
:root {
--text-multiplier: 0.9;
}
p {line-height:1.4em!important}
h1 {
font-size: calc(2.2em * var(--text-multiplier))!important;
}
}
@media (min-width: 48rem) {
:root {
--text-multiplier: 1.1;
}
h1 {
font-size: calc(2.4em * var(--text-multiplier))!important;
}
}
@media (min-width: 96rem) {
:root {
--text-multiplier: 1.2;
}
h1 {font-size: calc(3em * var(--text-multiplier))!important;}
}
h2 {
font-size: calc(2em * var(--text-multiplier))!important;
}
h3 {
font-size: calc(1.3em * var(--text-multiplier))!important;
}
p {
font-size: calc(1em * var(--text-multiplier))!important;
}
h1, h2, h3, p {line-height:1.6em}