CSS Font Properties: The Art of Web Typography
Master the essential CSS properties to control the look, feel, and readability of your text.
Styled Text
Welcome! Today, we'll learn about CSS Font properties to style our text.
/* Let's start styling! */The 'font-family' Property
The font-family property defines the font for an element. It can accept a specific font name (like `"Arial"`) or a generic family name (like `serif`). Always provide a generic family as a fallback.
The 'font-size' Property
The font-size property sets the size of the text. Common units are pixels (`px`) for fixed sizes, or relative units like `em` and `rem` which are great for responsive design.
The 'font-weight' Property
The font-weight property controls the boldness of the font. Values can be keywords like `normal`, `bold`, `bolder`, or numerical values from `100` to `900`.
The 'font-style' Property
The font-style property is used to make text italic. The most common values are `normal` and `italic`.
Practice Zone
Interactive Test 1: Drag & Drop
Arrastra en el orden correspondiente.
Arrastra las opciones:
Completa el código:
Interactive Test 2: Fill in the Blanks
Rellena los huecos en cada casilla.
.title { font-family: ; font-size: ; font-weight: ; }
Practice Example: Code Editor
Write CSS code to apply the `Georgia` font, `24px` size, and a `bold` weight to a paragraph.
A Practical Guide to Modern Web Typography
Great typography is the foundation of great design. It ensures readability and conveys tone. Let's explore some advanced techniques with live previews.
1. Responsive Sizing with `rem` units
Using `rem` units for `font-size` allows your text to scale based on the user's browser settings, improving accessibility. 1rem is equal to the font size of the root (`html`) element.
html {
font-size: 16px; /* Default */
}
p {
font-size: 1.5rem; /* 24px */
}This text is 1.5rem.
2. Using Web Fonts with `@font-face`
The `@font-face` rule allows you to load custom fonts, giving your site a unique look. Be sure to include different formats for browser compatibility.
@font-face {
font-family: 'MyCustomFont';
src: url('path/to/font.woff2');
}
h1 {
font-family: 'MyCustomFont', sans-serif;
}Custom Font
3. Controlling Readability with `line-height`
Proper `line-height` (the distance between lines of text) is critical for readability. A value between 1.4 and 1.8 is typically recommended for body text.
.readable-text {
line-height: 1.6;
}This paragraph has a line height of 1.6, making it easy to read even with multiple lines of text.
Practical Takeaway: Typography is communication. Use it purposefully to create hierarchy, improve readability, and establish a clear brand voice. Mastering `rem` units and `line-height` is key to professional web design.