My Web Training

Understanding Text vs. Font

In web design, we often talk about “text styles” and “font styles” — and while they sound similar, they focus on different aspects of how content appears on a page. Text refers to the content itself: the words, sentences, and structure. Font refers to the visual design used to display that text — including typeface, size, and weight.

This article covers both: how to choose and style fonts using CSS, and how to control the spacing, alignment, and appearance of your text for better readability and design impact.

Common Font Properties

CSS gives you fine-grained control over how text appears on a web page. Below are key properties grouped by purpose — with short notes to help you choose the right styles for different situations.

Font Family

There are four major font categories you’ll encounter in web design:

Serif

(e.g., Times New Roman) – Traditional, print-style fonts with small strokes at the ends of letters. Good for formal or academic use.

Sans-serif

(e.g., Arial, Helvetica) – Clean and modern with no end strokes. Easier to read on screens and commonly used for body text.

Handwriting (Cursive)

(e.g., Brush Script MT) – Script-like fonts that mimic handwriting. Best for accents, not paragraphs. Can be playful or elegant, depending on the font.

Decorative (Display)

(e.g., Impact) – Unconventional or artistic fonts. Use sparingly for logos, headers, or posters where visual flair is needed.

Choose your font-family carefully and include a fallback stack to ensure your text renders consistently across browsers and devices. For example, if your primary font isn’t available, the browser will fall back to the next one in the list.

🧠 Pro Tip: Use a consistent font strategy across your site. Avoid mixing fonts from the same category — like Times New Roman and Georgia — as their subtle differences can create visual dissonance. Instead, define a simple font hierarchy:

• Top-level headings: Decorative or Handwriting font (sparingly)
• Subheadings: Serif font for structure and contrast
• Body text: Sans-serif font for readability

This approach keeps your design clear, professional, and easier for users to read.

/* Prioritize preferred fonts and end with a generic fallback */
font-family: Arial, Geneva, sans-serif;
font-family: "Times New Roman", Georgia, serif;

Font Size

Font size defines how large your text appears. Use larger sizes for headings to create a visual hierarchy. For accessibility, use relative units like em, %, or rem instead of fixed pixels — they adjust better across devices.

font-size: 1.2em;
font-size: 150%;
font-size: large;
font-size: 16px;

Font Weight

Use font-weight to control how thick or bold your text appears. Bold text is great for headers and emphasis — but use it intentionally. You can use named values like normal and bold, or numeric values ranging from 100 (thin) to 900 (extra bold). Lighter weights like 200 or 300 are often used for sleek, modern headings — but not all fonts support every weight.

font-weight: normal;
font-weight: bold;
font-weight: 300; /* Light */
font-weight: 400; /* Normal */
font-weight: 600; /* Semi-bold */
font-weight: 700; /* Bold */

💡 Tip: Not all fonts support every weight. If the weight you request isn’t available, the browser will use the closest match.

Font Style

The font-style property applies italics or oblique styling to text. This is useful when you want to control the appearance of elements consistently through CSS — like making all blockquotes italic or styling a custom class. Common values are normal, italic, and oblique.

font-style: italic;
font-style: normal;

However, if you're emphasizing a specific word or phrase in your content, use semantic HTML like <em> instead. That tells browsers and assistive tech that the content is important — and the browser will style it appropriately (often with italics).

🧠 Best Practice: Use <em> or <strong> for meaning and font-style for consistent styling across components. Semantic tags improve accessibility and help screen readers convey emphasis to users.

Using the font Shorthand

Instead of writing each font property separately, you can combine several into one line using the font shorthand. This sets font-style, font-variant, font-weight, font-size, line-height, and font-family in a single rule. Order matters, and at minimum you must include font-size and font-family.

/* Full shorthand: font-style font-variant font-weight font-size/line-height font-family */
font: italic small-caps bold 1.2em/1.5 Arial, sans-serif;

/* Basic shorthand */
font: 1em Helvetica, sans-serif;

Understanding font Shorthand Order

The font shorthand lets you combine multiple font-related properties into one rule — but the order matters. You can include any of the optional values, but you must always include font-size and font-family in the correct order. If used, line-height must follow font-size and be separated with a slash /.

Exact order:

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

Examples:

/* Just style, size, and family */
font: italic 1.1em Georgia, serif;

/* Include weight */
font: bold 1em Helvetica, sans-serif;

/* Include line-height */
font: normal small-caps 1em/1.4 Arial, sans-serif;

If the order is incorrect or a required value is missing, the browser may ignore the entire rule. When in doubt, start simple and build up carefully.

Applying Font Styles with a CSS Class

Once you’ve defined font styles in your CSS, you can apply them to specific elements using a class or element selector. This approach helps you keep font styling consistent across your page and makes your CSS easier to manage. For example:

/* Define a font style for callout boxes */
.callout-text {
  font: italic 1.1em Georgia, serif;
  color: #333;
}

