Day 2 - CSS Typography

Typography properties allow you to control the look and feel of text explicitly.

1. Font Family

Specifies the font for an element. Always provide fallback fonts.

Serif: Fonts with small lines at the ends (e.g., Times New Roman).
Sans-serif: Fonts without lines (e.g., Arial). Clean and modern.
Monospace: All characters have the same width (e.g., Courier). Used for code.

Code:

            /* CSS */ .font-serif {
            font-family:
            Georgia, serif; }
            .font-sans {
            font-family:
            Arial, sans-serif; }
            .font-mono {
            font-family:
            "Courier New", monospace; }
          

Output:

This is a Serif font.

This is a Sans-serif font.

This is a Monospace font.

2. Font Size

Sets the size of the text. Common units are px (pixels) and rem (relative to root).

Code:

            /* CSS */ .size-small {
            font-size:
            12px; }
            .size-medium {
            font-size:
            16px; }
            /* Default browser size */
            .size-xlarge {
            font-size:
            32px; }
          

Output:

Small Text (12px)

Medium Text (16px)

Extra Large Text (32px)

3. Font Weight

Controls the boldness of the text.

Code:

            /* CSS */ .weight-light {
            font-weight:
            300; }
            .weight-normal {
            font-weight:
            400; }
            /* Standard */
            .weight-bold {
            font-weight:
            700; }
            /* Bold */
            .weight-bolder {
            font-weight:
            900; }
          

Output:

Light Weight (300)

Normal Weight (400)

Bold Weight (700)

Bolder Weight (900)

4. Text Decoration

Used to add or remove decorations like underlines. Often used to remove underlines from links.

Code:

            /* CSS */ .dec-underline {
            text-decoration:
            underline; }
            .dec-line-through {
            text-decoration:
            line-through; }
            a.dec-none {
            text-decoration:
            none; }
          

Output:

Underlined Text

Strikethrough Text

Link without underline

5. Text Transform

Controls capitalization.

Code:

            /* CSS */ .trans-upper {
            text-transform:
            uppercase; }
            .trans-lower {
            text-transform:
            lowercase; }
            .trans-cap {
            text-transform:
            capitalize; }
          

Output:

uppercase text

LOWERCASE TEXT

capitalize this text

6. Text Alignment

Controls the horizontal alignment of text.

Code:

            /* CSS */ .align-center {
            text-align:
            center; }
            .align-right {
            text-align:
            right; }
          

Output:

Centered Text

Right Aligned Text

7. Line Height

Controls the space between lines of text.

Code:

            /* CSS */ .lh-small {
            line-height:
            1.0; }
            .lh-large {
            line-height:
            2.0; }
          

Output:

Small Line Height (1.0):
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

Large Line Height (2.0):
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore.

8. Letter Spacing

Controls the space between characters.

Code:

            /* CSS */ .spacing-wide {
            letter-spacing:
            5px; }
            .spacing-neg {
            letter-spacing:
            -1px; }
          

Output:

WIDE SPACING

COMPRESSED SPACING

< Previous: Box Model | Next: Colors >