Font Weight, Style, and Variant
When you visit a website, some text stands out: headlines look bold, quotes are italic, and fancy titles use small caps. These effects aren’t magic — they’re controlled with a few simple CSS properties: font-weight, font-style, and font-variant.
In this beginner-friendly guide, you’ll:
- Learn what each property does in plain language
- See simple CSS code examples you can copy and paste
- Practice changing the look of text step by step
No previous coding experience is needed. If you can copy, paste, and save a file, you’re ready.
Getting Set Up (So You Can Follow Along)
To try the examples, you’ll create a very simple web page on your computer.
- Create a new file on your computer called
fonts-demo.html. - Open it in a text editor (Notepad, VS Code, or any basic editor).
- Paste this starter code into the file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Font Demo</title>
<style>
/* We'll add our CSS here soon */
</style>
</head>
<body>
<h1>Font Demo Page</h1>
<p>This is a normal paragraph of text.</p>
</body>
</html>
- Save the file.
- Double-click
fonts-demo.htmlto open it in your web browser.
You should see a simple page with a heading and a paragraph. Next, we’ll start changing how that text looks.
1. Font Weight: Controlling How Bold Text Looks
Font weight controls how thick or bold your text appears.
- Normal text:
font-weight: normal; - Bold text:
font-weight: bold; - Even bolder or lighter: numbers like
100,400,700(not all fonts support every number, but400is usually normal and700is usually bold).
Example 1: Normal vs Bold vs Extra Bold
Add this CSS inside the <style> tag in your file (replace the comment):
<style>
/* Make the body font easy to read */
body {
font-family: Arial, sans-serif;
}
/* Normal weight paragraph */
.weight-normal {
font-weight: normal; /* regular thickness */
}
/* Bold paragraph */
.weight-bold {
font-weight: bold; /* thicker text */
}
/* Extra bold-style weight using a number */
.weight-700 {
font-weight: 700; /* similar to bold */
}
</style>
Now, change the <body> content to:
<body>
<h1>Font Weight Demo</h1>
<p class="weight-normal">This text is normal weight.</p>
<p class="weight-bold">This text is bold.</p>
<p class="weight-700">This text uses font-weight: 700.</p>
</body>
Save and refresh your browser.
What you should see:
- The first sentence looks regular.
- The second and third sentences look thicker and stand out more.
Try it yourself
Change font-weight: 700; to font-weight: 300; and refresh the page. Does the text look lighter? (It might, depending on the font your browser uses.)
If nothing changes, don’t worry. Some fonts only have normal and bold; that’s still useful to know.
2. Font Style: Normal, Italic, and Oblique
Font style controls whether text is normal, italic, or slanted.
font-style: normal;— straight textfont-style: italic;— usually a more decorative, cursive-like version of the fontfont-style: oblique;— slanted version of the normal font (often looks similar to italic)
Example 2: Normal vs Italic vs Oblique
Add this CSS inside your <style> tag, below the previous rules:
/* Normal style paragraph */
.style-normal {
font-style: normal; /* not slanted */
}
/* Italic style paragraph */
.style-italic {
font-style: italic; /* usually a special italic font */
}
/* Oblique style paragraph */
.style-oblique {
font-style: oblique; /* just slants the regular font */
}
Now update your <body> to add some new paragraphs:
<body>
<h1>Font Weight & Style Demo</h1>
<h2>Weight examples</h2>
<p class="weight-normal">This text is normal weight.</p>
<p class="weight-bold">This text is bold.</p>
<p class="weight-700">This text uses font-weight: 700.</p>
<h2>Style examples</h2>
<p class="style-normal">This text is normal style.</p>
<p class="style-italic">This text is italic style.</p>
<p class="style-oblique">This text is oblique style.</p>
</body>
Save and refresh.
What you should see:
- The italic paragraph has more of a “handwritten” or curved feel.
- The oblique paragraph is simply slanted, and may look close to italic.
Try it yourself
Combine weight and style: change one paragraph to use both italic and bold.
For example, change the CSS for
.style-italicto:.style-italic { font-style: italic; font-weight: bold; /* italic AND bold */ }Refresh and notice how much that text now stands out.
Combining properties is very common in real websites.
3. Font Variant: Small Caps
Font variant is a bit less common, but very cool. The most widely used value is small-caps.
font-variant: normal;— regular textfont-variant: small-caps;— letters appear as capital letters, but smaller for what used to be lowercase
This can make headings or names look more formal and stylish.
Example 3: Normal vs Small Caps
Add this CSS to your <style> tag:
/* Normal variant paragraph */
.variant-normal {
font-variant: normal; /* standard letters */
}
/* Small caps variant paragraph */
.variant-small-caps {
font-variant: small-caps; /* uppercase-style letters with smaller lowercase */
}
Now add these to your <body>:
<h2>Variant examples</h2>
<p class="variant-normal">This Text Uses Normal Variant.</p>
<p class="variant-small-caps">This text uses small caps variant.</p>
Save and refresh.
What you should see:
- The normal variant looks like regular text.
- The small caps text looks like all caps, but some letters are slightly smaller. It has a more “designed” feel.
Note: Small caps work best with fonts that fully support them. If your font doesn’t, the browser will fake it by shrinking capital letters.
Try it yourself
Change .variant-small-caps to also use bold:
.variant-small-caps {
font-variant: small-caps;
font-weight: bold; /* small caps AND bold */
}
Refresh and see how strong that heading-style text becomes.
4. Putting It All Together
You’ve seen font weight, style, and variant separately. Now let’s combine them in a simple, realistic example: a mini “article” layout.
Example 4: Styling a Simple Article
Update your <body> to this:
<body>
<h1 class="page-title">My Mini Article</h1>
<p class="article-meta">By Jane Doe · June 1, 2025</p>
<p class="article-intro">
Learning how to control font weight, style, and variant helps you make
your text easier to read and more attractive.
</p>
<p class="article-body">
With a few simple CSS rules, you can highlight important words,
create elegant headings, and give your pages a professional feel.
</p>
</body>
Then, add these styles at the bottom of your <style> tag:
/* Page title: bold and small caps for a strong look */
.page-title {
font-weight: bold;
font-variant: small-caps;
}
/* Meta info: lighter and italic, so it's visible but subtle */
.article-meta {
font-weight: 300; /* if unsupported, it will look similar to normal */
font-style: italic; /* slanted text */
font-size: 0.9rem; /* a bit smaller (optional) */
}
/* Intro: slightly bolder to stand out from body text */
.article-intro {
font-weight: 600; /* semi-bold if the font supports it */
}
/* Body: normal, easy to read */
.article-body {
font-weight: normal;
font-style: normal;
font-variant: normal;
}
Save and refresh.
What you should see:
- The title looks bold and formal thanks to small caps.
- The author line is softer, lighter, and italic.
- The intro paragraph feels slightly stronger than the body text.
You’ve just used font weight, style, and variant to create a simple, readable design.
Quick Recap and What’s Next
You’ve taken important first steps in controlling how text looks with CSS:
- Font weight changes how thick text appears (like normal or bold).
- Font style changes whether text is straight, italic, or slanted (oblique).
- Font variant lets you use small caps for a more stylish effect.
- You can combine these properties to create clear headings, subtle meta text, and readable paragraphs.
Learning to code can feel like a lot at first, but every small experiment you try builds real skill. You already created a page, wrote CSS, and changed how your text looks — that’s progress.
What’s next?
- Play more with the values: try different weights (
400,500,700), and mix italic with small caps. - Look up
font-familyandline-heightto improve your typography even more. - Create a new page where you design a “poster” using only text styles.
Keep experimenting, keep saving and refreshing, and don’t worry if things don’t look perfect right away. Every change teaches you something new.
