21 Website Authoring: Font Properties

This section details how to specify font properties when creating websites using HTML. Understanding these properties allows for greater control over the visual presentation of text, enhancing readability and overall design.

Font Family

The font-family property specifies the font to be used for the text. It's crucial to include fallback fonts in case the primary font is not available on the user's system.

Example:

This text will be displayed in Arial. If Arial is not available, it will try Helvetica, and if that's not available, it will use a generic sans-serif font.

Important Note: Always list multiple font options separated by commas for better cross-browser compatibility.

Font Size

The font-size property controls the size of the text. It can be specified in various units:

• px: Pixels (absolute size)
• em: Relative to the font size of the parent element
• rem: Relative to the font size of the root element ()
• pt: Points (absolute size)

Example:

This text will be smaller than the default font size.

Note: Using relative units like em and rem is generally recommended for better responsiveness.

Font Colour

The color property sets the colour of the text. Colours can be specified using various formats:

• Colour names (e.g., red, blue, green)
• Hexadecimal colour codes (e.g., #FF0000 for red)
• RGB colour values (e.g., rgb(255, 0, 0) for red)
• HSL colour values (e.g., hsl(0, 100%, 50%) for red)

Example:

This text will be blue.

Text Alignment

The text-align property determines the horizontal alignment of the text within its container.

Possible values are:

1. left: Aligns text to the left.
2. right: Aligns text to the right.
3. center: Centers the text.
4. justify: Justifies the text, distributing it evenly between lines.

Example:

This text will be centered.

Bold and Italic

The tag is used to display text in bold, and the tag is used to display text in italics. These are inline elements.

This text is bold.
This text is italic.