Notes

Cracking responsive web typography

Edit on GitHub

Web Development

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
 1
 2html {
 3  margin-top: 0
 4  
 5font-family: Lato, Helvetica, Arial, sans-serif
 6}
 7
 8h1, h2, h3, h4, h5, h6, p, ul, ol {
 9  margin-top: 0;
10}

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
Browse all topics