<p class="callout-text">This paragraph will have the .callout-text rules applied.</p>

Example Paragraph with font rule applied

This paragraph uses a Georgia serif font with italic style and slightly larger text.

Common Text Properties

Now that you’ve styled your fonts, it’s time to fine-tune how the text behaves and appears on the page. These CSS properties help you control layout, spacing, alignment, and emphasis — all of which affect readability and overall user experience. Small changes here can make a big difference in how professional your site feels.

Text Transform and Variants

Control capitalization and stylistic effects with text-transform and font-variant. For example, uppercase text works well for buttons or headings, while small-caps can give a formal tone.

text-transform: uppercase;
font-variant: small-caps;

uppercase text
Small Caps Text

Text Decoration

The text-decoration property adds visual emphasis to text. It's commonly used to underline links, strike through outdated content, or create stylistic effects. You can use one or more values together.

Available options:

• none – Removes any decoration
• underline – Adds a line below the text
• overline – Adds a line above the text
• line-through – Adds a line through the middle

text-decoration: underline;
text-decoration: line-through;
text-decoration: underline overline;
text-decoration: none;

⚠️ Accessibility Note: Underlines are strongly associated with links on the web. Avoid underlining non-link text, as it can confuse users and reduce clarity. Instead, use bold or color changes for emphasis when needed.

Text Alignment

The text-align property controls how text and inline elements are aligned within their parent container. This is especially useful in navigation bars, headings, and centered content blocks.

Available options:

• left – Aligns content to the left (default)
• right – Aligns content to the right
• center – Centers the content horizontally
• justify – Spreads the text evenly across the line

text-align: left;
text-align: center;
text-align: justify;

text-align affects the content inside a container — not the position of the container itself. To center a whole section, use layout techniques like margin: auto or flexbox.

💡 Tip: Don’t use text-align: center to center page elements — it only works on text and inline items inside the element. And please don't apply text-align: center to the entire page in an attempt to center your content. This looks very awkward and can lead to a poor user experience.

Spacing and Indentation

Good typography often comes down to spacing. Use these properties to create breathing room around letters, words, and paragraphs for better legibility.

letter-spacing: 0.1em;
word-spacing: 0.25em;
text-indent: 2em;
line-height: 1.5;

🧠 Pro Tip: Use a line-height of around 1.4 to 1.6 for body text. This range improves readability and gives your content a more open, professional feel. Text that’s too tight or too loose can make your page look unpolished or hard to read.

Text Color

Color sets tone and emphasizes key areas — but always ensure enough contrast for readability. Use color names, HEX codes, or RGB values.

color: red;
color: #FF0000;
color: rgb(255, 0, 0);

⚠️ Accessibility Tip: Choose text colors with care. Your text must have strong contrast with the background to remain readable — avoid pale grays on white or bright colors like yellow on light tones. Also steer clear of jarring color combinations like red and blue together, which can cause visual vibration or eye strain. When using color to convey meaning (such as errors in red), always pair it with another cue like an icon or bold label. Use tools like the WAVE Accessibility Checker to test your choices.

Custom Fonts and Visual Effects

Beyond standard fonts and layout, CSS lets you add personality to your typography using custom font files and visual effects like shadows. These tools should be used with intention — great design balances creativity with clarity.

Using the @font-face Rule

Want to use a custom font that's not installed on a user's computer? The @font-face rule lets you host font files in your project and load them through CSS. This gives you greater design flexibility while keeping your typography consistent across browsers.

fontname

A name you choose for the font. You'll use this name in your font-family rules.

.ttf, .woff, .svg, .eot

Different file types to support different browsers. Include as many formats as possible for compatibility.

@font-face {
font-family: "MyCustomFont";
src: url('fonts/myfont.woff') format("woff"),
	url('fonts/myfont.ttf') format("truetype"),
	url('fonts/myfont.eot') format("embedded-opentype");
}

You can find free, high-quality web fonts at Google Fonts or Font Squirrel.

Applying Your Custom Font

Once you’ve defined your custom font with @font-face, use the name you assigned in the font-family rule to apply it to any element or class:

/* Use the custom font for all headings */
h1, h2, h3 {
  font-family: "MyCustomFont", serif;
}

/* Or target a specific class */
.hero-text {
  font-family: "MyCustomFont", sans-serif;
}

Always include a generic fallback (like serif or sans-serif) in case the custom font fails to load.

Text Shadows (Optional)

The text-shadow property adds a shadow behind your text. It can make headings or logos stand out, but overuse or poor contrast can reduce readability — especially for body text or mobile users.

/* Add a red shadow with horizontal and vertical offset, and blur */
text-shadow: 2px 2px 8px #FF0000;

Example:

Launch Studio

⚠️ Tip: Use text-shadow sparingly and avoid high-contrast glow effects. Always test readability on different screen sizes and backgrounds.