HTML Fonts and Typography

In modern HTML, fonts and typography are controlled using CSS. The older <font> tag is deprecated and should not be used. Instead, we use the style attribute (inline CSS) or external/internal CSS.

1. Changing Font Family

You can change the font using the font-family property.

<p style="font-family: Arial, sans-serif;">This text uses Arial font.</p>

2. Changing Font Size

You can set the size using font-size with values like px, em, %, or rem.

<p style="font-size: 20px;">This text is 20 pixels in size.</p>

3. Font Weight (Boldness)

Use font-weight to make text light, normal, bold, etc.

<p style="font-weight: bold;">This text is bold using font-weight.</p>

4. Font Style (Italic)

Use font-style: italic; to make the text slanted.

<p style="font-style: italic;">This text is italic.</p>

5. Text Transform (Capitalization)

Use text-transform to change the case of text.

<p style="text-transform: uppercase;">this will become UPPERCASE</p>

6. Letter Spacing and Word Spacing

You can control space between letters or words.

<p style="letter-spacing: 2px;">Letter spacing example</p>
<p style="word-spacing: 10px;">Word spacing example</p>

7. Line Height

line-height controls vertical spacing between lines of text.

<p style="line-height: 1.8;">Line height adjusted text.</p>

8. Text Align

Use text-align to align text: left, right, center, or justify.

<p style="text-align: center;">This text is centered.</p>

Typography Best Practices

Use web-safe fonts like Arial, Verdana, Times New Roman
Use Google Fonts for modern, stylish fonts
Always set a fallback font (e.g., font-family: 'Roboto', sans-serif;)
Use relative sizing (em, rem) for responsive design
Avoid using the deprecated <font> tag