Translating Between Typographical Terms and CSS

Baseline
Using a baseline that works across multiple columns/font sizes is a complex exercise in CSS. You will need to use a combination of line-height, font-size and probably padding. It requires a site-wide commitment and can be quite complex if you want a true baseline rather than just a vertical rhythm. More details from Smashing Magazine.
Cap Height
Cap Height cannot be derived or manipulated in CSS. You can calculate the Cap Height of the font you are using with this script.
Moving the descender line independently of the baseline is not supported in CSS. If you must try, here are some ideas for egregious hacks.
Italic is the simple matter of using font-style: italic.
Leading (or line spacing) is complicated. CSS’s line-height property does much the same job. But instead of determining the distance baseline-to-baseline, it determines the distance between two lines below the baseline and even the descender line. You can get a real baseline-to-baseline leading with some margin/padding and some math but it can get messy: this article has more.
Set using the font-size property. More normally specified in pixels, ems, rems or percentages than in the traditional point size. Largely because 1/72nd of an inch doesn’t have much meaning in the various screen sizes that exist.
Serif and Sans Serif/Grotesk fonts are set with the font-family property. To get the system default serif or sans serif font use serif or sans-serif as the property value.
font-vari­ant: small-caps. Note this will produce “fake” small caps if the font you are using does not contain separate small caps information.
You can get a broad control with the letter-spacing property and use your font’s included kerning properties (when present) with the font-kerning property. Note that as of 2018 font-kerning is not supported in Microsoft browsers and requires a vendor prefix in Safari.
The font-weight property accepts the values normal and bold as well as 100-900. The font being rendered must support the chosen value which is very common for normal and bold but less so for the numeric values.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.