Understanding the basics of type - CSS Tutorial

- When we talk about the CSS box model, it's a good idea to start at the core and work our way out. On the web, that core is basic type. The majority of content published on the web is text and the majority of features in CSS are there to help us configure and format the display of that text. These features are in turn inherited from classic typesetting and typography, so let's start there with basic typesetting principles, see how they work and how they translate into CSS. In the beginning, we have a frame in which we'll build the page. Within this frame, we can start setting up a basic page. If I were to print this on paper using an old letter press printing press, I collect the necessary letter press type letters and place them one after the other in a block until I get a full sentence. Each of the letter press type pieces have the width of the individual letter and the predefined minimum line height. As we place the letters side by side, we can draw a line directly under the letters. This is known as the baseline. Below the baseline there is space to allow for letters that have descenders, the lowest point of a J or Y or a G. And above the mean line, there is space to allow for letters to have ascenders, the highest point of an L or an F or a K. The height of the letter from descender to ascender is known as the point size and this is also the pixel size of a digital font. One M is the height and width of an uppercase M of whatever font and size you're currently working with. Traditionally, these letters were cast as square blocks called em quads or mutton quads. We'll get back to this later. When the sentence is complete, I can draw a line around the type pieces. This is the CSS box the browser creates. Right now the box is the size of the sentence and if I add more letters or words, it grows with it. The size of the box is confined by the contained it's held inside, in this case, the frame that is the size of a page. That means as I keep adding more words, eventually we run out of space and another line has to be added. This increases the vertical height of the box to two lines. Working like this with letter press type, you can clearly see how some of the core principles of typography and the CSS box model work. If I want to make a paragraph, I string together letters into words and then words into sentences and handle them as individual blocks. Then I separate them vertically by adding space through padding or margin to the top and bottom. This produces block level elements, each element, a paragraph, a heading, a quote, is a block. Having built several blocks, I can move them around as individual units and reorganize them. I can also change the appearance of individual blocks, maybe change the width or positioning or swap out one font for another without interfering with the other blocks. Working with in-line elements is also easy to understand in this context. When I add a letter or word of a different size or font into the block, it changes the structure of the line that that letter is on. If the letter is taller, the line height is increased for that line only. If the letter is taller and on the first line, the increased line height appears to push the entire line down. Using just these basic components, a frame and a bunch of individual letters, I can create a pretty sophisticated page layout that is comprised of various boxes. And this corresponds closely to what happens in the web browser in the most basic sense.