DEV Community

Cover image for Typography and Font Styling in CSS
Ridoy Hasan
Ridoy Hasan

Posted on

1

Typography and Font Styling in CSS

Lecture 4: Typography and Font Styling in CSS

In this lecture, we'll explore how to style text using CSS. Typography is a critical aspect of web design that affects readability, user experience, and overall aesthetics. By the end of this lecture, you’ll know how to apply various font styles and control text appearance on your website.


Understanding Web Fonts

Web fonts allow you to use various typefaces on your website. You can use system fonts that are pre-installed on devices, or you can import custom fonts using services like Google Fonts.

1. System Fonts

System fonts are reliable because they are pre-installed on most devices, but they limit your design options.

  • Example:
  body {
    font-family: Arial, sans-serif;
  }
Enter fullscreen mode Exit fullscreen mode
2. Google Fonts

Google Fonts offers a wide selection of web fonts that you can easily integrate into your website.

  • Example:

    1. First, include the font link in your HTML <head>:
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
    
  1. Then, apply the font in your CSS:

     body {
       font-family: 'Roboto', sans-serif;
     }
    

Font Properties in CSS

CSS offers a variety of properties to style your fonts, including font size, weight, style, and more.

1. Font Size

You can control the size of the text using the font-size property.

  • Example:
  h1 {
    font-size: 36px;
  }
  p {
    font-size: 16px;
  }
Enter fullscreen mode Exit fullscreen mode
2. Font Weight

The font-weight property allows you to set how bold the text appears.

  • Example:
  h1 {
    font-weight: bold; /* Or use numeric values like 700 */
  }
Enter fullscreen mode Exit fullscreen mode
3. Font Style

The font-style property lets you italicize text.

  • Example:
  em {
    font-style: italic;
  }
Enter fullscreen mode Exit fullscreen mode
4. Font Variant

Use font-variant to display text in small caps.

  • Example:
  p.caps {
    font-variant: small-caps;
  }
Enter fullscreen mode Exit fullscreen mode
5. Line Height

The line-height property controls the space between lines of text.

  • Example:
  p {
    line-height: 1.5;
  }
Enter fullscreen mode Exit fullscreen mode
6. Text Alignment

The text-align property controls the horizontal alignment of text within an element.

  • Example:
  h1 {
    text-align: center;
  }
Enter fullscreen mode Exit fullscreen mode
7. Text Decoration

The text-decoration property allows you to add underlines, overlines, or strikethroughs to text.

  • Example:
  a {
    text-decoration: underline;
  }
Enter fullscreen mode Exit fullscreen mode
8. Text Shadow

You can add a shadow effect to your text using the text-shadow property.

  • Example:
  h2 {
    text-shadow: 2px 2px 5px gray;
  }
Enter fullscreen mode Exit fullscreen mode

Practical Example:

Let’s combine these properties to style a webpage with a focus on typography.

HTML:

<div class="content">
  <h1>Welcome to Our Blog</h1>
  <h2>Latest Updates</h2>
  <p class="intro">Stay updated with the latest trends in web development, design, and more.</p>
  <p>Explore articles, tutorials, and resources to help you master the art of web design.</p>
</div>
Enter fullscreen mode Exit fullscreen mode

CSS:

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

body {
  font-family: 'Open Sans', sans-serif;
  color: #333;
  line-height: 1.6;
}

/* Heading Styles */
h1 {
  font-size: 36px;
  font-weight: 700;
  text-align: center;
  text-shadow: 2px 2px 4px #aaa;
}

h2 {
  font-size: 28px;
  font-weight: 700;
  margin-top: 20px;
}

/* Paragraph Styles */
p {
  font-size: 18px;
  margin-bottom: 15px;
}

.intro {
  font-style: italic;
  font-variant: small-caps;
  text-align: justify;
}

/* Centering the content */
.content {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}
Enter fullscreen mode Exit fullscreen mode

In this example:

  • The Google Font "Open Sans" is used for all text.
  • The headings (h1, h2) are styled with specific font sizes, weights, and text shadows.
  • Paragraphs are given a standard font size, with special styling applied to the .intro class, including italics and small caps.
  • The content is centered on the page with a max width and auto margins.

Practice Exercise

  1. Create an HTML page with various headings and paragraphs.
  2. Apply different font properties to style your text.
  3. Use a Google Font to give your webpage a unique look.
  4. Experiment with text alignment, decoration, and shadow effects.

Next Up: In the next lecture, we’ll discuss CSS Layouts: Floats, Flexbox, and Grid, where you’ll learn how to create complex and responsive layouts for your website. Stay tuned!


Follow me On LinkedIn
Ridoy Hasan

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay