Fonts

In the world of design, fonts are one of the most powerful assets we have, and at the same time, they are one of the most underappreciated ones.

Typography is so powerful that when we use it correctly, we may even get away with not using a single image in our project.

Let's take a look at the CSS font properties, shall we?

font-family

The font-family CSS property defines the font we want an element to use, and looks like this:

font-family: "Times New Roman", Times, Baskerville, Georgia, serif;

Description

This property can hold one or multiple font names in its declaration. There is no limit as to how many font names it can hold; however, it is not only very unlikely to list more than four or five fonts, but it's also unnecessary.

The font family names are separated by commas. We call this the font stack. The browser will read the font stack and use the first one in the stack, if it can't find it or download it, it will move on to the next font family name and so on until it's able to use one from the stack.

There are two types of font family names: family name and generic family name.

Family name

Family names are actually names that represent real fonts, such as Times, Arial, Verdana, Monaco, and so on. They should always be listed before generic family names in the font stack.

Generic family names

These are the only keywords that represent a system font. They are called fallback fonts. They should always be listed after the family names in the font stack. Generic family names can be monospace, san-serif, serif, cursive, and fantasy.

Tip

It is not mandatory to use quotes (single or double) when a font family name has multiple words. For example, writing font-family: "Times New Roman", serif; is the same as writing font-family: Times New Roman, serif;. Note that Times New Roman is not quoted in the second example.

CSS:

.element {
  font-family: "Times New Roman", Times, Baskerville, Georgia, serif;
}

font-feature-settings

The font-feature-settings CSS property provides control over typographic properties in OpenType fonts, and looks like this:

font-feature-settings: "smcp";

Description

The font-feature-settings CSS property allows us to control and use other alternative glyphs that come included in some font files.

An example of an alternate glyph is for example when we type the fractions 1/2 or 1/4 the font actually includes the "small superscript" version like ? and ?. Or if we type H₂O it turns into H₂O.

Remember, not all fonts contain special glyphs (font features).

To find out what font features a font file has, you can use any of these two tools:

