Using Fonts
Learning objectives
- Knows one broad categorization of fonts.
- Knows how to set fonts in styles.
- Knows how to use fonts retrieved from an external service.
- Knows how font sizes are defined.
Fonts are used to define the style of the text that is shown on the page. Fonts can be broadly divided into four main categories: fonts with small line or embellishment at the end of each font (serif), fonts without the small line or embellishment (sans-serif), script-style fonts (e.g. cursive), and fonts with the same width (monospace).
For example, Times New Roman is a serif font, Arial is a sans-serif font, Comic Sans is a script-like font (but also sans-serif), and Courier New is a monospace font.
Setting a font
Setting a font is done using the font-family style. Font family defines a family of fonts that will be used for the element; a family of fonts can contain one or more fonts, which are separated using commas. Typically, when defining a font family, multiple fonts are defined and the font that will be used in the browser is determined by the browser based on the available fonts -- fonts are loaded from the operating system, unless the web page explicitly gives an address where the fonts can be loaded from.
The example below defines the font family as "Times New Roman", serif. If Times New Roman is found, it will be used. If Times New Roman is not found, a font from the serif family is used. As you notice from the example below, font names with spaces can be written inside quotes (but work also without quotes).
body {
font-family: "Times New Roman", serif;
}When browsing web pages, one may observe differences in the used fonts. For example, headings might use sans-serif fonts while the body text might use serif fonts. The following page shows an example of this -- the body text is Times New Roman (if available), while the headings use Arial or some other sans-serif font.
body {
font-family: "Times New Roman", serif;
}
h1,h2 {
font-family: Arial, sans-serif;
}<body>
<h1>Welcome!</h1>
<p>We are now looking into defining colors.</p>
<h2>Subtitle</h2>
<p>Headings (h1,h2) on this page use sans-serif fonts,
while the body text uses serif fonts.</p>
</body>Retrieving a font
If a font that is defined in a style is not found from the operating system, another font is chosen. One can, however, include links to fonts to the web pages, which leads to the situation where the browser downloads the fonts that are used on the page.
There are several online services that provide support for choosing and using fonts. One of them is Google Fonts. Google Fonts provides a list of fonts that can be searched: by clicking on a font in the service and choosing "Select this style", the font will be added to a list of fonts that can be embedded as a part of a website.
For example, a font called "Permanent Marker" can be added to a page by adding it at the end of a HTML document or within the head element, and adding the fonts within it as a part of the style definition. In the example below, heading (h1 and h2) use he font "Permanent Marker" (or a cursive font if not available), while the rest of the site uses the font "Times New Roman" (or sans if not available).
<h1>Welcome!</h1>
<p>We are now looking into defining colors.</p>
<h2>Subtitle</h2>
<p>Headings (h1,h2) on this page use Permanent Marker
(or cursive fonts), while the body text uses Times
New Roman (or serif fonts).</p>
<link
href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap"
rel="stylesheet">body { font-family: "Times New Roman", serif; }
h1,h2 { font-family: "Permanent Marker", cursive; }As observed above, the link element can be used for retrieving content. The rel attribute tells what sort of content is being retrieved, and the href attribute tells from where the content should be retrieved from. While in the previous example the element has been added at the end of the page, it is more common to add it into the head element. In this case, given that the styles would be defined as a part of the page, the above HTML document could look as follows.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
body { font-family: "Times New Roman", serif; }
h1,h2 { font-family: "Permanent Marker", cursive; }
</style>
<link
href="https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap"
rel="stylesheet">
</head>
<body>
<h1>Welcome!</h1>
<p>We are now looking into defining fonts.</p>
<h2>Subtitle</h2>
<p>Headings (h1,h2) on this page use Permanent Marker
(or cursive fonts), while the body text uses Times
New Roman (or serif fonts).</p>
</body>
</html>Font sizes
Font sizes are defined using the style font-size. Font size can be set as absolute (using pixels, e.g. 16px) or relative (using e.g. rem; 1rem). While the absolute font size is -- as the name implies -- absolute, the relative font size (rem) depends on the root font size or, if it has not been defined, the browser settings. In browsers, the typical default size of a font is 16px. The default font size corresponds to one rem unit.
In the example below, we define two font sizes. The first (class normal) defines the normal font size, which is one rem unit. The second (class larger) defines a larger font size, which is 1.25 times the rem unit.
.normal { font-size: 1rem; }
.larger { font-size: 1.25rem; }Setting root font size is done by defining a font size to the html element. In the example below, we set the root font size as 20px, which is somewhat larger than the font size used in browsers by default. The classes normal and larger, similar to the h1 element with no explicitly set font size, scale based on the font size defined to the root of the page. In the example below, the size of the font in the normal class is 20 pixels, while the size of the font in the larger class is 25 pixes.
html { font-size: 20px; }
.normal { font-size: 1rem; }
.larger { font-size: 1.25rem; }As previously mentioned, the h1 font size changed as well. If the font size defined for the HTML element would cascade into all elements within it, the font size in the h1 element should also be 20 pixels. This won't happen, however. The font size of each element is relative to the root by default.