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]


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

  • 2
    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. Mar 10 '14 at 16:56
  • word-spacing equates to tracking.
    – Scott
    Mar 10 '14 at 19:47
  • 1
    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 Mar 10 '14 at 21:33

This site is temporarily in read only mode and not accepting new answers.

Not the answer you're looking for? Browse other questions tagged .