From the course: Making Sense of the CSS Box Model

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Change the type, change the box

Change the type, change the box - CSS Tutorial

From the course: Making Sense of the CSS Box Model

Start my 1-month free trial

Change the type, change the box

- 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…

Contents