CSS Font Properties

CodeVigyaan is a free education platform offering programming tutorials, study materials, notes, and real project ideas for college student.

CSS Font Properties are that determines how your text appears on a screen in terms of size, weight and character. They are used to style the type, but are in contrast to text styling, which adds layout and space. The right font can make a website that looks boring, look elegant.

In this tutorial, we will go over the several important Font Properties that any developer should know to have clean and appealing text.

1. Choosing Typefaces with CSS Font Properties (font-family)

Font, family The font, family property is the central property of all Font Properties. It specifies the typeface.

Because not every user has the same fonts installed, we use a fallback system:

Example:
font-family: “Roboto”, Arial, sans-serif;

How it works: first the browser will load “Roboto” . When load fail, browser will default to “Arial”. When load also fail, browser will default to any sans, serif style.

2. Setting Text Size with CSS Font Properties (font-size)

The font, size property dictates how large your text will be. In most of today‘s Font Properties three most common units are:

px (Static): Offers precise control but isn’t ideal for accessibility.
em (Relative): Sizes text relative to its parent element.
rem (Relative): scale with the root (browser) settings and is preferrred for responsive design and accessibility.

3. Controlling Thickness with CSS Font Properties (font-weight)

The font, weight property is used for the boldness of your type. It can be either words to describe the weight of the font or numbers:

normal (400): normal reading weight.
bold (700): Strong emphasis, often used for headings.
lighter / bolder: Adjusts weight relative to the parent element.
100–900: Provides detailed control if the chosen font supports multiple weights.

4. Adding Style with CSS Font Properties (font-style)

This one is primarily used to italicize text.

normal: Normal text. This can be used to indicate default upright text.
italic: Text tilted in a sloped fashion, often used for quotes or headings.
oblique: Like italics, but mechanically inclined rather than using a dedicated italics style.

5. Using the Shorthand for CSS Font Properties (font)

Just as you can group together several font properties on one line to make your style sheet more clear, you can also bring together the font properties themselves to make it shorter.

Syntax:
font: [style] [weight] [size] [family];

Example:
font: italic bold 18px Arial, sans-serif;

Practical Example: Styling a Professional Article Header

Here’s how these Font Properties come together in a stylesheet:

CSS

/* Styling a blog heading using CSS Font /
.main-heading {
font-family: ‘Open Sans’, Helvetica, sans-serif;
font-size: 2.5rem; / Large, responsive size /
font-weight: 800; / Extra bold for impact */
font-style: normal;
color: #222;
}

.sub-text {
font-family: Georgia, serif;
font-size: 1.1rem;
font-weight: 400;
font-style: italic; /* Elegant sub-text style */
}

alic;   /* Makes the sub-text look elegant */
}