1. Fontdeck.com (text has link http://fontdeck.com/) - Find the font you want and on the About this typeface, look for the OPENTYPE line, there all the font features will be listed for that specific font.
2. Test OpenType features (text has link http://www.impallari.com/testing/index.php) - Just drag and drop your font file(s) and click on the OpenType Features link on the top left, a large panel will slide where you can select which features to see.

Here are some of the most common feature tags:

• dlig: Discretionary ligatures
• kern: Kerning
• liga: Standard ligatures
• lnum: Lining figures
• onum: Old style figures
• tnum: Tabular figures
• smcp: Small capitals
• ss01, ss02, ss03, ss04… ss20: Stylistic sets (font-dependent)
• swsh: Swash

For more information, check out the MDN website: http://tiny.cc/mdn-font-feature-settings

For a complete list of all font features, check the Microsoft site at http://tiny.cc/msn-font-features-list

CSS:

/*Small capitals*/
.element {
  font-feature-settings: "smcp";
}

font-size

The font-size CSS property defines the size of the text of an element, and it looks like this:

font-size-settings: "smcp";

Description

This property can also be used to change the size of other elements since we can compute the value of em, rem, and ex length units as well.

There are a few different value types that we can use with the font-size CSS property: absolute keywords/size, relative size, length, and percentage.

Absolute keywords/size

The sizes defined relate directly to specific font sizes. They can also be used to set a font size of an element based on the parent element's font size. Values are as follows:

• xx-small
• x-small
• small
• medium (default value)
• large
• x-large
• xx-large

Relative size keywords

These sizes increase or reduce the font size of an element based on the font size of its parent container. The values are:

• smaller
• larger

Length

Negative values are invalid. When using px, the font size is absolute; it's not relative to the font size of the parent container. When using em, ex, and ch, the font size is relative to the font size of the element's parent container. When using rem, the font size is relative to the root element, that is, the <html> element. When using vw, vh, vmax, and vmin the font size is relative to the viewport.

To see all the available values of this attribute, refer to the Absolute Length Units section.

The most popular units are:

• px
• em
• rem

Percentage

The percentage attribute refers to the percentage of the parent element's font size. Its unit is %.

CSS:

/*Absolute keywords/size*/
.element { font-size: x-small; }
/*Relative size*/
.element { font-size: smaller; }
/*Length value*/
.element { font-size: 18px; }
/*Percentage value*/
.element { font-size: 62.5%; }

font-size-adjust

The font-size-adjust CSS property helps us define the aspect ratio of the fonts based on the size difference of the lowercase letter x and upper case letter X, and it looks like this:

font-size-adjust: .5";

Description

In the font stack, the font sizes can be different from one font to the other, thus the styling of the text can considerably vary from the intended design. With the font-size-adjust CSS property, we can solidly predict that the font sizes are consistent when the browser uses any font from the font stack.

This property accepts a numeric value without a unit. It can also accept decimal values.

A great online tool that can do this for us is Fontdeck's font-size-adjust web app: http://fontdeck.com/support/fontsizeadjust.

Tip

Although Firefox is the only one that supports the font-size-adjust property at the time of writing this section, I decided to still include it because it will be of great value once other browsers start supporting it.

CSS:

.element {
  font-size-adjust: .5;
}

font-stretch

The font-stretch CSS property allows us to select a condensed, normal, or expanded face from the font family in question, and it looks like this:

font-stretch: condensed;

Description

The font-stretch property doesn't just stretch the font to whatever we tell it to. It looks for an actual face inside the font file that matches the declared style; or at that is as close as possible.

This property supports the following values:

• ultra-condensed
• extra-condensed
• condensed
• semi-condensed
• normal
• semi-expanded
• expanded
• extra-expanded
• ultra-expanded

CSS:

.element {
  font-stretch: condensed;
}

font-style

The font-style CSS property specifies the font style of an element, and it looks like this:

font-style: italic;

Description

The font-style property accepts the following values: normal, italic, and oblique.

Let's clear up the difference between italic and oblique.

According to the spec:

"Italic forms are generally cursive in nature, while oblique faces are typically sloped versions of the regular face."

This means that when we declare the font style italic, the browser will look for the italic face of the font and use that face. A good example of this is the typeface Georgia; when we use the italic property, we can clearly see that it's an actual italicized face rather than making the normal face oblique.

Oblique makes the Normal face slanted or inclined in order to simulate italics.

CSS:

.element {
  font-style: italic;
}

font-variant

The font-variant CSS property turns the targeted text into small caps and it looks like this:

font-variant: small-caps;

Description

The font-variant property is considered a shorthand in CSS3 and has been extended with new values, which developers rarely use.

One thing to note is that if the text is already in all caps and we apply the small-caps property to it, the text will not change; it will continue to be in all caps.

The most used values are: normal and small-caps. Some of the additional values in CSS3 are small-caps, all-small-caps, petite-caps, all-petite-caps, unicase, and titling-caps.

For more information, check out the MDN website: http://tiny.cc/mdn-font-variant

CSS:

.element {
  font-variant: small-caps;
}

font-variant-ligatures

The font-variant-ligatures CSS property defines ligatures in text, which specify how glyphs are combined in order to produce a more harmonic text, and it looks like this:

font-variantligatures: discretionary-ligatures;

Description

The font-variant-ligatures are common in OpenType fonts.

The font-variant-ligatures property uses the following values: common-ligatures, no-common-ligatures, discretionary-ligatures, no-discretionary-ligatures, historical-ligatures, no-historical-ligatures, contextual, no-contextual, and contextual.

For more information, check out the MDN website: http://tiny.cc/mdnfont-variant-ligatures

CSS:

.element {
  font-variant-ligatures: discretionary-ligatures;
}

font-weight

The font-weight CSS property defines the thickness (weight) of the font, and it looks like this:

font-weight: bold;

Description

This property accepts two types of values: a numeric value and a keyword value.

Numeric values

This property accepts numeric values such as 100, 200, 300, 400, 500, 600, 700, 800 and 900.

Keyword values

This property also accepts keyword values such as normal, bold, bolder, and lighter.

Tip

The normal keyword is the same as 400 numeric value and the bold keyword is the same as 700.

One thing to note is that the keywords bolder and lighter are dependent on the parent element's font weight.

CSS:

/*Numeric value*/
.element { font-weight: 200; }
/*Keyword value*/
.element { font-weight: bold; }

font

The font CSS property is the shorthand for the font-style, font-variant, font-weight, font-size, line-height, and font-family properties, and it looks like this:

font: italic small-caps bold 18px/2 "Times New Roman", Times, Baskerville, Georgia, serif;

Description

There are a few things to consider when using the font shorthand in order for it to work:

• At least the font-size and font-family properties need to be declared
• If any of the preceding two properties are omitted, the declaration will be ignored
• If any more than these two properties are going to be declared, it's mandatory to adhere to the following order:
  • font-style
  • font-variant
  • font-weight
  • font-size
  • line-height
  • font-family

  Tip

  When declaring the line-height value in the shorthand, it always has to go after the font-size property separated with a slash "/" character, for example, .element { font: 12px/1.6 Arial; }.

• CSS:

  /*All font properties in a single declaration*/
  .element { font: italic small-caps bold 18px/2 "Times New Roman", Times, Baskerville, Georgia, serif; }
  /*font-style*/
  .element { font-style: italic; }
  /*font-variant*/
  .element { font-variant: small-caps; }
  /*font-weight*/
  .element { font-weight: bold; }
  /*font-size*/
  .element { font-size: 18px; }
  /*line-height*/
  .element { line-height: 2; }
  /*font-family*/
  .element { font-family: "Times New Roman", Times, Baskerville, Georgia, serif; }