Typography

Most of your page is type. In this class especially with a text-heavy site, typography both conveys most of the information people are looking at and also the design of your site. Here are some resources to help with your typography.

Class Resources

  • Typography Basics: This post goes over the basic concepts of typography. You can use it as a checklist to make sure that the type on your site is well done.
  • Typographic Hierarchy Post: This post describes what it is, shows CSS rules you can use to help you and has a short video about it.
  • CSS Properties for Typography: Examples of CSS properties you can you to help you create a typographic hierarchy
  • Font Pairing: This video talks about choosing fonts and also talks about hierarchy and some other basics about typography.
  • Google Web Fonts: 3 minute video on how to use Google Web Fonts
  • Long list of Web Fonts: look over this if you’re searching around for fonts for your site. For the main text you should look at Fonts with Multiple Weights because they will have normal, bold and italic. For your headings any on the page will work but if you want something different look at Display Fonts and Display Fonts with one Weight. Open links in a new tab to view the fonts.

Outside Resources