Join Val Head for an in-depth discussion in this video Using media queries to set natural typographic breakpoints, part of Responsive Typography Techniques.
…In this tutorial, we're going to take a look at our…example page and add some media queries, specifically to address our typography.…If you're not familiar with media queries, or…you haven't used them in a while, you may…want to check out the Responsive Design Fundamental Course…by James Williamson, especially the Understanding media queries section.…To recap just a little, the widths we saw some issues at…were ones like the very narrow ones at around 320, where we noticed…our headlines broke in a really strange way,…and our line lengths were definitely far too short.…
As we got bigger, we noticed that in around 900 pixels and above,…that our line length and our body text got just a bit too long.…So, we wanted to address that, as well.…And, of course last but not least, we…noticed that once we got past, you know, 1200…pixels or so, things got really out of hand…and we didn't want our line stretching that long.…So, we'll use the…notes to create some type specific media queries or type tweak points, as…I prefer to call them, to better control the readability of our text.…
- 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?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
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.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.