Typography Properties in CSS

Typography properties in CSS are used to control the appearance of text on a web page. Here’s a brief overview of the key typography properties:

1. font-family

• Specifies the typeface for text.

• Values: Font names (e.g., Arial, Georgia), Generic families (serif, sans-serif, monospace).

  font-family: Arial, sans-serif;
  

2. font-size

• Sets the size of the font.

• Values: Length (e.g., px, em, rem), Percentage (%).

  font-size: 16px;
  

3. font-weight

• Defines the thickness of the font characters.

• Values: Keywords (normal, bold, bolder, lighter), Numeric values (100, 200, 300, ..., 900).

  font-weight: bold;
  font-weight: 700;
  

4. font-style

• Sets the style of the font.

• Values: normal, italic, oblique.

  font-style: italic;
  

5. font-variant

• Controls the use of special typographic features.

• Values: normal, small-caps, larger, smaller.

  font-variant: small-caps;
  

6. line-height

• Sets the amount of space between lines of text.

• Values: Length (e.g., px, em), Number (multiplier), Percentage (%).

  line-height: 1.5;
  

7. text-align

• Aligns the text within its container.

• Values: left, right, center, justify.

  text-align: center;
  

8. text-decoration

• Adds decorations to text.

• Values: none, underline, overline, line-through, blink (deprecated).

  text-decoration: underline;
  

9. text-transform

• Controls the capitalization of text.

• Values: uppercase, lowercase, capitalize, none.

  text-transform: uppercase;
  

10. letter-spacing

• Adjusts the space between characters.

• Values: Length (e.g., px, em).

  letter-spacing: 0.5px;
  

11. word-spacing

• Adjusts the space between words.

• Values: Length (e.g., px, em).

  word-spacing: 1px;
  

12. text-indent

• Indents the first line of text in a block.

• Values: Length (e.g., px, em).

  text-indent: 20px;
  

13. text-shadow

• Adds shadow effects to text.

• Values: Offset-x, Offset-y, Blur-radius, Color.

  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  

14. white-space

• Controls how whitespace inside an element is handled.

• Values: normal, nowrap, pre, pre-wrap, pre-line.

  white-space: nowrap;
  

15. word-wrap (or overflow-wrap)

• Specifies how words should break when reaching the end of a line.

• Values: normal, break-word.

  word-wrap: break-word;
  

16. direction

• Specifies the text direction.

• Values: ltr (left-to-right), rtl (right-to-left).

  direction: rtl;
  

17. writing-mode

• Defines the direction in which text is laid out.

• Values: horizontal-tb (default), vertical-rl, vertical-lr.

  writing-mode: vertical-rl;