CSS Home

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.

Websafe Font-Families
Sans-Serif Serif
Helvetica Georgia
Arial Times New Roman
Verdana Baskerville
Comic Sans Courier

Font Family Descriptions



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 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 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 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.

Next: CSS Syntax
Previous: Intro to CSS