From the course: Responsive Typography Techniques
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Vertical rhythm with a base unit - CSS Tutorial
From the course: Responsive Typography Techniques
Vertical rhythm with a base unit
Using a base unit, to derive all your vertical measurements from, is a technique used to set consistent vertical spacing in your layouts. This method is very much rooted in the principle of using baseline grids from the days of print. Base units and typographic scales aren't mutually exclusive, but most people tend to favor one method or the other in their design work. Both can give you similar benefits. Selecting your base unit usually comes from the line head you choose for your body text. And in turn, that's affected by the type face you're using. Typically, I select the type face I'll be using, and experiment until I find a good font size and line height that feels comfortable to read. Then I derive my base unit from those settings. Let's move over to coda and look at our CSS to see how we can establish that. So I'll switch over to Coda where I have the chapter 02 03 example CSS open. And that's the screen.css file in that folder. For our example, I've chosen a font size for my…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
(Locked)
Exploring typography scale and vertical rhythm4m 8s
-
(Locked)
Implementing a modular scale to create typographic hierarchy6m 23s
-
(Locked)
Vertical rhythm with a base unit4m 38s
-
Sizing your type: Pixels, ems, and rems10m 27s
-
(Locked)
Applying viewport units (vh and vw) to typography6m 30s
-
(Locked)
Applying and choosing our typographic scale8m 1s
-
(Locked)
Challenge: Select and apply a different scale46s
-
(Locked)
Solution: Select and apply a different scale1m 33s
-
(Locked)
-
-
-
-