Join Val Head for an in-depth discussion in this video Maintaining line lengths for comfortable reading across screen sizes, part of Responsive Typography Techniques.
…Actively setting type for good readability has become something…we need to examine continually with responsive web design.…In this tutorial we'll cover why reading length is important and which…CSS properties have the greatest effect on the readability of our content.…In typographic terms the factors that affect how…comfortable it is to read a certain passage…of text are the size of the type,…the leading or the vertical spacing between lines,…and the measure, which is the horizontal length of each line.…To put these in CSS terms, that would be…the font-size that controls the size of the letters, the…line-height controls the leading, and the width of our container,…whatever is containing our text, would be considered the measure.…
Web designers tend to use both the typographic and CSS…terms interchangeably, so it's helpful to be familiar with both.…Typically when these are discussed…in traditional typography, or even in the context of fixed-width web pages, these…are considered properties that you would really…
- Deciding between self-hosted and hosted web fonts
- Sizing your type with pixels, ems, and rems
- Applying and choosing a typographic scale
- Creating a font stack
- Maintaining line lengths
- Using media queries to set natural typographic break points
Skill Level Intermediate
1. Comparing and Choosing Web Fonts
2. Establishing Rhythm in Your Typographic System
3. Creating Type Prototype Pages
Establishing the font stack7m 32s
4. Setting Type for Readability Across Screen Sizes
5. Helpful Online Tools and Scripts
- 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.