5

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]

Improve this question
0

1 Answer 1

Reset to default
7

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

Improve this answer
3
  • 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.
    – Hugo Rodger-Brown
    Commented Mar 10, 2014 at 16:56
  • word-spacing equates to tracking.
    – Scott
    Commented Mar 10, 2014 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
    – Hugo Rodger-Brown
    Commented Mar 10, 2014 at 21:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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