Notes/CSS3/Fonts & Text Styling

beginner7 min read

Fonts & Text Styling

Master font stacks, typography families (serif, sans-serif, monospace), text alignment, letter spacing, text transformation, and drop shadows.

1. Font Families

The font-family property defines the typeface. Always provide a "fallback" stack — a prioritized list ending with a generic family (serif, sans-serif, monospace) in case the user does not have the specified fonts installed.

The four generic families

AaSans-Serif (No feet). Clean, modern. e.g., Arial, Roboto

AaSerif (Has feet). Traditional, formal. e.g., Times New Roman

AaMonospace. Fixed width. Used for code. e.g., Courier New

AaCursive / Fantasy. Decorative styling. e.g., Pacifico

styles.css

1.text {
2  /* Specific Font -> Fallback -> Generic Type */
3  font-family: "Helvetica Neue", Arial, sans-serif;
4  /* "Sans-serif" is the generic system fallback */
5}

2. Font Weight & Style

Weight controls thickness (values from 100 to 900, where 400 is normal and 700 is standard bold). Style controls slant — italic is a designed sloped face, oblique is artificially sloped.

Weight scale

Weight 100 (Thin)

Weight 400 (Normal)

Weight 700 (Bold)

Weight 900 (Black)

Style

Italic (Designed sloped)

Oblique (Artificially sloped)

styles.css

1.bold-text { font-weight: bold; } /* Same as 700 */
2.thin-text { font-weight: 100; }  /* Requires font support */
3.italic-text { font-style: italic; }

3. Text Alignment

The text-align property sets the horizontal alignment of inline content (like text) inside its block parent.

The four text-align values

Left (Default) — Standard for reading.

Center — Good for headlines.

Right — Good for side notes.

Justify — Stretches the text to fit the full width of the container, like a newspaper column.

styles.css

1.center-text { text-align: center; }

4. Line Height & Letter Spacing

Line Height is the vertical distance between lines (best defined without units as a multiplier of font size, e.g. 1.6). Letter Spacing is the horizontal space between letters.

Line height — the pink band shows the line box

Tight spacing (1.2). Harder to read.

Loose spacing (2.0). Easier to read.

Letter spacing

Tight Spacing (-2px)

Normal Spacing (0)

Wide Spacing (5px)

styles.css

1.readable {
2  line-height: 1.6;      /* No unit needed (multiplier) */
3  letter-spacing: 1px;   /* Horizontal space */
4}

5. Decoration & Case

Use text-decoration to manage underlines, overlines, and strikethroughs (such as link resets). Use text-transform to modify casing.

Text decoration

Underline (Colored)

Line-Through (Strikethrough)

Overline

Text transform

uppercase text

LOWERCASE TEXT

capitalize first letter

styles.css

1a { text-decoration: none; }         /* Removes link underlines */
2.alert-banner { text-transform: uppercase; } /* Enforces all uppercase */

6. Text Shadow (Bonus)

Adds a shadow to the text itself. The syntax is: horizontal-offset vertical-offset blur-radius color.

Shadow styles

Hard Shadow

Neon Glow

styles.css

1.shadow {
2  text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
3}

7. Summary

The typography essentials at a glance:

font-family: Use "Serif" for formal, "Sans-serif" for screens.
font-weight: 400 is normal, 700 is bold.
line-height: Crucial for readability. 1.5 or 1.6 is standard for paragraphs.
text-align: Controls horizontal alignment (left, center, right, justify).

Key Takeaways

1.font-family: Use "Serif" for formal, "Sans-serif" for screens.
2.font-weight: 400 is normal, 700 is bold.
3.line-height: Crucial for readability. 1.5 or 1.6 is standard for paragraphs.
4.text-align: Controls horizontal alignment (left, center, right, justify).
5.text-transform enforces case capitalization; text-decoration manages underlines and strikethroughs.
6.text-shadow syntax is: horizontal-offset vertical-offset blur-radius color.

