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 :)

  • 153