HTML Font

HTML Font

In HTML, font-related attributes and properties can be set using both HTML elements and CSS. Here's a list of attributes and properties you can use to control the appearance of text.

In HTML, font-related attributes and properties can be set using both HTML elements and CSS. Here's a list of attributes and properties you can use to control the appearance of text.

HTML Font Attributes (Deprecated in HTML5)

These were part of the <font> tag, which is now deprecated in favor of CSS. Avoid using these in modern HTML.

• face

  • Specifies the font family.
  • Example: <font face="Arial, Helvetica, sans-serif">

• size

  • Sets the size of the text (1 to 7, with 3 as default).
  • Example: <font size="4">

• color

  • Sets the color of the text.
  • Example: <font color="#ff0000">

Modern Font Styling with CSS

The preferred way to style fonts is through CSS. Below is a list of CSS properties related to fonts:

Font Family and Style

• font-family

  • Specifies the font type.
  • Example: font-family: 'Arial', sans-serif;

• font-style

  • Specifies the style of the font: normal, italic, or oblique.
  • Example: font-style: italic;

Font Weight and Size

• font-weight

  • Specifies the thickness of the font: normal, bold, lighter, or a numeric value (100–900).
  • Example: font-weight: bold;

• font-size

  • Sets the size of the font using units like px, em, %, rem, etc.
  • Example: font-size: 16px;

Font Variations

• font-variant

  • Controls font variations, such as small-caps.
  • Example: font-variant: small-caps;

• font-variation-settings (For variable fonts)

  • Adjusts specific axes in variable fonts.
  • Example: font-variation-settings: 'wght' 700;

Line Height and Spacing

• line-height

  • Specifies the height of lines of text.
  • Example: line-height: 1.5;

• letter-spacing

  • Sets the spacing between characters.
  • Example: letter-spacing: 0.05em;

• word-spacing

  • Sets the spacing between words.
  • Example: word-spacing: 2px;

Shorthand Property

• font
  • A shorthand property for setting multiple font-related properties at once.
  • Example: font: italic bold 16px/1.5 'Arial', sans-serif;

Color and Decoration

• color

  • Sets the text color.
  • Example: color: #0000ff;

• text-decoration

  • Adds decoration like underline, line-through, overline, or none.
  • Example: text-decoration: underline;

• text-shadow

  • Adds shadow to the text.
  • Example: text-shadow: 2px 2px 5px rgba(0,0,0,0.5);