Join Val Head for an in-depth discussion in this video Solution: Select and apply a different scale, part of Responsive Typography Techniques.
…And now here's my solution to our challenge.…I decided to stick to something related to the number three, for the three…bears in our content, so I chose a scale based of the major sixth interval.…Six is close enough to three conceptually for me.…As you can see from my results on modularscale.com The…major sixth interval gave me a ratio of 1 to 1.667.…And looking at the numbers that I got as a result, you can see I still…used the same two important numbers that we used for our original scale.…
Not something you had to do, but something I decided to stick with.…My overall results are a bit more dramatic thanks to the bigger ratio.…You can see that my title's a bit bigger,…my lead in paragraph is a little bit bigger.…My body text is a whole lot bigger, and a…lot closer to the size of the lead in text, so…that change from the lead in paragraph to the main…body text, is less dramatic and less of a jolt then…it was before.…I saved the really big dramatic sizing for further down the page, where I…made my pull quote, or the block quote, basically as big as I possibly could.…
- 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.