Typography and Fonts in CSS
CSS offers a variety of properties to control the appearance of text, including font selection, size, weight, line height, and more.
This chapter will guide you through the basics of typography and fonts in CSS.
Let's kick off by looking at different font properties you can use to customize your text:
Font Family
The font-family property specifies the typeface to be used for text. You can list multiple font families as fallback options in case the first one is not available on the user's system. Generic family names like serif, sans-serif, and monospace are used as the last fallback.
.element {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
Font Size
The font-size property sets the size of the text. You can use absolute units (px) for fixed sizes or relative units (em, rem, %) for responsive sizes.
.element {
font-size: 16px; /* Fixed size */
}
.relative-element {
font-size: 1.2em; /* Relative to parent element's font size */
}
Font Weight
The font-weight property specifies the thickness of the font. Common values are normal, bold, and numbers from 100 to 900 (in increments of 100).
.element {
font-weight: bold;
}
.another-element {
font-weight: 700;
}
Font Style
The font-style property defines the text style, such as normal, italic, or oblique.
.element {
font-style: italic;
}
Text Transform
The text-transform property controls the capitalization of text. Common values are none, capitalize, uppercase, and lowercase.
.element {
text-transform: uppercase;
}
Text Alignment
The text-align property specifies the horizontal alignment of text. Values include left, right, center, and justify.
.element {
text-align: center;
}
Line Height
The line-height property sets the height of a line of text. It can be defined using a number, length, or percentage. A value of 1.5 means 150% of the font size.
.element {
line-height: 1.5;
}
Letter Spacing
The letter-spacing property adjusts the space between characters. Positive values increase the spacing, while negative values decrease it.
.element {
letter-spacing: 0.1em;
}
Text Decoration
The text-decoration property adds decorative lines to text. Common values are none, underline, overline, and line-through.
.element {
text-decoration: underline;
}
Using Google Fonts
Google Fonts is a popular resource for free web fonts. To use a Google Font, you need to include a link to the font in your HTML and specify it in your CSS.
Custom Fonts
While system fonts (like Arial, Times New Roman, and Verdana) are universally available, custom fonts can make your website stand out.
This section will cover using hosted fonts (with Google Fonts as an example) and custom fonts in your CSS.
Google Fonts
Google Fonts is a popular resource for free web fonts that are easy to integrate into your web projects.
Step 1: Choose a Font Visit Google Fonts and browse the available fonts. Once you find a font you like, click on it to view its details.
Step 2: Include the Font in Your HTML
Google Fonts provides a link tag to add to your HTML's <head> section. For example, to use the "Roboto" font:
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
Step 2: Alternative Include in Your CSS
The above is my preferred way of working, but you can also use a directive called @import to import the fonts within your stylesheet:
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@400;700&display=swap');
Step 3: Apply the Font in Your CSS Specify the font family in your CSS:
body {
font-family: 'Roboto', sans-serif;
}
Custom Fonts
If you have custom fonts (such as a specific font for branding), you can include them in your web project.
Custom fonts can be in various formats such as TTF, OTF, WOFF, or WOFF2. The @font-face rule allows you to define and use these fonts in your CSS.
If you want to follow along, grab some fonts from a free font site like DaFont and swap out the font name with the relevant details.
Step 1: Include the Font Files
First, ensure you have the font files uploaded to your project directory. For this example, we'll assume the font files are in a folder called fonts.
Step 2: Define the Font Using @font-face
Use the @font-face rule in your CSS file to define the custom font:
@font-face {
font-family: 'MyCustomFont'; /* Name your font */
src: url('fonts/MyCustomFont.woff2') format('woff2'),
url('fonts/MyCustomFont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
Step 3: Apply the Custom Font in Your CSS Now you can use the custom font in your CSS:
body {
font-family: 'MyCustomFont', sans-serif;
}
For a full example of using a custom font, here's a CodePen:
Practice using these typography properties to become comfortable with their application and effects.
