Fonts & Typography (v1)

Introduction

Something like 95% of the web is text and yet most web developers don’t pay any heed whatsoever to typography — it’s this mysterious esoteric subject reserved for designer geeks and their lattes. You are not "most web developers".

Typography is important stuff! It can have a major effect on how your page feels when the user is reading through it and can also influence how easy the page is to digest, both major factors in your user deciding to continue or turn back. You got introduced to it in the section on Design and UX, and here you’ll see it implemented.

Do what you can to get at least a familiarity with the high level decisions involved with choosing a typeface and font sizes. You don’t need to dive into kerning and what ligatures are, but you should understand when it’s appropriate to use serif vs sans-serif fonts and how font weights and line heights impact readability (recall how to build a good visual hierarchy).

Learning Objectives

  • Why do fonts matter?
  • What’s the difference between a serif and sans-serif font?
  • What are font-family attributes used for?
  • How is the active font determined in a font-family?
  • Where does the browser actually get its fonts from?
  • Where can you get additional fonts from and how do you get them onto your page?
  • What are the disadvantages of using web fonts? Of loading your own?
  • What are the important properties of fonts that you can specify using CSS?

Study

  1. Read Shay Howe on Fonts and Typography

  2. Browse through A Beginner’s Guide to Using Google Web Fonts by DesignShack, but don’t get too lost in the details.

  3. Browse the Google Web Fonts and see if any of them seem interesting to you.

  4. 8 Typography Tips To Ensure Web Accessibility:

  1. Sans Serif Vs Serif Font — Which Should You Use & When (Approximate reading time: 8 minutes)

Additional Resources

Fun Time

LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack

UPDATED: 01.02.2021

CONTRIBUTORS: