✍️ Text Styler Demo

Exploring CSS typography properties: font-family, font-size, font-weight, text-align, line-height, letter-spacing, text-transform, text-decoration, and color

1. Font Family

Arial: This text uses Arial font (sans-serif)
Georgia: This text uses Georgia font (serif)
Courier New: This text uses monospace font
Impact: This text uses Impact font (bold display)

2. Font Size

Small: 12px text size
Medium: 20px text size
Large: 32px text size
Huge: 48px text size

3. Font Weight (Boldness)

Normal: Regular weight
Bold: Bold weight
100: Thin weight
400: Normal (same as normal)
700: Bold (same as bold)
900: Black (very bold)

4. Font Style

Normal: Regular text
Italic: Italic text

5. Text Align

Left aligned: This text is aligned to the left side.
Center aligned: This text is centered in the middle.
Right aligned: This text is aligned to the right side.
Justified: This text stretches to both left and right margins. It makes the text look neat and even on both sides.

6. Line Height (Space Between Lines)

Line height 1: No extra space between lines. This is very tight and can be hard to read for long paragraphs.
Line height 1.5: This is the recommended line height for readability. Notice the comfortable spacing.
Line height 2: Very spacious. Each line has a lot of space above and below.

7. Letter Spacing (Space Between Letters)

Normal spacing: Regular letters
Wide spacing: 2px between letters
Wider spacing: 5px between letters
Tight spacing: -1px between letters (letters overlap slightly)

8. Text Transform

None: This is normal sentence case
Uppercase: THIS TEXT IS ALL CAPS
Lowercase: this text is all lowercase
Capitalize: Each Word Starts With A Capital Letter

9. Text Decoration

None: No decoration (default)
Underline: Text with a line below
Overline: Text with a line above
Line-through: ~~Text with a line through the middle~~ (like deleted text)

10. Color

Red text
Blue text
Green text
Purple text
Orange text

11. All Properties Combined

Fancy Text!
All properties working together