**Course Title:** Modern CSS: Responsive Design and Advanced Techniques **Section Title:** Typography and Web Fonts **Topic:** Styling text with CSS: font-size, font-weight, line-height, letter-spacing, and text-transform. **Introduction** In this topic, we'll delve into the fundamentals of styling text with CSS. You'll learn how to manipulate font sizes, weights, line heights, letter spacings, and text transformations to create visually appealing and effective typography. By the end of this topic, you'll be able to control and refine the presentation of text in your web designs. **Font-Size** The `font-size` property is used to set the size of text in a web page. It can be specified in various units, such as `px`, `em`, `rem`, or `%`. * **Pixel (`px`) values**: Specify the exact size in pixels. However, this method can be inflexible when designing responsive websites. * **Em (`em`) values**: Relative to the font size of the parent element. This method is useful for creating scalable typography. For more information, you can refer to the CSS Writing Modes Module specification by W3C (World Wide Web Consortium): [www.w3.org/TR/css-writing-modes-3](https://www.w3.org/TR/css-writing-modes-3/) * **Rem (`rem`) values**: Relative to the font size of the root element (`:root` or `html`), which is the topmost element in the document tree. This method is also useful for creating scalable typography and is gaining popularity in recent years. Example: ```css h1 { font-size: 24px; /* Pixel value */ } h2 { font-size: 1.5em; /* Em value, relative to the font size of the parent element */ } p { font-size: 1rem; /* Rem value, relative to the font size of the root element */ } ``` **Font-Weight** The `font-weight` property is used to set the weight or boldness of text. Common values include: * `normal` (400) * `bold` (700) * `bolder` * `lighter` * `100`-`900` (numeric values representing the font weight) Example: ```css h1 { font-weight: bold; /* Bold font weight */ } h2 { font-weight: 600; /* Medium-heavy font weight */ } p { font-weight: normal; /* Normal font weight */ } ``` **Line-Height** The `line-height` property is used to set the spacing between lines of text. It can be specified using the same units as `font-size`. When using a unitless value, it will be relative to the font size. Example: ```css p { font-size: 16px; line-height: 1.5; /* Relative line height, equivalent to 24px */ } h1 { font-size: 24px; line-height: 36px; /* Absolute line height */ } ``` **Letter-Spacing** The `letter-spacing` property is used to set the spacing between individual letters in a word. It can be specified in `px`, `em`, `rem`, or `%` units. Example: ```css h1 { letter-spacing: 2px; /* Increased letter spacing */ } p { letter-spacing: 0.1em; /* Slightly increased letter spacing */ } ``` **Text-Transform** The `text-transform` property is used to convert the case of text to uppercase, lowercase, or title case. * `uppercase` * `lowercase` * `capitalize` (title case) * `none` Example: ```css h1 { text-transform: uppercase; /* Convert text to uppercase */ } h2 { text-transform: lowercase; /* Convert text to lowercase */ } p { text-transform: capitalize; /* Convert text to title case */ } ``` **Conclusion** Understanding how to style text with CSS is essential for creating visually appealing and effective web designs. By controlling font sizes, weights, line heights, letter spacings, and text transformations, you can improve the readability and aesthetics of your web pages. In the next topic, we'll explore the fundamentals of CSS transitions and how to animate property changes. **Leave your comments or ask for help**: We'd love to hear your thoughts on this topic. If you have any questions or need further clarification on any of the concepts, please leave a comment below. **External Links:** * CSS Writing Modes Module specification by W3C (World Wide Web Consortium): [www.w3.org/TR/css-writing-modes-3](https://www.w3.org/TR/css-writing-modes-3/) * Mozilla Developer Network (MDN) documentation on CSS font properties: [developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts) **What's Next?** In the next topic, we'll introduce CSS transitions and explore how to animate property changes in our web designs.

h1 {
  font-size: 24px; /* Pixel value */
}

h2 {
  font-size: 1.5em; /* Em value, relative to the font size of the parent element */
}

p {
  font-size: 1rem; /* Rem value, relative to the font size of the root element */
}

h1 {
  font-weight: bold; /* Bold font weight */
}

h2 {
  font-weight: 600; /* Medium-heavy font weight */
}

p {
  font-weight: normal; /* Normal font weight */
}

p {
  font-size: 16px;
  line-height: 1.5; /* Relative line height, equivalent to 24px */
}

h1 {
  font-size: 24px;
  line-height: 36px; /* Absolute line height */
}

h1 {
  letter-spacing: 2px; /* Increased letter spacing */
}

p {
  letter-spacing: 0.1em; /* Slightly increased letter spacing */
}

h1 {
  text-transform: uppercase; /* Convert text to uppercase */
}

h2 {
  text-transform: lowercase; /* Convert text to lowercase */
}

p {
  text-transform: capitalize; /* Convert text to title case */
}