Alexander Vassbotn Røyne-Helgesen PRO
Lover of life, technologist at heart
Fix your god damned typography!
#hailtothechefbaby
Makers of a sustainable future
👋
Background
The first "normal" paragraph should have 24px under the lead paragraph
- Font-size 18px
- Line-height 28px
- Margin-bottom 24px
.lead{
font-family: "If Sans Bold", Arial, sans-serif;
font-weight: normal;
font-variation-settings: 'wght' 126;
font-size: 18px;
line-height: 28px;
letter-spacing: normal;
margin-bottom: 24px;
}
LGTM!
Or?
~ 20%
// Two figures with speech bubbles
1: Parlez vouz REM?
2: Que?Developers and designers often speak different languages
CSS gives us the illusion that it understands design
.heading{
font-size: 18px;
line-height: 28px;
}It looks pretty easy?
CSS
Design
To the left, what CSS does. To the right is what the designer is expecting to see. CSS centers the text in the line-height. The designer align it to the baseline, the bottom of the line-height.
Developers are left tweaking the CSS until it looks good
1
.paragraph{
margin-bottom: 24px;
}.paragraph{
margin-bottom: 20px; /* match "best" */
}2
.paragraph{
/* but still, depends on font and line-height.. */
margin-bottom: calc(24px * 0.8);
}3
Basekick
Some versions of typography metrics calculators to find the metric (the dimensions and properties)
From left to right: 1. nothing is done 2. with basekick 3. Normalized, with adjusted line-heights based on baseline grid (4px/8px)
From left to right: 1. nothing is done 2. with basekick 3. Normalized, with adjusted line-heights based on baseline grid (4px/8px)
Font Metrics API
4
F*ck it
Thanks for listening!
Alexander Vassbotn Røyne-Helgesen
Principal Engineer, Knowit, Oslo, Norway
BOOSTERCONF 2023 @ Bergen - Fix your god damned typography!
By Alexander Vassbotn Røyne-Helgesen
BOOSTERCONF 2023 @ Bergen - Fix your god damned typography!
This talk will demonstrate the pains a developer have with the designer when the developer implements typography design. Ever wondered why the distance between a title and the text says 30px in the sketch, but it won’t line up with your html and css? Well, this talk will make you understand why, and how to fix this :)
