Skip to content

Instantly share code, notes, and snippets.

@yckart
Last active Aug 29, 2015
Embed
What would you like to do?
The most important notes from http://lamb.cc/typograph/, for me.

Base font size

Most users won’t adjust their browser’s font settings, so the most common default font-size – the one to generally design against – is 16px. For some texts, this size works well, for others, something larger or smaller might be more suitable.

Regardless, the font-size of the <body> should be declared using the % unit of measure, even if the value is 100%. For example, to set the main text, on average, to 12px, use the following expression (keeping in mind that 12px is 75% of 16px)

Base line height

Whenever possible, line-height values should be set as a number, without any units. Applied to the <body> element, this will insure consistency in the proportion of line-height throughout the document, regardless of variations to font-size.

For example, if the <body> line-height is set to 1.25, then the computed line-height will always be 1.25 × the font-size of the element, unless stated otherwise. If the <body> font-size is set to 100%, it will typically have a computed size of 16px, which yields a line-height of 20px (16 × 1.25 = 20). If the font-size is increased to 150% (which, on average, is 24px), then the line-height will automatically adjust to 24 × 1.25 = 30px.

Beyond <body>

Once the font size of the <body> has been established, most other elements can be sized in relation to it, using the em unit of measure. (Some elements may still need to be sized independently from the main text, such as ones designed to shrink-wrap a background image. These should generally be sized in px).

Formulas

During the development process we've to calculate some values from time to time. To reduce the braindamage, here's the most common math for that tasks:

Pixel to em

     (1)            (2)          (3)
(pixel-value / base-font-size) * 1em = em-value

1) Pixel value to convert into em
2) Base font-size
3) The unit value we want to convert in

Example

(320px / 16px) * 1em = 20em

Em to pixel

   (1)           (2)          (3)
(em-value * base-font-size) * 1px = pixel-value

1) Em value to convert into pixel
2) Base font-size
3) The unit value we want to convert in

Example

(20em * 16px) * 1px = 320px

Browser defaults (absolute)

body {
  font-size: 16px;
  line-height: 20px;
}

h1 { font-size: 48px; }
h2 { font-size: 32px; }
h3 { font-size: 28px; }
h4 { font-size: 24px; }
h5 { font-size: 19px; }
h6 { font-size: 11px; }

Browser defaults (relative)

body {
  font-size: 100%;
  line-height: 1.25;
}

h1 { font-size: 2.00em; }
h2 { font-size: 1.50em; }
h3 { font-size: 1.17em; }
h4 { font-size: 1.00em; }
h5 { font-size: 0.83em; }
h6 { font-size: 0.67em; }

More in User Agent Style Sheets:

Credits

Inspired by

Relative Sizing

OpenType

Components

Manual

// Strip units from values
@function strip-unit($num) {
@return $num / ($num * 0 + 1);
}
// Convert pixels to ems
@function px2em($px, $base: 16) {
$base-font-size: $base !default;
@return (strip-unit($px) / strip-unit($base-font-size)) * 1em;
}
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
overflow-y: scroll;
}
body {
margin-right: auto;
margin-left: auto;
padding: 30px;
max-width: 60em;
font-size: 125%;
line-height: 1.5;
font-family: Georgia, Times, serif;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment