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
andline-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 addingmargin-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