Typography

From the Standardistas book...

Typography is often defined in traditional terms referring to the world of print - books, magazines, newspapers...in short, anything printed. Typography, however, isn't just appropriate to print, it's also appropriate to everything we create onscreen. In short, anywhere that type is used. 

typography-n 1. the art or process of setting and arranging types and printing from them; 2. the style and appearance of printed matter

- Concise Oxford Dictionary (Clarendon Press, 1990)

typeface - refers to a font family, for example, Times New Roman

font - refers to one instance of this typeface; for example: Times New Roman, Italic, 12 pt.

On the web these terms are used interchangeably.

---

Inheritance

Inheritance - The "cascading" in CSS refers to the chain of inheritance in the way style rules are applied. Inheritance considers the relationship between tags to be a "parent-child" relationship. The "body" tag is the parent of the "p" tag; the p" tag is the parent of the "em" tag and so on. Technically speaking, we say the "p element is descended from its parent element, the body."

The following chart illustrates inheritance:

 

Parent tags "pass on" their traits (CSS properties and values) to their children. So, if you set the body text color to be gray-black #333333, then  all the p tags will use the same color, and so will lists unless you specify a different color in the css declaration for the child tags. We say that child tags "inherit" rules applied to the parents. Sounds, easy, right? Well, 75% of the time, it is, but there are some curious situations and stumbling blocks that need explaining.

User Agent Styles, Author Styles, User Styles

Run this experiment and see if you can find the answer...(using your noggin!)

Create a new page and set the body CSS rules as follows:

Now, add an h1 tag and then type a sample paragraph and wrap it in p tags. (two sentences will work). We expect that all the text on the page will display in Arial, which it does. (because of the rules if inheritance). But why, oh why, doesn't the h1 text display in size 14 px? Can you answer this conundrum?

---

What are ems? Don't confuse ems with the emphasis tag. ems are a relative measurement based on the size of the parent element. ems are great for making your page accessible to all and allowing folks to resize their browsers/text size on their own.

QUICK MATH LESSON:
MOST browser built-in style sheets have a DEFAULT paragraph text size of 16px; that is, unstyled p elements display in size 16 px font. (using the browser's default style sheet).

If we set the body default size to 62.5%, then our default  body font size is now 10px;
Like this:
body
{
font-size: 62.5%
}

(because 62.5% of 16 is 10.)
 10 is a nice round number. It makes the math for the rest of your style sheet easy to do:

Now, if you want the paragraph text to show up in 14pt. font you can set the CSS as follows:

p{
font-size: 1.4 em;
}

We will answer this in class.

Keep working on your Ms. Baker page...

Assignment: Add in some new CSS declarations with selectors and values:

Show me your page and CSS when you have added or changed the values for all of the following items:

• font-size:  (8px  or 2em;)
• font-family: arial, helvetica
• font-weight (normal, bold, 100, 200, 300, ...700)
• text-transform: (uppercase, for example)
• font-variant: (small-caps)
• letter-spacing: (use ems)
• word-spacing: (use ems)
• line-height   (use ems to specify)
• text-align  (left, right, center, justify)  Avoid "justify" on the web
• text-decoration (none, for example)