Important CSS Concepts

Font Type and Font-Family

When discussing fonts, there are two main font types - Serif and Sans-Serif. Serif fonts (eg Times New Roman and Georgia), have small lines, dangly bits, or little decorative stroke that continues after the end of the stems of characters. Because of these extra dangly bits or flair - Serif fonts can look more official or professional. While Sans-serif (eg Helvetica, Arial, and Verdana) are "Sans" or without - additional the lines at the ends of characters. They tend to look cleaner, more modern, and streamlined. When you create a webpage, the default font in most browsers is Times New Roman.

Font Family Descriptions

Sans-Serif

• Helvetica: characters have a balanced width and height, with squareish capital H's, M's and D's, and rounded lowercase e's, c's and a's. The balanced width and height and rounded lowercase characters make this a round/soft sans-serif font. As with all sans-serif fonts, it is without any additional flourishes.
• Arial: Narrower individual characters than Helvetica a little bit taller than wide. Overall, a slightly narrower font-family.
• Verdana: More spread out than the previous fonts with a wider profile for each one of the characters.
• Comic Sans: Has a playful irregularity of characters. The lower half of the characters are slightly tilted or angled to the right on the bottom, making them somewhat distorted looking. Characters are also quite round. All in all, the tilting and roundness can be described as goofy and playful.

Serif

• Georgia: Has thick character lines relative to the other serif fonts in this list. Using the letter 'T' as an example, serif fonts have dangling flourishes extending from either side of the horizontal line on top of the T. The Georgia letter T's top horizontal line, vertical stem, and flourishes have a slightly thicker line-weight than the other serif fonts in this list.
• The Times New Roman: Thinner character lines and slightly thinner width.
• Baskerville: Lines are even thinner than Times New Roman example. And lettering itself is slightly more compact.
• Courier: Can be described as looking like an old typewriter typeface. The characters are more angular than other serifed counterparts. The dangling flourishes form right angles (sharp downward turning) coming off of the horizontal line at the top of the letter T.

Tip: Try to limit your use of fonts to font families to about two on your website, and note that serif fonts are great for larger text, but can be harder to read if you have a lot of dense paragraph/body text. You can add many more types of fonts to your project, but you may need to include a font file (eg OTF/TTF) to your project folder and define the font in your CSS. More on using non-web-safe fonts at w3schools.com

CSS Units of Measure

The values of our CSS properties that deal in space and size are usually written in either pixel units (px), ems, or percentages. Legibility can be improved by controlling the width of boxes containing text and the spacing between elements.

Pixels

Pixels are the smallest unit of a computer screen. As a unit of measure, pixels are an absolute value that you can assign elements and fonts. The physical size of a pixel varies depending on your computer's resolution. For example, a laptop with a screen resolution of 2560 by 1600, may have a pixel density of 227 pixels per inch, or PPI. This means an object on the screen that is 200 pixels wide and 200 pixels high will be roughly size of a US quarter on this laptop screen. As reference, your paragraph text default size is approximately 16px in most browsers and h1s are approximately 32px.

Note:For context, approximately about 30% of web users have a screen resolution of 1366x768px. And about 95% have a screen resolution of 1024x768px or higher. When designing for these variations in screen resolution, it is helpful to target common a common resolution (designers often reference 1366x768px or 1400x800px), or use relative measures like ems or percentages.

Ems

Ems is a unit that is relative to the font-size being used (2em means 2 times the size of the current font). Ems are calculated as a percentage of the font sized used. The average browser renders paragraph fonts at 16px by default, so if you change the font size of your paragraphs to 2em, they will be 32px.

Percentages

Percentages are calculated relative to the parent element. If the body has a default text size of 16px, and we adjust paragraph elements to be 200%, they will also be 32px. Percentages are a great way to size other elements like divs, images, paragraphs, etc. Because percentages are relative to parent elements, elements that are sized with percentages resize with browser windows.