Join Morten Rand-Hendriksen for an in-depth discussion in this video Change the type, change the box, part of Making Sense of the CSS Box Model.
- All fonts and all type have a standard point size, … line height, leading, tracking, and kerning. … These are terms that describe how lines and letters … related to each other … and changing them changes both the appearance … of the final text and the size of the box. … The most obvious way to change the box … is to change the type itself. … Changing the font-face or font size … will also change the size of the box. … Bigger fonts create bigger boxes. … Smaller fonts, smaller boxes. … The standard line height of fonts is often insufficient. … In these cases, we add leading, … literally thin strips of lead above and below the lines … to push them apart. … In CSS we do the equivalent by changing … the line height property. … Setting the line height property of a font … displayed at 12 pixels to 16 pixels will add four pixels … to the total height. … Two at the top and two at the bottom. … Likewise, we can change the space between the each letter … by altering the tracking or letter spacing. …
- Designing with boxes
- The origin of the box in typography
- What is the CSS box model?
- Changing the contents within the box
- Floating and clearing content
- Using the clearfix
- Working with Float, Flex, and Grid
- CSS shapes