Web Typography: Using The Golden Ratio and REM's - Greg Rickaby - 0 views
gregrickaby.com/sing-the-golden-ratio-and-rems
typography webdesign tools calculator usability css font REM responsive
shared by Vernon Fowler on 01 Feb 14
- No Cached
-
First you need to set a default “root” font-size variable: html { font-size: 62.5% } Why 62.5% instead of 100%? Simplicity. Our default font is now 10px, which makes math easier. Now, 1.0rem = 10px. This becomes our $rembase.
-
Now your fonts will scale perfectly during a browser re-size (if using responsive design), or if a user were to zoom in or out.
-
What’s so awesome about the unitless line height? You only have to specify it once in the <body> tag. Now, ALL other line height(s) are relative to the parent font-size. That’s too easy! (Of course, you can still specify your own to maintain complete control.)
-
Shouldn't line-height also be refined whenever the container width changes?
-
- ...5 more annotations...
-
Margins, or “vertical spacing” is calculated using either 24px or 48px to maintain vertical rhythm.
-
Where does the mystical value of 24px or 48px for vertical spacing margins come from?
-
-
By declaring REM’s after PX’s in the CSS this example will degrade gracefully to the PX:
-
Line-height: 24px; for the win, you you stay right in the baseline ( until you start using a border bottom it throws it off by a pixel :p )
-
setting the root font size to 62.5% is a brilliant little trick
-
One note on the comment regarding vertical rhythm. I believe the 24px and 48px is dependent on your line-height. In your examples, you are using a line-height of 26px so I think the values should be 26px and 52px to maintain that rhythm.
