HTML for Web Development

0% completed

Previous
Next
HTML Fonts

HTML provides several ways to define and customize the appearance of text on a webpage. Fonts are a critical element in web design as they affect the readability and overall visual appeal of a webpage. While the <font> tag was used in earlier versions of HTML to specify font properties, it has been deprecated in favor of CSS, which offers better control and flexibility.

In this lesson, we’ll explore how fonts are managed in HTML and the basic concepts you need to know.

Font Properties

There are three main font properties in HTML:

  1. Font Family:

    • Defines the type of font to be used.
    • Example: Arial, Verdana, Times New Roman.
    • Fonts are grouped into generic families:
      • Serif: Fonts with small decorative lines (e.g., Times New Roman).
      • Sans-serif: Clean fonts without decorative lines (e.g., Arial).
      • Monospace: Fixed-width fonts where each character takes the same space (e.g., Courier New).

  2. Font Size:

    • Specifies the size of the text.
    • Can be defined using:
      • Absolute sizes: Keywords like small, medium, large.
      • Relative sizes: Adjustments like smaller or larger.
      • Exact values: Measured in units such as pixels (px), points (pt), or ems (em).

  3. Font Color:

    • Determines the color of the text.
    • Specified using:
      • Color names: Red, Blue, Green.
      • Hexadecimal codes: #FF5733.
      • RGB values: rgb(255, 87, 51).

The <font> Tag (Deprecated)

The <font> tag was used in older HTML versions to define font properties directly within the HTML file. However, it has been removed in HTML5 due to the introduction of CSS, which separates content from design.

Example of the <font> tag (not recommended):

<font face="Arial" size="4" color="blue">This is a sample text.</font>

Using CSS for Font Styling

Modern web development uses CSS to style fonts. CSS provides more flexibility and allows global styling by defining font properties in a stylesheet.

Example using CSS:

<p style="font-family: Arial; font-size: 16px; color: blue;">
  This is a sample text styled using CSS.
</p>

Advantages of CSS for font styling:

  • Easier to manage and update styles across multiple pages.
  • Supports advanced features like line spacing, text alignment, and more.
  • Provides better compatibility with HTML5.

Web-Safe Fonts

Web-safe fonts are fonts that are widely supported across all devices and browsers. Using web-safe fonts ensures that your text displays consistently for all users.

Examples of web-safe fonts:

  • Arial
  • Verdana
  • Times New Roman
  • Courier New
  • Georgia

Google Fonts and External Fonts

For more customization, you can use Google Fonts or other external font libraries. These fonts are loaded from external servers and provide a wide range of design options.

Steps to use Google Fonts:

  1. Visit Google Fonts.
  2. Select a font and copy the provided <link> tag.
  3. Add the <link> tag to the <head> section of your HTML file.
  4. Use the font in your CSS.

Example:

HTML
. . . .

While the <font> tag is no longer used in modern web development, fonts remain a critical aspect of webpage design. By using CSS and external font libraries, you can create attractive, readable, and professional-looking text that enhances user experience. Always prioritize readability and accessibility when choosing fonts for your website.

.....

.....

.....

Like the course? Get enrolled and start learning!
Previous
Next