Group items tagged

While you don’t necessarily have to remember all of these technical terms, you should be familiar with the actual concepts, especially if you want to master part 3 of this series (in which we create our own color schemes). To that end, here’s a cheat sheet to jog your memory:Hue is color (blue, green, red, etc.).Chroma is the purity of a color (a high chroma has no added black, white or gray).Saturation refers to how strong or weak a color is (high saturation being strong).Value refers to how light or dark a color is (light having a high value).Tones are created by adding gray to a color, making it duller than the original.Shades are created by adding black to a color, making it darker than the original.Tints are created by adding white to a color, making it lighter than the original.

Set a 12px font size with 18px line height and margin for paragraphs

Dividing the desired line height (18px) by the element font size (12px) gives us the em value for line height. In this example, the line height is 1 and a half times the font size: 1.5em. Add line height and margin properties to the CSS: p{ font-size: 0.750em; line-height: 1.5em; margin: 1.5em; } Now the browser will say to itself, “Oh, line height and margin is set to 1.5em, so that should be 1.5 times the font size. What’s the font size, again? 12px? OK, cool, make line height and margin 1.5 times that, so 18px.”

To retain our vertical rhythm we want to set an 18px line height and margin. Easy: If the font size is 18px then 18px in ems is 1em! Let’s add the properties to the CSS (and make the font weight light:) h1{ font-size: 1.125em; line-height: 1em; margin: 1em; font-weight: 300; }