In this lesson, we’ll focus on typography, the art of arranging text on a page. In particular, we’ll look at how to style fonts with CSS to make them legible and appealing and how to add external fonts to your web pages.
Some of the most important information a user will see on a web page will be textual. Styling text to make page content accessible and engaging can significantly improve user experience. Let’s begin!
If you’ve ever used a formatted word processor, chances are that you probably also used a feature that allowed you change the “type of font” you were typing in. The phrase “type of font” refers to the technical term typeface, or font family.
To change the typeface of text on your web page, you can use the font-family
property.
h1 { font-family: Garamond; }
In the example above, the font family for all main heading elements has been set to Garamond
.
When setting typefaces on a web page, keep the following points in mind:
h1 { font-family: "Courier New"; }
You’ve probably noticed bold text in websites you use, especially in news or text-heavy sites. It’s common to bold important headings or keywords. In CSS, we can style bold text with the font-weight
property.
If we want to bold
text in a web page, we can set the font-weight
to bold
.
p { font-weight: bold; }
If we want to ensure that text is not bold, we can set the font-weight
to normal
.
p { font-weight: normal; }
By default, the font-weight
of most text elements is set to normal
. Some elements, like headers, have built-in bold styling. A good approach is to check to see if the the text element has any default styling, and use the font-weight
property accordingly.
The font-weight
property can also be assigned a number value to style text on a numeric scale ranging from 100 to 900. Valid values are multiples of 100 within this range such as 200
or 500
.
When using numeric weights, there are a number of default font weights that we can use:
400
is the default font-weight
of most text.700
signifies a bold font-weight
.300
signifies a light font-weight
.Let’s take a look at an example of how numeric fonts are used.
header { font-weight: 800; } footer { font-weight: 200; }
Here, the header would appear as a deep bold, while the footer would appear rather light.
It’s important to note that not all fonts can be assigned a numeric font-weight
. You can look up the font you are using to see which font-weight
values are available.
You can also italicize text with the font-style
property.
h3 { font-style: italic; }
The italic
value causes text to appear in italics. The font-style
property also has a normal
value which is the default.
You can also increase the spacing between words in a body of text, technically known as word spacing.
To do so, you can use the word-spacing
property:
h1 { word-spacing: 0.3em; }
The default amount of space between words is usually 0.25em
. In the example above, the word spacing is set to 0.3em
, which represents an increase of only .05em
in word spacing.
It’s not common to increase the spacing between words, but it may help enhance the readability of bolded or enlarged text. Note, again, that the preferred unit is ems.
You’ve learned how to increase the spacing between lines of text and words, but it’s possible to get even more detailed: increasing the spacing between individual letters.
The technical term for adjusting the spacing between letters is called tracking. Tracking can be adjusted with the letter-spacing
property in CSS.
h1 { letter-spacing: 0.3em; }
Like word spacing, it’s not common to increase the tracking in text, but sometimes it enhances the readability of uppercase text.
Text can also be styled to appear in either all uppercase or lowercase with the text-transform
property.
h1 { text-transform: uppercase; }
The code in the example above formats all <h1>
elements to appear in uppercase
, regardless of the case used for the heading within the HTML code. Alternatively, the lowercase
value could be used to format text in all lowercase.
Since text can be directly typed in all uppercase or lowercase within an HTML file, what is the point of a CSS rule that allows you to format letter case?
Depending on the type of content a web page displays, it may make sense to always style a specific element in all uppercase or lowercase letters. For example, a website that reports breaking news may decide to format all <h1>
heading elements such that they always appear in all uppercase, as in the example above. It would also avoid uppercase text in the HTML file, which could make code difficult to read.
Text can also be styled to appear in either all uppercase or lowercase with the text-transform
property.
h1 { text-transform: uppercase; }
The code in the example above formats all <h1>
elements to appear in uppercase
, regardless of the case used for the heading within the HTML code. Alternatively, the lowercase
value could be used to format text in all lowercase.
Since text can be directly typed in all uppercase or lowercase within an HTML file, what is the point of a CSS rule that allows you to format letter case?
Depending on the type of content a web page displays, it may make sense to always style a specific element in all uppercase or lowercase letters. For example, a website that reports breaking news may decide to format all <h1>
heading elements such that they always appear in all uppercase, as in the example above. It would also avoid uppercase text in the HTML file, which could make code difficult to read.
No matter how much styling is applied to text (typeface, size, weight, etc.), text always appears on the left side of the browser.
To move, or align, text, we can use the text-align
property.
h1 { text-align: right; }
The text-align
property can be set to one of the following three values:
left
– aligns text to the left hand side of the browser.center
– centers text.right
– aligns text to the right hand side of the browser.Later in the course, you’ll learn exactly how the browser positions HTML elements by default, which will help you understand how the browser “aligns” text, since “align” is a relative term. For now, it’s enough to know that text can be moved to the left, center, or right side of the web page.
Another property that we can set for text is line-height
. This property modifies the leading of text.
The diagram to the right helps illustrate exactly what the terms “leading” and “line height” mean.
We often modify line-height
to make text on a web page easier to read. When text is styled to appear larger, the vertical spacing between lines of text can decrease, creating text that is difficult to read, particularly in paragraphs.
We can use the line-height
property to set how tall we want the line containing our text to be, regardless of the height of the text. Line heights can take one of several values:
1.2
. This number is an absolute value that will compute the line height as a ratio of the font size.12px
. This number can be any valid CSS unit, such as pixels, percents, ems, or rems.Generally, the unitless ratio value is the preferred method, since it is responsive and based exclusively on the current font size. In other words, if we change the font size, a unitless line-height
would automatically readjust, whereas the pixel value would remain static.
p { line-height: 1.4; }
You’ve learned a lot of properties to modify text on a web page!
In the next exercise, you’ll set some text to be serif and some text to be sans-serif. What exactly do these words mean?
What happens when a stylesheet requires a font that is not installed on a user’s computer? Most computers have a small set of typefaces pre-installed. This small set includes serif fonts like Times New Roman and sans-serif fonts like Arial.
These pre-installed fonts serve as fallback fonts if the stylesheet specifies a font which is not installed on a user’s computer.
To use fallback fonts, the following syntax is required:
h1 { font-family: "Garamond", "Times", serif; }
The CSS rule above says:
<h1>
elements on the web page.The fonts specified after Garamond are the fallback fonts (Times
, serif
). Fallback fonts help ensure a consistent experience for the diverse audience of users that visit a site.
What happens when a stylesheet requires a font that is not installed on a user’s computer? Most computers have a small set of typefaces pre-installed. This small set includes serif fonts like Times New Roman and sans-serif fonts like Arial.
These pre-installed fonts serve as fallback fonts if the stylesheet specifies a font which is not installed on a user’s computer.
To use fallback fonts, the following syntax is required:
h1 { font-family: "Garamond", "Times", serif; }
The CSS rule above says:
<h1>
elements on the web page.The fonts specified after Garamond are the fallback fonts (Times
, serif
). Fallback fonts help ensure a consistent experience for the diverse audience of users that visit a site.
With the number of fonts available with modern typography, it is unrealistic to expect users to have all fonts installed on their computers. New fonts are often centralized in directories made available for public use. We refer to these fonts as non-user fonts.
Google Fonts is one such directory of thousands of open-source fonts, available for free use. Google Fonts gives us a way to retrieve the link for a single font, multiple fonts, or multiple fonts with the font-weight
and font-style
properties.
When we have the link to the font of our choice, we can add the font to the <head>
section of the HTML document, using the <link>
tag and the href
.
Let’s take a look at a few examples:
1. A single linked font, using Droid Serif
as an example:
<head> <link href="https://fonts.googleapis.com/css?family=Droid+Serif" type="text/css" rel="stylesheet"> </head>
2. Multiple linked fonts, using the Droid Serif
and Playfair Display
fonts as an example:
<head> <link href="https://fonts.googleapis.com/css?family=Droid+Serif|Playfair+Display" type="text/css" rel="stylesheet"> </head>
3. Multiple linked fonts, along with weights and styles. Here Droid Serif
has font weights of 400
, 700
, and 700i
, while Playfair Display
has font weights of 400
, 700
, and 900i
:
<head> <link href="https://fonts.googleapis.com/css?family=Droid+Serif:400,700,700i|Playfair+Display:400,700,900i" rel="stylesheet"> </head>
Once a font is linked, we can create CSS selectors to target elements, just as we do with other fonts.
There are other ways to link non-user fonts that don’t require the use of the <link>
tag in the HTML document. CSS offers a way to import fonts directly into stylesheets with the @font-face
property.
To load fonts with the @font-face
property:
/* latin */
. Some of the latin rules are on separate lines. You will need each of these.It is important to stress the need to copy the @font-face
rules to the top of the stylesheet for the font to load correctly in the project.
We can then use the fonts in the stylesheets as you would use any other font. Let’s practice loading an external font in our stylesheets using the @font-face
property, and using the font to style our page.
While Google Fonts and other resources can broaden font selection, you may wish to use an entirely different font or abstain from using a font from an external service.
We can modify our @font-face
rule to use local font files as well. We can supply the user with the desired font family and host it along with our site instead of depending on a different site.
@font-face { font-family: "Roboto"; src: url(fonts/Roboto.woff2) format('woff2'), url(fonts/Roboto.woff) format('woff'), url(fonts/Roboto.tff) format('truetype'); }
Here, you’ll notice:
As of now .woff2
appears to be the way of the future, due to greatly reduced file sizes and improved performance, but many browsers still don’t support it. There are lots of great sources to find fonts to use locally, such as Font Squirrel.
Great job! You learned how to style an important aspect of the user experience, typography.
Let’s review what you’ve learned so far:
font-weight
property.font-style
property.line-height
property.<link>
tag or the @font-face
property.@font-face
property and the path to the font’s source.word-spacing
property changes how far apart individual words are.letter-spacing
property changes how far apart individual letters are.text-align
property changes the horizontal alignment of text.