This document discusses typography and font families for web design. It covers the basics of typography as the practice of creating fonts. There are many font families to choose from including serif, sans-serif, monospace, fantasy, and cursive. Serif fonts help guide the eye for print but can be tiring on screens, while sans-serif fonts have become more prevalent for websites due to readability. The document recommends keeping web designs simple by using a maximum of three fonts and controlling fonts with CSS rather than embedding text in images.

1. Typography
and Web
Design
CIT-125

2. Typography - An Overview
● Practice of creating fonts for use in
design
● Has the ability to make or break
your web design!
● Many font families to choose from
● Can combine typefaces to create
layouts and structure

3. Anatomy of a Typeface
https://chavelli.com/blog/the-anatomy-of-letterforms

4. Families of Typefaces
Serif
● Refers to the typefaces that have small
feet (serifs) attaches to the letterforms.
● Serifs are used to help guide the eyes
across the tops of the letters when reading
● Excellent choice for printwork and
headers, but can be exhausting for eyes
on monitors due to the pixel based
environment.
Examples: Times New Roman, Georgia, Playfair
Display
Sans-Serif
● This typeface is more straight lined, and
lacks the serifs on the letters
● Has become much more prevalent for
website use and design due to its
simplicity and being easy to read on
screens at different sizes
● Even started to make its way into print
media, due to younger generations being
used to it.
Examples: Verdana, Arial, Helvetica

5. Families of Typefaces
Monospace
● Has the same spacing between each letter
● Often used as a ‘techy’ font
● Utilized in textbooks and references to
denote code snippets
Examples - Courier, Courier New
Fantasy
● Lots of the ‘fun’ fonts
● Can be difficult to read
● Often utilized in Logo design and Titles of
documents
● Use sparingly in design, great for a brand,
but do not overdo
Examples - Impact, Bahaus 93

6. Families of Typefaces
Cursive
● Meant to look handwritten
● Do not overuse for content text
● Another style meant to be used for headers
and titles
Examples - Vivaldi, Comic Sans, Brush Script,
Adder
Warning!
Be careful of using Comic Sans
and Papyrus. Both of these
typefaces carry some negative
connotation with them in the
design community.
They have their uses but be
careful of overuse.

7. Using Fonts on the Web
● Reference from CCAC Library (Login
may be required)
● Keep it simple! Keep yourself to only
two, maximum three fonts in a
design!
● Do not put text into your header
images
○ Used to do this, now use CSS to control
the fonts