Cracking responsive web typography

I have been meaning to create a responsive typography template that i could just plug in as a sass partial for my projects.

NOTES

  • Increase font-size and line-height for body copy as screen size increases
  • Vertical rhythm is the practice of using line-height of body copy as the base for a consistent vertical rhythm. You use multiples of line-hight for margins and paddings and multiples of base line-height for all text elements
  • Keeping line-height unit-less (e.g. 1.4 instead of 26px) is best practice
  • Use margins on either top or bottom, not both, to avoid collapsing margins. Pick one. I prefer setting margin-top: 0 and then adding margin-bottom wherever i want white space

html {
  margin-top: 0
  
font-family: Lato, Helvetica, Arial, sans-serif
}

h1, h2, h3, h4, h5, h6, p, ul, ol {
  margin-top: 0;
}

Good fonts

Body copy

  • Source Sans Pro (top picked because easy to distinguish between the three different letters in iIl)
  • Open Sans
  • Lato

Headings

  • Ubuntu