Say It Like You Mean It:

Before we look at how to include external fonts, lets discuss font weight and font style. These are used to determine if a font is “bold” and/or “italic”.

Font Weight

Within CSS, the font-weight property, in its most basic use, specifies whether a font is “normal”, or “bold”.

When we wrap words with the <strong>...</strong> element, the browser is trying to find a “bold” version of the font. If none exists for the specified font, then they browser may try to bold the selected words on its own (this assumes we have not overwritten the strong elements rules in our CSS).

In addition to the “bold” font weight, depending on the font-family superclass, it is possible to also specify varying weights using;

• Terms
  • bolder
  • bold
  • normal
  • lighter
• Number Values
  • 100 through 900

NOTE: For these font weights to work, the equivalent font-family for each font weight (i.e. “Times-Regular.otf” & “Times-ExtraBold.otf”) must be loaded on the client’s computer. Otherwise, the browser will ‘round’ to the nearest font weight. At the end of the day, this means you always need to check you site on multiple devices, to ensure it is being displayed as you intend it to be.

Font style

Font style typically refers to whether a font is “italicized” or not.

NOTE: As with “font weight”, the “font style” property will try to find an appropriate, and dedicated, italic font family. If it is unable to do so, it will try to “italicize” the font itself. When a browser slants a font to achieve an italic effect (assuming it was unable to find a truly italic equivalent), this is actually known as an “oblique” style.

An Example:

In the following example, I have set it up so that each element uses the same font family, but I have made it so that the true, “italicized” version is not available to the #heading-2 element.

Notice the difference between the second and third elements. Depending on the browser, the second version is either a simple slanted version of the first or the same as the first (again different browsers display things differently). But the third includes unique serifs (look at the capital ‘T’s) that are part of the italic version of the font.

Assuming your fonts are loaded correctly, this will not be an issue for you. Specifying an elements style as “italic” should select the correct font-family. If it is not, then you know you need to check your font loading.

Font Size

As you can imagine, it is important to be able to adjust the font size of an element, element type, or the entire page. Fortunately (or unfortunately as you may find out), there are many ways to accomplish this all through the font-size: css property.

In general the font-size: property may be use to set the font size of a page or specific element. You can do so through units of measure that you are likely already familiar with, such as pt (point, font-size: 12pt) or px (pixel, font-size: 16px).

User Zooming

An important thing to remember is that users have the ability to zoom in and our of your website. They can increase/decrease the font size, typically by going to View > Zoom In/Zoom Out. This has the effect of changing a browser/pages text size.

In addition, users on most modern computers and mobile devices may “pinch” and zoom. This does not change the text size, but instead just zooms in the whole page.

If you are coming from a print world, the amount of flexibility this offers your end-users may be unsettling. But it is powerful for them, and something you should embrace as well. Just be aware of this while working on web development!

Fixed Sizes

font-size: may be passed “fixed-size” declarations or “relative-size” declarations. A fixed size declaration is one tries to specify the absolute size of text in a measurable unit. The most commonly used are pixels (px) and points (pt).

A default size for much print based, text content, is 12pt. This is roughly equivalent to 16px. These values also tend to be the starting defult for most browsers to display text.

Font size is an inherited property. So, setting the font size for a parent element will cause it to be inherited by all child elements. When setting relative sizes, the parents must also utilize relative sizes, or they will override all other declarations.

Relative Size

Another approach, and the one often suggested, is to use “relative size” measurements for font size instead of absolute sizes. These set the font size of an element as a ratio to the parent’s font size.

There are a few ways to accomplish this, but we will focus on two.

• percent %
• ems em

Both are relatively similar in how they work. A value of 100% or 1em will both leave the font size the same as the parent element. Likewise a value of 50% or 0.5em will reduce the font size by half.

What is an ‘em’

An em is described as being the width of the letter ‘m’. So 1em is the width of an ‘m’ in the specified font.

Why use relative sizes?

The reason for using relative sizes is that everything in your page is then in relationship from the top (*) element or wherever you set your font size. If you are using ems, and then decide that everything is too small/large, you simply need to change the base element’s size and everything else will also adjust.

NOTE: If you intend to use ems or %, you must set the base size for the elements you are using also in ems or %. The parents elements must also use these relative sizes, all the way up to the html selector.

html {
    font-size: 100%;
}

This is particularly true for headings, which are typically set in relation to the base paragraph size. If you choose to overwrite the size of headings in a page, make sure you do so relative sizes and not absolute sizes.

An Example:

In the following example, the html element is set to 120% its normal size. This has the effect of making all of the text on the page larger.

The h1 and h2 elements are set to be 0.5em and 2em, respectively, in relation to the parent element. This allows them to stay in relation to their main elements font size. Essentially, all h1 elements will be half the font size, and all h2 elements will be double the font size.

On the other hand, the h3 element has been set to an absolute value of 40px. Therefore it will not adjust in size when the containing parent element is changed. As you see in the example, whereas the h1 and h2 elements both remain in proportion to the paragraph size, the h3 elements are the exact same size in both div blocks.

Finally, the relative size of parent-1 and parent-2 have been set uniquely so as to demonstrate the ability of relative sizes to maintain their relationships.

{ TODO: }

1. Read pages 274-276 and 279-280 of Chapter 12 in Duckett.
2. Explore this area on our “Go Further With Fonts” page.