CSS Fonts

In web design, typography is more than just making text look pretty; it’s about readability, brand identity, and user experience. CSS provides a robust set of properties to control every aspect of how your text appears on the screen. Below, we’ll break down the essential font properties every developer should master.

• Font Family (font-family): This property defines the typeface used for your text. Because you can't always guarantee a user has a specific font installed on their device, we provide a "font stack"—a comma-separated list of fallback fonts.

/* The browser tries Arial first, then Helvetica, then any default sans-serif font */
body {
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
}

• Font Size (font-size): This determines how large your text appears. While px (pixels) is common for fixed layouts, modern web development favors relative units like em or rem for better accessibility.

h1 {
    font-size: 2.5rem; /* 2.5 times the root font size */
}

p {
    font-size: 16px; /* A standard baseline for body text */
}

• Font Style (font-style): Most commonly used to turn regular text into italics.

.italic-text {
    font-style: italic;
}

• Font Weight (font-weight): This controls the thickness of the characters. While you can use keywords like bold, using numeric values (100 to 900) gives you finer control if the font file supports multiple weights.

h2 {
    font-weight: 700; /* Bold */
}

.light-text {
    font-weight: 300; /* Light/Thin */
}

• Font Variant (font-variant): This is a specialized property often used for headings or UI labels to create a unique look using small capital letters.

.label {
    font-variant: small-caps;
}

• Text Transform (text-transform): This handles capitalization automatically. It is particularly useful for buttons or navigation links where you want a consistent look regardless of how the text was typed in the HTML.

.button {
    text-transform: uppercase; /* Converts "Submit" to "SUBMIT" */
}

.heading {
    text-transform: capitalize; /* Capitalizes the first letter of each word */
}

Line Height (line-height): Often called "leading" in traditional print, this property controls the vertical space between lines of text. Proper line height is critical for preventing eye strain in long-form articles.

p {
    line-height: 1.6; /* A unitless value of 1.5 to 1.7 is ideal for readability */
}

• Text Decoration (text-decoration): Used to add or remove visual lines on text. It is most commonly used to style hyperlinks.

a {
    text-decoration: none; /* Removes the default underline from links */
}

.price-old {
    text-decoration: line-through; /* Useful for showing a discount */
}

• Letter Spacing (letter-spacing): This adjusts the horizontal space between characters (tracking). It’s often used to make large headings look more sophisticated or to improve the readability of all-caps text.

h1 {
    letter-spacing: -0.5px; /* Tightens the heading for a modern look */
}

.wide-text {
    letter-spacing: 2px;
}

By combining these properties, you can transform a basic document into a professional, polished interface. Remember that typography is a balance of aesthetics and functionality—always prioritize readability for your users.