Join Laura Franz for an in-depth discussion in this video Analyzing text readability on the professional sites, part of Typography for Web Designers.
In this chapter we've learned a lot about how to choose size, line height,…line length, and color to promote readability of text on the web.…Now it is good time to ask, how do professional sites use these things to…promote readability?…Do any of these sites use an italic, bold, or all caps for emphasis?…How is alignment used, how is color used?…On ilovetypography.com, they use a generous font size and line height.…The line length isn't tool long or too short.…
The text in the list of links get smaller, but it works here because it's not prose.…The links are still big enough for us to scan quickly or read casually.…When italic, bold, or all caps are used, they are used sparingly and they don't…affect the readability.…We can click through to an article, let's find one here, and we will find the…font size and line height are generous.…
The line length is comfortable.…There is lot of text packed with new information or ideas and reading needs to…be as easy as possible.…As for the color palette, it's pretty simple.…
- Understanding how good typography promotes reading
- Choosing web-safe fonts
- Applying web fonts in CSS with @font-face
- Adding and applying the Google Fonts syntax
- Finding and applying a good font size, line height, and line length
- Improving a color palette by improving contrast and reducing optical vibration
- Understanding how people mentally organize, or chunk, visual elements
- Applying a system of hierarchy in HTML and CSS
- Applying vertical spacing in CSS
- Adding emphasis within a heading
- Understanding classic and modernist typographic pages
- Adding a list of links
- Creating drop caps
- Fixing quotation marks, apostrophes, and dashes
Skill Level Appropriate for all
Typography with CSS in Dreamweaverwith Joseph Lowery2h 30m Intermediate
Creative Inspirations: Doyald Young, Logotype Designerwith Doyald Young1h 41m Appropriate for all
1. Using Fonts to Communicate the Meaning of a Word or Headline
2. Using Fonts for Text
3. Maximizing Readability
4. Visually Chunking Text
5. Shaping a Page Using Typography
6. Shaping a Traditional Typographic Page
7. Shaping a Modernist Typographic Page
8. Attending to the Typographic Details
Additional resources3m 9s
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.