Colors & Backgrounds The CSS Box Model

Notes/CSS3/Fonts & Text Styling

beginner7 min read

Fonts & Text Styling

Master font stacks, typography families (serif, sans-serif, monospace), text alignment, letter spacing, text transformation, and drop shadows.

1. Font Families

The four generic families

AaSans-Serif (No feet). Clean, modern. e.g., Arial, Roboto

AaSerif (Has feet). Traditional, formal. e.g., Times New Roman

AaMonospace. Fixed width. Used for code. e.g., Courier New

AaCursive / Fantasy. Decorative styling. e.g., Pacifico

styles.css

1.text {
2  /* Specific Font -> Fallback -> Generic Type */
3  font-family: "Helvetica Neue", Arial, sans-serif;
4  /* "Sans-serif" is the generic system fallback */
5}

2. Font Weight & Style

Weight controls thickness (values from 100 to 900, where 400 is normal and 700 is standard bold). Style controls slant — italic is a designed sloped face, oblique is artificially sloped.

Weight scale

Weight 100 (Thin)

Weight 400 (Normal)

Weight 700 (Bold)

Weight 900 (Black)

Style

Italic (Designed sloped)

Oblique (Artificially sloped)

styles.css

1.bold-text { font-weight: bold; } /* Same as 700 */
2.thin-text { font-weight: 100; }  /* Requires font support */
3.italic-text { font-style: italic; }

3. Text Alignment

The text-align property sets the horizontal alignment of inline content (like text) inside its block parent.

The four text-align values

Left (Default) — Standard for reading.

Center — Good for headlines.

Right — Good for side notes.

Justify — Stretches the text to fit the full width of the container, like a newspaper column.

styles.css

1.center-text { text-align: center; }

4. Line Height & Letter Spacing

Line Height is the vertical distance between lines (best defined without units as a multiplier of font size, e.g. 1.6). Letter Spacing is the horizontal space between letters.

Line height — the pink band shows the line box

Tight spacing (1.2). Harder to read.

Loose spacing (2.0). Easier to read.

Letter spacing

Tight Spacing (-2px)

Normal Spacing (0)

Wide Spacing (5px)

styles.css

1.readable {
2  line-height: 1.6;      /* No unit needed (multiplier) */
3  letter-spacing: 1px;   /* Horizontal space */
4}

5. Decoration & Case

Use text-decoration to manage underlines, overlines, and strikethroughs (such as link resets). Use text-transform to modify casing.

Text decoration

Underline (Colored)

Line-Through (Strikethrough)

Overline

Text transform

uppercase text

LOWERCASE TEXT

capitalize first letter

styles.css

1a { text-decoration: none; }         /* Removes link underlines */
2.alert-banner { text-transform: uppercase; } /* Enforces all uppercase */

6. Text Shadow (Bonus)

Adds a shadow to the text itself. The syntax is: horizontal-offset vertical-offset blur-radius color.

Shadow styles

Hard Shadow

Neon Glow

styles.css

1.shadow {
2  text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
3}

7. Summary

The typography essentials at a glance:

font-family: Use "Serif" for formal, "Sans-serif" for screens.
font-weight: 400 is normal, 700 is bold.
line-height: Crucial for readability. 1.5 or 1.6 is standard for paragraphs.
text-align: Controls horizontal alignment (left, center, right, justify).

Key Takeaways

1.font-family: Use "Serif" for formal, "Sans-serif" for screens.
2.font-weight: 400 is normal, 700 is bold.
3.line-height: Crucial for readability. 1.5 or 1.6 is standard for paragraphs.
4.text-align: Controls horizontal alignment (left, center, right, justify).
5.text-transform enforces case capitalization; text-decoration manages underlines and strikethroughs.
6.text-shadow syntax is: horizontal-offset vertical-offset blur-radius color.

Colors & Backgrounds The CSS Box Model