✅ Module 8: Typography and Text Styling (✍️🔠)

✍️ Module 8: Typography and Text Styling

Typography in web design refers to the appearance and arrangement of text on the screen. Good typography improves readability, enhances user experience, and supports the overall design aesthetic. 🎯

🔤 Font Properties

• font-family: Sets the font (e.g., Arial, Georgia, 'Open Sans')
• font-size: Size of the text (e.g., 16px, 1.5em, 120%)
• font-weight: Thickness of the text (normal, bold, 100–900)
• font-style: Italic or normal
• font-variant: Small-caps, normal

📏 Units

• px: Pixels (fixed size)
• em: Relative to parent font size
• rem: Relative to root (html) font size
• %: Percentage of parent

📝 Text Formatting

• color: Changes text color
• text-align: left | right | center | justify
• line-height: Controls space between lines
• letter-spacing: Space between letters
• word-spacing: Space between words
• text-decoration: underline, overline, line-through
• text-transform: uppercase, lowercase, capitalize

🌐 Web Fonts

You can import Google Fonts:

<link href=\"https://fonts.googleapis.com/css2?family=Roboto&display=swap\" rel=\"stylesheet\">
body {
  font-family: 'Roboto', sans-serif;
}
  

✅ Summary

• Use rem or em for scalable, accessible typography.
• Apply proper spacing and alignment to improve legibility.
• Use web fonts for brand consistency and custom appearance. 🧑‍🎨