<FullStackCamp>

Lesson 5: HTML Text Formatting and Typography

In this lesson, we will cover the basics of text formatting and typography in HTML.

Formatting text elements

HTML provides several elements for formatting text, including:

  • <strong>: Bold text, indicates importance
  • <em>: Italic text, indicates emphasis
  • <u>: Underlined text, indicates a span of text with a non-textual annotation
  • <del>: Strikethrough text, indicates deleted text
  • <ins>: Underlined text, indicates inserted text
  • <sub>: Subscript text, often used in mathematical or chemical formulas
  • <sup>: Superscript text, often used in mathematical or scientific notation

Example:

<p>This is <strong>bold</strong> text.</p>
<p>This is <em>italic</em> text.</p>

Inline vs. block elements

HTML elements can be categorized as inline or block elements:

  • Inline elements: Do not create a new line and only take up the width of their content. Examples include <span>, <strong>, and <em>.
  • Block elements: Create a new line and take up the full width of their parent container. Examples include <div>, <p>, and <h1>.

You can change the default display behavior of an element using the display CSS property:

span {
  display: block;
}

Typography in CSS

CSS provides a variety of properties to control typography, such as:

  • font-family: Specifies the font family used for the text
  • font-size: Specifies the font size of the text
  • font-weight: Specifies the font weight, such as normal, bold, or a specific numeric value
  • font-style: Specifies the font style, such as normal or italic
  • line-height: Specifies the line spacing
  • text-align: Specifies the horizontal alignment of text, such as left, right, center, or justify
  • text-decoration: Specifies the text decoration, such as underline, overline, line-through, or none
  • text-transform: Specifies the text case, such as uppercase, lowercase, or capitalize

Example:

p {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  text-align: justify;
  text-decoration: none;
  text-transform: none;
}

Actionable Work

  1. Practice using various HTML text formatting elements in your webpage to emphasize or indicate the importance of specific text content.
  2. Experiment with different inline and block elements and observe how they affect the layout of your webpage.
  3. Create a CSS file and use typography-related CSS properties to style the text on your webpage.
  4. Link your CSS file to your HTML file and preview your work in a web browser to see the effects of your text formatting and typography styling.