Typography and Web Design
- 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 San 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