It doesn't make sense to mention all the links on the slides, as they're not clickable there! As a result, this GitHub file was born where I'll try and mention my personal recommendations and all the links I find useful.
Alrighty, as I mentioned in the talk, I always prefer to pair 2 fonts together which go well with each other. Use a sans-serif font for all the headings (h1, h2, etc.) and a serif font for the body text OR vice versa. Use monospaced fonts for displaying code. Experiment with various combinations until you find one which makes you (and your readers) happy 😉
- Open Sans
- Raleway (especially recommended for headings)
- Lato
- PT Sans
- Montserrat (especially recommended for headings)
- Helvetica
- Arial
Some of you might disagree with this, and it's okay. But I believe there are much better fonts out there compared to these two. Don't settle for mediocrity.
- Georgia
- Crimson Text
- Cardo
- Sorts Mill Goudy (especially recommended for headings)
- Source code pro (this is the best)
- PT Mono
So those were my recommendations. Now if you remember, I talked about three CSS properties in the session:
If you want even more control, here are some CSS properties which will help you in your typography:
- letter-spacing
- font-style
- font-weight
- text-align (never set it to
justified, seriously!)
- Google fonts for free web fonts
- Typography.com for paid fonts
- Typekit.com for paid fonts (they also offer free ones)
- CSS font stack for checking web-safe fonts
- Golden ratio typography calculator
- WP Google Fonts - plugin for adding Google fonts to your site
- WhatFont - chrome extension for checking fonts on all websites
And finally, if you wanna dig deeper into typography, here's a kickass post series to get you started: A-Z of Web Typography by tutsplus.
P.S: GitHub needs to work on its typography as well! 😅