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 have been given a design / style guide for a website that has the fonts expressed in point (pt) measurements, and additional leading and kerning adjustments - e.g. 40pt font, 60pt leading, -30pt kerning.

I would like to use em, rather than pt or px in the CSS, and am assuming (using reset) a base font size of 16px. The core font size conversation I can do, but I don't know what to do with the leading and kerning?

(PS I do know that this means the font will render differently on different devices / browsers, I just need somewhere to start.)

[UPDATE: I have created a google doc with the conversion of pt to px / em]

share|improve this question
add comment

1 Answer

up vote 2 down vote accepted

Kerning equates to .class { letter-spacing: Xem; }

Leading equates to .class { line-height: Xem; }

use the exact same conversion you are using for the font size to get the correct em values. 1pt = 1px

share|improve this answer
    
Coming back to this v. late in the day - (and post a typography course) - kerning specifically relates to pairs of letters (e.g. AW, AY, etc.), and is distinct from 'tracking', which relates to the spacing between letters in general. The CSS style 'letter-spacing' refers to 'tracking', and not 'kerning', which is not directly manageable in CSS. There are JS libraries to help with this, and a not-very-well-supported CSS style {text-rendering: optimizeLegibility;} which lets the browser optimise itself. –  Hugo Rodger-Brown Mar 10 at 16:56
    
word-spacing equates to tracking. –  Scott Mar 10 at 19:47
    
Tracking[1] is the space between characters, not words. According to the formal definition of word and letter spacing[2], which makes letter-spacing the equivalent to tracking. [1] adobe.com/uk/type/topics/glossary.html#tracking [2] w3.org/TR/CSS2/text.html#spacing-props –  Hugo Rodger-Brown Mar 10 at 21:33
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.