Pixel-perfect webpages from Photoshop can be satisfying until you come across Photoshop’s kerning (aka. letter spacing or letter tracking). The problem — Photoshop doesn’t convert 1:1 to letter spacing in CSS. Here’s how convert Photoshop letter spacing to CSS.
If you use Photoshop for site designs, you’ve probably came across paragraph Kerning or Letter Tracking. Kerning is the process of adding or subtracting space between characters. In CSS it’s called letter-spacing & converting kerning to letter-spacing it a cinch with the tool below.
Photoshop to Letter Spacing CSS Converter
Open the Pen Photoshop to Letter Spacing CSS Converter by Ben Marshall (@bmarshall511) on CodePen.
How the Conversion Works
Designers usually work with points, especially in print media — the problem is websites use different units or measurement (px, em, rem, vw, etc.). Make sure you’re using the correct unit of measurement, otherwise you’ll get unexpected results — usually sizes much larger than intended.
Are you a frontend developer? I’m sure you’ve ran into the troublesome task of getting right font sizes from Photoshop to CSS. Designers usually work with points, which are used in the print, but not common on the web. As frontend developers, we often have the task to translate certain Photoshop values into CSS units — commonly this is done for letter tracking in the Character view.
Convert Photoshop Letter Tracking to em
First up, here’s how you convert Photo’s letter tracking to em values using the formula below:
x / 1000 = y
In the example above, x is Photoshop’s letter tracking value and y is the equivalent em value. For example, if you have a Photoshop letter tracking value of 200, the resulting CSS em letter spacing value will be 0.2em.
Convert Photoshop Letter Tracking to px
You can also convert Photoshop’s letter tracking to pixel values using the formula below:
x * z / 1000 = y
In this example, we’re using z as the font size in px value, x PS letter tracking and y being the pixel letter spacing value. For example, using the same Photoshop letter tracking value of 20, with a font size of 10px, the resulting CSS letter spacing value will be 2px.
Photoshop Unit Conversion Sass Function
Using Sass? Use this handy function to easily convert Photoshop units to em and px values. Just plug in the Photoshop unit ($unit), like letter tracking. You can change the return values from em to px ($return) and set the base font size ($base) in pixels.
@function photoshop-unit-convertsion($unit, $return: 'em', $base: '16') {
@if $return = 'em' {
@return ($unit) / 1000;
} @else {
@return ($unit * $base) / 1000;
}
}
1 comment on “Convert Photoshop Letter Spacing to CSS”.
# Dec 1, 2020
Thanks for this excellent explanation.
I’ve recently discovered, however, that not all fonts are set to 1000 units per em. Many have a higher number of units. 1024 is common, as is 2048. Then some fonts (like Epilogue font, which I just analysed) uses 2000 units per em. In which case we need to change the formula to divide by 2000.
The free application FontForge makes it possible to find the units per em of any font.
Cheers … J
All comments posted on 'Convert Photoshop Letter Spacing to CSS' are held for moderation and only published when on topic and not rude. Get a gold star if you actually read & follow these rules.
You may write comments in Markdown. This is the best way to post any code, inline like `<div>this</div>` or multiline blocks within triple backtick fences (```) with double new lines before and after.
Want to tell me something privately, like pointing out a typo or stuff like that? Contact Me.