Font Overview

  • font-family decide the font style. For example, Georgia is elegant.
  • You can use Google Fonts. It is easiest way to get fancy font!
  • Web fonts allow you use fonts that are not installed on the user’s computer.
  • font-size sets the size of the font. It can be relative-size, absolute-size, even math one.
  • You can set text shadow: text-shadow: 3px 3px 3px #ababab;
  • There are some Font Pairing Rules to make pages looks good.
  • The font property is a shorthand property for:
font-style
font-variant
font-weight
font-size/line-height
font-family

Note: The font-size and font-family values are required. If one of the other values is missing, their default value are used.

Best Web Safe Fonts for HTML and CSS

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) Brush Script MT (cursive)

font property

font-family

The font-family CSS property specifies a prioritized list of one or more font family names and/or generic family names for the selected element.

Example:

font-family: Georgia, 'Times New Roman', Times, serif;
  • Why specifies Generic Font Families at back? Because they are commonly used for font fallbacks. if browser can’t find the font families you define at front, browser usually will use one font family for your specific generic font family.

What is Generic Font Families

Generic Font Families refer to the basic categories which browser usually support as least one font belong to that category.

In CSS there are 5 regular generic font families:

  • Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and elegance. For example: font-family: Times New Roman; Georgia, serif;
  • Sans-serif fonts have clean lines (no small strokes attached). They create a modern and minimalistic look.
  • Monospace fonts - here all the letters have the same fixed width. They create a mechanical look.
  • Cursive fonts imitate human handwriting.
  • Fantasy fonts are decorative/playful fonts.

There are more generic font families, like system-ui, math, emoji, etc.

font-size

The font-size CSS property sets the size of the font. Changing the font size also updates the sizes of the font size-relative <length> units, such as em, ex and so forth.

Absolute-size keywords

based on the user’s default font size (which is medium).

/* <absolute-size> values */
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
font-size: xxx-large;

relative-size

The font will be larger or smaller relative to the parent element’s font size

/* <relative-size> values */
font-size: smaller;
font-size: larger;

A positive value.

For most font-relative units (such as em and ex), the font size is relative to the parent element’s font size.

font-size: 12px;
font-size: 0.8em;

A positive value

relative to the parent element’s font size.

font-size: 80%;

math value

Scaling rules are applied when determining the computed value of the font-size property for math elements relative to the font-size of the containing parent.

The font-size property is specified in one of the following ways:

  1. As one of the absolute-size, relative-size or math keywords
  2. As a or a , relative to the element's font size.

  • Em Using an em value creates a dynamic or computed font size. The numeric value acts as a multiplier of the font-size property of the element on which it is used.

  • Rem rem values were invented in order to sidestep the compounding problem. rem values are relative to the root html element, not the parent element.

font-weight

The font-weight CSS property sets the weight (or boldness) of the font. The weights available depend on the font-family that is currently set.

keyword values

font-weight: normal; font-weight: bold;

numeric values [1,1000]

font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400; /* normal */
font-weight: 500;
font-weight: 600;
font-weight: 700; /* bold */
font-weight: 800;
font-weight: 900;

Keyword values relative to the parent

font-weight: lighter;
font-weight: bolder;

font-style

The font-style CSS property sets whether a font should be styled with a normal, italic, or oblique face from its font-family.

It has 4 choice

font-style: normal;
font-style: italic;
font-style: oblique;
font-style: oblique 10deg;

Common font example

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: black;
  font-family: Verdana, sans-serif;
  font-size: 16px;
  color: gray;  
}

h1 {
  font-family: Georgia, serif;
  font-size: 60px;
  color: white;
}
</style>
</head>
<body>

<h1>Beautiful Norway</h1>

<p>Norway has a total area of 385,252 square kilometers and a population of 5,438,657 (December 2020). Norway is bordered by Sweden, Finland and Russia to the north-east, and the Skagerrak to the south, with Denmark on the other side.</p>

<p>Norway has beautiful mountains, glaciers and stunning fjords. Oslo, the capital, is a city of green spaces and museums. Bergen, with colorful wooden houses, is the starting point for cruises to the dramatic Sognefjord. Norway is also known for fishing, hiking and skiing.</p>

</body>
</html>

Google Fonts

Google Fonts are free to use, and have more than 1000 fonts to choose from. There are many good fonts over there.

Example:

<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong">
<style>
h1.a {font-family: "Audiowide", sans-serif;}
h1.b {font-family: "Sofia", sans-serif;}
h1.c {font-family: "Trirong", serif;}
</style>
</head>

Web Fonts

Web fonts allow Web designers to use fonts that are not installed on the user’s computer.

When you have found/bought the font you wish to use, just include the font file on your web server, and it will be automatically downloaded to the user when needed.

Your “own” fonts are defined within the CSS @font-face rule.

@font-face rule

In the @font-face rule; first define a name for the font (e.g. myFirstFont) and then point to the font file.

To use the font for an HTML element, refer to the name of the font (myFirstFont) through the font-family property:

Example:

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

div {
  font-family: myFirstFont;
}

Different Font Formats

  • TrueType Fonts (TTF) TTF has long been the most common format for fonts on Mac and Windows operating systems.  TTF/OTF fonts are not compressed and, as a result, they have a larger file size.

  • OpenType Fonts (OTF) OpenType is the evolution of TTF. It is the result of a joint effort between Adobe and Microsoft.

  • Embedded OpenType Fonts (EOT) EOT fonts were designed by Microsoft to be fonts used on the web. It is an attempt to address the copyright shortcomings of TTF and OTF when publishing on the web.

  • The Web Open Font Format (WOFF) WOFF is basically OTF or TTF with metadata and compression supported by all major browsers.

  • The Web Open Font Format (WOFF 2.0) WOFF2 is the next generation of WOFF. The WOFF2 format offers a 30% average compression gain over the original WOFF.

  • SVG Fonts/Shapes SVG fonts are defined using the SVG’s ‘font’ element. These fonts contain the glyph outlines as standard SVG elements and attributes as if they were a single vector object in the SVG image. The greatest drawback to SVG fonts is the lack of font-hinting. However, if you are targeting iPhone and iPad users, SVG fonts are your only choice.

Reference