Take Control of your Typography with Capsize

The Problem

Pixel-perfecting a design can be tough, especially when the font you're using won't play nice.

Fonts can be opinionated. They can house margins and line heights you didn't expect. And they often behave differently in a design tool to the browser.

Have you ever coded a screen using one font, then switched out the font for another? Prepare for a painful hour or two adjusting all the margins and line heights so they fit the design again.

The Solution

Mark Dalgleish

@markdalgleish

🔥 Capsize is a *massive* leap forward for web typography.

✂️ It uses font metadata to crop space from text nodes above capital letters and below the baseline.

🔍 It adjusts font-size so that the height of capital letters is a multiple of your grid.

👉 seek-oss.github.io/capsize

05:59 AM - 10 Jul 2020

Capsize is a new tool from Seek (makers of Playroom and Braid) which helps fonts behave predictably.

It helps you adjust line spacing and font size exactly to the pixel, so you can match your design ideas one-to-one.

It removes implicit line heights from fonts with some smart CSS:

.capsizedText {
  font-size: 67.51648351648352px;
  line-height: 76px;
  padding: 0.05px 0;
}

.capsizedText::before { 
  content: "";  
  margin-top: -0.19442545572916664em;   
  display: block;   
  height: 0;    
}

.capsizedText::after {  
  content: "";  
  margin-bottom: -0.22176920572916664em;    
  display: block;   
  height: 0;    
}

Check out Capsize here! What do you think? Have you tried it yet? What were your experiences?