Typography & rhythm
Headings and blockquotes are set in the lovely Sentinel typeface from Hoefler & Co. Body text is
set in the eminently crisp Ideal Sans. Type for the primary content follows a perfect fifth modular
scale within a similarly scaled baseline grid. That’s fancy talk to say that the base
font-size is 16 pixels, with a default
line-height of 24 pixels (or 1.5).
Larger type elements scale up by a factor of 1.5. So the next heading above that is 24 pixels. The
baseline remains consistent so the line-height of the element is exactly 1. The next element up is
36 pixels. The next is 54, and then 81. You can see it in action down below. I like
baselines and modular scales because they establish a nice visual rhythm that is more intentional
and feels easier on the eye.
H2 Heading: Use once for the title of the page.
H3 Heading: The primary subheading within bodies of content.
H4 Heading: The secondary subheading within bodies of content.
H5 Heading: Use for headings within a list of content.
H6 Heading: Use for subheadings within a list of content.
Paragraphs are long-ish bodies of text that define the majority of written content. Try to keep paragraphs to no more than 5 sentences. A paragraph should focus on a single concept. It shouldn't overstay its welcome.
Some paragraphs may have different text styles, like bold concepts.
Other sections of text may need a different style of emphasis. Because
this is the web, there will be plenty of links.
Sometimes, paragraphs may even contain a little bit of
- This is an unordered list.
- Lists contain similar, delineated content.
- Use unordered lists when the order of content doesn't matter.
- Think ingredients or packing lists
- Use ordered lists for sequential information.
- Each item in the list should build on the previous.
- Much better than this list.
- Definition list
- A list of terms and their definitions. Or any list with key/value pairings.
Blockquotes are pretty awesome. They let you quote other people or yourself.Ste Grainer
Here's another paragraph to check the baseline.
For now, I’m using an icon font. I know there are some tradeoffs, but I like how easily the icons can be recolored, resized, and reused as a font instead of SVG. Eventually, I’d love to convert these over to SVG sprite sheets.
To create a section of gridded content, first create a
a class of
row. Then add divs within with a class of
columns and a corresponding number (as represented below). There are
twelve segments to the grid so the columns should add up to twelve.
You can also use
offset-two to leave blank space to the left
of a column. Or you can use
to swap the order columns. (Useful if you want content to appear to the left on desktop and
below on mobile).
You can also have separate grid classes for different resolutions by adding
lg- in front of the sizes, offsets, and push/pull classes.
The smallest grid has 4 columns, and the medium and large grids both still have 12.