The box model areas
Content area: This is the area naturally consumed by the content that constitutes an element
Padding area: Every box can optionally have padding that surrounds the content area.
Border area: The size of the outline/border that surrounds the box.
Margin area: This is the transparent white space outside the box that distances the box from its neighboring elements.
Display
Block: An element with a display value of block begins on a new line and takes up all the available width of that line.
Inline: The element appears on the same line as its surrounding elements, and only takes up as much space as its content, padding, and border areas need.
Inline-block: Same as above, but the element now has the ability to be given arbitrarily defined box area values, which is not possible with the plain inline display property.
None: The element is not visible and takes up no space on the page
I’m not sure people would have taken it as seriously. Which brings us to three key concepts in typography: tone, readability, and legibility.
Tone is the mood or feeling that your typography conveys visually, which is distinct from the tone of the content itself. Tone ranges across a spectrum from informal to formal, and you’ll want to make sure your typography sets the right tone for the message and brand. The typesetting above illustrates this beautifully. The young, playful feel of the font just can't support the gravitas of the quote.
Legibility defines how easy it is to distinguish between individual letterforms (the shapes of the letters), and is a vital consideration for setting type in user interfaces. For instance, some fonts make it difficult to distinguish between an uppercase I and a lowercase l. (See what I mean?) This is usually a function of the font’s design, though certain design choices, such as setting letter-spacing too high or low, or setting text in all caps, can impact legibility.
Readability defines how easy it is to read paragraph content. It’s determined by the font's design and your own design choices, including sizing, spacing, and color.I’ll cover all of these aspects in more detail, but let’s start with one of the most important decisions: the fonts themselves.
Typography matters.
In his classic The Elements of Typographic Style, Robert Bringhurst defines typography as “the craft of endowing human language with a durable visual form.” In most cases, that visual form needs to be legible and readable, and it must set the right tone. If your typography makes a text difficult or downright impossible to read, then it’s useless — no matter how amazing it looks.Just imagine how different history might be if the Bible, for example, had been typeset in green Indie Flower on a blue background:
