Be able to specify the font properties including font family, size, colour, alignment, bold, italic

Published by Patrick Mutisya · 14 days ago

ICT 0417 – Website Authoring: Font Properties

21. Website Authoring

Objective

Be able to specify the font properties including font family, size, colour, alignment, bold and italic.

1. Font‑related CSS properties

The following CSS properties control the appearance of text on a web page.

  • font-family – selects the typeface (e.g., Arial, Times New Roman, Verdana).

  • font-size – sets the size of the text (e.g., 12px, 1.2em, 80%).

  • color – defines the colour of the text (e.g., #000000, rgb(255,0,0), named colours).

  • text-align – aligns text within its containing block (left, right, centre, justify).

  • font-weight – makes text bold (normal, bold, 100‑900).

  • font-style – makes text italic or oblique (normal, italic, oblique).

2. Specifying font properties in HTML

Font properties are normally set using a <style> block or an external stylesheet, but they can also be applied directly with the style attribute on individual elements.

Example of inline styling (for illustration only):

<p style="font-family: Arial; font-size: 14px; color: #333333; text-align: justify; font-weight: bold; font-style: italic;">
This paragraph uses all six font properties.
</p>

3. Common font families

Generic familyTypical fontsTypical use
serifTimes New Roman, GeorgiaPrint‑like documents, formal reports
sans‑serifArial, Verdana, HelveticaWeb pages, headings, modern layouts
monospaceCourier New, ConsolasCode snippets, tabular data
cursiveComic Sans MS, Brush ScriptInformal notes, decorative text
fantasyImpact, PapyrusSpecial effects, titles

4. Choosing appropriate font size

Font size should be readable on the intended device. Common practice:

  1. Body text – 14 px to 16 px (or 1 em).

  2. Headings – larger, often using relative units (e.g., 1.5 em, 2 em).

  3. Captions and footnotes – slightly smaller, but not less than 10 px for accessibility.

5. Colour considerations

When selecting a text colour, ensure sufficient contrast with the background. The WCAG guideline recommends a contrast ratio of at least 4.5:1 for normal text.

6. Text alignment options

  • left – default for left‑to‑right languages.

  • right – used for right‑to‑left languages or special layout effects.

  • center – suitable for headings, titles, or short blocks of text.

  • justify – spreads text to fill the line width, often used in articles.

7. Applying bold and italic

Bold and italic can be applied via CSS or by using semantic HTML tags:

  • <strong> – indicates strong importance; browsers render it bold.

  • <b> – visual bold without semantic meaning.

  • <em> – indicates emphasis; browsers render it italic.

  • <i> – visual italic without semantic meaning.

8. Example: Combining all font properties

<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
font-family: "Verdana", sans-serif;
font-size: 18px;
color: #0066CC;
text-align: center;
font-weight: bold;
font-style: italic;
}
</style>
</head>
<body>
<p class="highlight">Important announcement</p>
</body>
</html>

Suggested diagram: Flowchart showing where each font property is set (HTML element → CSS selector → property).