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 <code>.

  • 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
  1. Use ordered lists for sequential information.
  2. Each item in the list should build on the previous.
  3. 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.

Colors

  • #425a87 rgb(66,90,135)
  • #c6474f rgb(198,71,79)
  • #ebb617 rgb(235,182,23)
  • #373533 rgb(55,53,51)
  • #635f5c rgb(99,95,92)
  • #89837f rgb(137,131,127)
  • #b4aca6 rgb(180,172,166)
  • #dcd4ce rgb(220,212,206)

Iconography

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.

Sections

  • ste-folio
  • ste-writing
  • ste-contact
  • ste-about
  • ste-links
  • ste-shop

Navigation

  • ste-angle-left
  • ste-angle-right
  • ste-angle-down
  • ste-caret-down
  • ste-close

Social media

  • ste-social
  • ste-twitter
  • ste-facebook
  • ste-bookmarks
  • ste-flickr
  • ste-dribbble
  • ste-github
  • ste-medium
  • ste-linkedin
  • ste-etsy
  • ste-rdio

Media

  • ste-book
  • ste-game
  • ste-movie
  • ste-music
  • ste-tv
  • ste-star
  • ste-star-empty

Miscellaneous

  • ste-tag
  • ste-check
  • ste-thumbs

The Grid

To create a section of gridded content, first create a <div> with a class of row. Then add divs within with a class of column or columns and a corresponding number (as represented below). There are twelve segments to the grid so the columns should add up to twelve.

.one
.eleven
.two
.ten
.three
.nine
.four
.eight
.five
.seven
.six
.six
.two
.eight
.two
.eight.centered

You can also use offset-two to leave blank space to the left of a column. Or you can use push-two and pull-two to swap the order columns. (Useful if you want content to appear to the left on desktop and below on mobile).

.eight.offset-four
.four.push-eight
.eight.pull-four
First in source
.six.push-six
Second in source
.six.pull-six

You can also have separate grid classes for different resolutions by adding sm-, md-, and 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.

.md-six .lg-three
.md-six .lg-three
.md-twelve .lg-six