DEV Community

Cover image for Take Control of your Typography with Capsize
Matt Pocock
Matt Pocock

Posted on

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

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.

The Capsize font resizer tool

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;    
}
Enter fullscreen mode Exit fullscreen mode

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

Discussion (0)