Typeguide.css makes well-crafted website typography simple with a solid foundation of font size proportions, line heights, and vertical spacing. It’s easily customizable, responsive, less than 1KB, and guaranteed to impress your friends and your mom too.
- Download the stylesheet – Put the file in your stylesheet folder or copy it into your stylesheet.
- npm:
npm install --save typeguide.css
Most of the typography decisions reflected in this stylesheet are based on Matthew Butterick's book, Practical Typography.
The typography guidelines I focused on were:
- Make sure the line length isn't too long. It should be somewhere between 45 and 90 characters to be a readable length.
- Body text on the web should be between 15 and 20 pixels. This is larger than text sizes in print because we look at screens from further away than books.
- Default heading sizes in HTML are gargantuan. There are better ways to draw attention to them. Headings here are bold and slightly larger than the body text, not double or triple in size.
- Line height should be a comfortable size, not too tall and not too short. Somewhere between 120% and 140% of the text size.
- Paragraphs are separated with spacing (margins) equal to 50-100% of the body text size, not separated with an extra return.
The basic html elements have all been covered: headings, paragraphs, ordered lists, unordered lists, blockquotes and horizontal rules.