Fonts and text styling

CSS provides extensive control over the appearance of text on your web pages. This section covers fundamental font properties and text styling techniques.

1. Font Properties

These properties control the basic characteristics of the text.

font-family: Specifies the font to be used. You can provide a list of fonts as fallbacks.
- Example: font-family: Arial, Helvetica, sans-serif; (Tries Arial, then Helvetica, then a generic sans-serif font)
- Generic Font Families:
  - serif: Fonts with serifs (small decorative strokes at the ends of letters). e.g., Times New Roman, Georgia
  - sans-serif: Fonts without serifs. e.g., Arial, Helvetica
  - monospace: Fonts where all characters have the same width. e.g., Courier New, Consolas
  - cursive: Fonts that resemble handwriting. e.g., Brush Script MT
  - fantasy: Decorative or unusual fonts. e.g., Impact
font-size: Sets the size of the font.
- Units:
  - px (pixels): Absolute size.
  - em: Relative to the font size of the parent element. 1em is equal to the parent's font size.
  - rem: Relative to the font size of the root element (<html>).
  - % (percentage): Relative to the parent element's font size.
  - pt (points): Commonly used in print.
- Example: font-size: 16px; or font-size: 1.2em;
font-weight: Specifies the boldness of the font.
- Values:
  - normal: Default.
  - bold: Makes the text bold.
  - bolder: Bolder than the parent element.
  - lighter: Lighter than the parent element.
  - Numeric values: 100 to 900 (e.g., font-weight: 700; is equivalent to bold).
font-style: Specifies the style of the font.
- Values:
  - normal: Default.
  - italic: Italicizes the text.
  - oblique: Slants the text.
font-variant: Controls stylistic features of the font. Less commonly used.
- small-caps: Renders the text in small capital letters.
font-stretch: Controls the width of the font. Less commonly used.
- Values: normal, condensed, expanded.

2. Shorthand `font` Property

You can combine multiple font properties into a single font property. The order is important:

font: font-style font-variant font-weight font-size/line-height font-family;

Example:

font: italic bold 16px/1.5 Arial, sans-serif;

3. Text Styling Properties

These properties control aspects of the text beyond the basic font.

color: Sets the color of the text.
- Values: Hex codes (#RRGGBB), RGB values (rgb(red, green, blue)), HSL values (hsl(hue, saturation, lightness)), color names (e.g., red, blue).
text-align: Specifies the horizontal alignment of the text.
- Values: left, right, center, justify.
line-height: Sets the height of each line of text.
- Values: Number (multiplier of the font size), length (e.g., 1.5em, 20px), percentage.
letter-spacing: Adjusts the space between letters.
- Values: Length (e.g., 2px, 0.1em).
word-spacing: Adjusts the space between words.
- Values: Length (e.g., 5px, 0.2em).
text-decoration: Adds decorations to the text.
- Values: none, underline, overline, line-through.
text-transform: Changes the capitalization of the text.
- Values: uppercase, lowercase, capitalize, none.
text-shadow: Adds a shadow to the text.
- Syntax: text-shadow: horizontal-offset vertical-offset blur-radius color;
- Example: text-shadow: 2px 2px 5px red;
word-break: Specifies how words should break when reaching the end of a line.
- Values: normal, break-all, keep-all, break-word.
word-wrap: Allows long words to be broken and wrapped to the next line. (Deprecated, use overflow-wrap instead)
- Values: normal, break-word.
overflow-wrap: Allows long words to be broken and wrapped to the next line.
- Values: normal, break-word.

4. Web Fonts

Using custom fonts beyond the standard web-safe fonts.

@font-face rule: Allows you to define custom fonts to be used on your website.

@font-face {
  font-family: 'MyCustomFont';
  src: url('mycustomfont.woff2') format('woff2'),
       url('mycustomfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

body {
  font-family: 'MyCustomFont', sans-serif;
}

Google Fonts: A popular service providing a large library of free web fonts. You can easily embed fonts using a <link> tag in your HTML or using the Google Fonts API.

5. Important Considerations

Readability: Choose fonts and styles that are easy to read.
Accessibility: Ensure sufficient contrast between text and background colors for users with visual impairments.
Performance: Using too many custom fonts can slow down your website. Optimize font files and use only the necessary font weights and styles.
Responsiveness: Consider how font sizes will scale on different screen sizes. Using relative units like em and rem can help.