Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

I am trying to determine the how much line spacing to set for the amount of kern used in photoshop. I can eye-ball the spacing but does anyone know the exact ratio between the two. ex. Set text kern to 50 in photoshop = 1 em line-spacing.

Thanks!

share|improve this question
    
Kerning is the space between letters. Line spacing is the space between lines. I'm confused as to what you are asking. –  DA01 Apr 20 '12 at 19:00
    
Are you referring to leading rather than kerning or talking about the ratio between leading and kerning? There isn't a universal ratio for the latter. –  Lèse majesté Apr 24 '12 at 22:12
add comment

3 Answers 3

It's a bit confusing as to what you are asking, as kerning and line spacing are two different things.

However, I think what you are asking is how to set type in PhotoShop so it matches what you have set in your browser via CSS.

The answer to that is: you can't.

PhotoShop is a fixed canvas meaning you have full control over everything...the font, the size, the way it's being smoothed--every pixel in the file is under your control.

In a browser, none of it is under your absolute control. There are simply too many variables that you have no control over: the particular browser, the operating system, the end-user's preferences, the fonts installed, the type of font rendering being used, the default font sizes, the end user's changing font sizes in the browser, the type of device being used, etc, etc.

So, bottom line, don't ever expect type set in PhotoShop to be a pixel-for-pixel facsimile of what you will eventually see in the actual web browser.

share|improve this answer
add comment

I usually like to set the line-height in CSS with em values to make sure that no matter how big the text is, it will be consistent. Takes the pain away from having to calculate pixels for each typeface since different fonts will have different heights. This gets tricky when calculating heading sizes.

That said, as we move towards emulating print within web, and we try to maintain quality rythms through out a properties typefaces, it is important to create base fonts sizes and the make adjustments accordingly.

Here is an interesting tool that computes the vertical rhythm for you based on the webfont you are using. Would be cool for typekit & google fonts to incorporate that in their toolset.

In reference to that, here is a Typographical Grid that you can use to calculate that in the same method with you own font library or one from an API like typekit.

share|improve this answer
add comment

Photoshop tracking

... kerning and tracking values in Photoshop are based on 1/1000 em (one em in a 24-point font is 24 points wide; in a 50-point font, it’s 50 points wide, and so on).

Working with text in Photoshop

CSS letter-space (tracking)

Letter spacing in CSS can use lots of different kinds of units. If you'd like to use ems, you can. So, letter-space: 1em should equal tracking of 1000 in Photoshop.

The top example is Photoshop with 1000 tracking, the bottom is CSS with 1em letter spacing (WebKit in Safari). Text is 14point/px Helvetica for both.

enter image description here

Photoshop leading

Leading in Photoshop is an exact value — if you have your type units set to points, you could set the leading on some text to 18pt, if you wanted. That's an absolute value.

CSS line-height (leading)

Line-spacing in CSS can be an absolute value, or it can be a percentage (the percentage is derived from the font size). So, if you wanted to match Photoshop's 18pt, you could sent your CSS value to 18px. Or, if you had 14px text, you could use line-height: 128%, which works out to be the same.

More info on CSS line-height: CSS line-height Property

Disclaimer

We're comparing different text rendering engines, so the results will vary. Each browser and OS can be wildly different, as can Photoshop. Don't expect to see the exact same thing, but the basic measurements and values can translate if you know the way they all work.

Please also note that points and pixels are interchangeable in Photoshop, providing the document is set to 72PPI (which is what you should be using for screen design).

share|improve this answer
    
The PPI setting is irrelevant for screen design, but yes, at 72ppi you match the 'standard' 72 points per inch. –  DA01 Apr 24 '12 at 16:05
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.