Tutorial

Converting Photoshop Letter Spacing to CSS

Draft updated on Invalid Date
author

Nicholas Cerminara

Converting Photoshop Letter Spacing to CSS

This tutorial is out of date and no longer maintained.

Photoshop to CSS Letter Spacing Converter

Photoshop Letter Tracking:

.letter-spacing { letter-spacing: 0em; }

How it works:

Letter Tracking in Photoshop is the term used for adjusting the space between letters in text. On the web, we simply call that Letter Spacing in CSS. The problem is that Photoshop Letter Tracking doesn’t convert 1:1 to Letter Spacing in CSS.

However, it’s very easy to calculate the conversion from Photoshop to CSS (and vice versa). Here’s the simplest version of the conversion:

Photoshop Letter Tracking CSS Letter Spacing
1000 1em

All you have to do to is divide the Photoshop number by 1000 to get the “em” unit amount for CSS. Alternatively, you can use the simple converter from above if you’re lazy.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the author(s)

Category:
Tutorial
Tags:

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment
Leave a comment...

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Become a contributor for community

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

DigitalOcean Documentation

Full documentation for every DigitalOcean product.

Resources for startups and SMBs

The Wave has everything you need to know about building a business, from raising funding to marketing your product.

Get our newsletter

Stay up to date by signing up for DigitalOcean’s Infrastructure as a Newsletter.

New accounts only. By submitting your email you agree to our Privacy Policy

The developer cloud

Scale up as you grow — whether you're running one virtual machine or ten thousand.

Get started for free

Sign up and get $200 in credit for your first 60 days with DigitalOcean.*

*This promotional offer applies to new accounts only.