free tools runs in this tab no account, no upload
free tool
Letter spacing
What is -20 tracking from the design file in CSS?
Design tools state tracking in thousandths of an em and CSS wants em or px. The conversion is the one place a headline quietly ends up twenty times too tight.
The quick brown fox jumps over the lazy dog, at the size body text is
actually set.
-0.02em
In em, so it scales with the type rather than against it.
ready to paste
letter-spacing: -0.02em;
- in px at 48px -0.96px
- as a percentage -2%
- over ten characters -9.6px of added width
how to use it
- Type the tracking value from the design file, in thousandths of an em.
- Set the font size the type is actually set at.
- Copy the em value - it survives a font-size change, where the px value does not.
what this page cannot do
The extension reads the tracking a page is really applying, at the size it is really rendering, including the value inherited from three rules up that nobody meant to inherit.
Fonts in the panel What would this page look like in a different typeface?
Add
LoupeKit
- opens the list of browsers it can be installed in
no host permissions · the reading is free