CSS

Last Updated: 10/31/2022

Fonts

Font Selection

  • Use a font that is easy to read.
  • It is also important to choose the correct color and text size for the font.

Font Families (Categories)

  • You have three main categories of fonts Serif, Sans serif, and Monospace
  • But other categories are mostly used in printing, and they're irrelevant for the web.

Serif

  • Fonts have a small stroke at the edges of each letter.
  • They create a sense of formality and elegance.
  • They're often used in books, newspapers, magazines, and so on.
  • Times New Roman, Georgia and Garamond are popular fonts in this category.

Sans-serif

  • Fonts have clean lines (no small strokes attached).
  • They create a modern and minimalistic look.
  • Arial, Verdana and Helvetica are popular fonts in this category

Monospace

  • Mono means one. So monospace means one space.
  • All the letters have the same fixed width
  • Courier New, Lucida Console are popular fonts in this category

Font-Family Property

  • Used to specify the font of a text.
  • If the font name is more than one word, it must be in quotation marks, like: "Times New Roman".
font-family: Arial
font-family: "Times New Roman"

Web Safe Fonts

  • Fonts that are available on most computers so it's safe to use them.
  • The following list are the best web safe fonts for HTML and CSS:
    • Arial (sans-serif)
    • Verdana (sans-serif)
    • Tahoma (sans-serif)
    • Trebuchet MS (sans-serif)
    • Times New Roman (serif)
    • Georgia (serif)
    • Garamond (serif)
    • Courier New (monospace)

Fallback Fonts

  • There are no 100% completely web safe fonts. There is always a chance that a font is not found or is not installed properly.
  • Therefore, it is very important to always use fallback fonts.
  • You should add a list of similar "backup fonts" in the font-family property. If the first font does not work, the browser will try the next one, and the next one, and so on. Always end the list with a generic font family name.
  • Font stack consists of multiple fonts
font-family: Arial, Helvetica, sans-serif;
font-family: Georgia, 'Times New Roman', Times, serif;

Font-Size

  • Sets the size of the text.
  • The default size for normal text, like paragraphs, is 16px (16px=1em).
  • Most people prefer to use numeric values which can be absolute or relative values.
  • Absolute size:
    • Sets the text to a specified size
    • Does not allow a user to change the text size in all browsers (bad for accessibility reasons)
    • Absolute size is useful when the physical size of the output is known
  • Relative size:
    • Sets the size relative to surrounding elements
    • Allows a user to change the text size in browsers
  • We have keywords like large, larger medium,
font-size: large;
font-size: 10px;
font-size: 1rem;

Font-Weight

  • Set the weight or the boldness of the font.
  • You have a bunch of numbers from 100 to 900. 100 means really thin, 900 means really thick.
  • You can use keywords like bold (700), lighter (100) and normal (400).
font-weight: normal;
font-weight: 700;

Font Style

  • Specifies the font style for a text.
  • The default value is normal,
  • Use italic to get italic text.
font-style: normal;
font-style: italic;

Font Color

  • By default, color is set to pure black, which is also equivalent to #000 in hexadecimal form.
  • It's best not to use pure black as your body text color, it's best to use a dark gray
color: #111;
color: #222;
color: #333;
Previous
Next