HTML & CSS Masterclass Tutorial

Comprehensive guide to modern HTML and CSS development.

Typography

CSS provides immense control over text appearance.

font-family: Sets the typeface (e.g., Arial, Times New Roman, or custom Google Fonts). Always provide fallback fonts.
font-size: Can be set in px, em, rem, or vw. (rem is highly recommended for accessibility).
font-weight: How thick the text is (normal, bold, 100-900).
line-height: The vertical space between lines of text.
text-align: left, right, center, or justify.
text-transform: uppercase, lowercase, capitalize.

Try It Yourself

Edit the code below and click Run to see the result live.

Source Code

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;1,400&family=Roboto:wght@300;400&display=swap" rel="stylesheet">
  <style>
    body { background: #fff; padding: 20px; }
    
    .article {
      max-width: 600px;
      margin: 0 auto;
    }
    
    .article-title {
      /* Custom Google Font */
      font-family: 'Playfair Display', serif;
      font-size: 3rem;
      font-weight: 700;
      color: #111;
      text-align: center;
      text-transform: uppercase;
      letter-spacing: 2px;
      margin-bottom: 10px;
    }
    
    .article-subtitle {
      font-family: 'Playfair Display', serif;
      font-style: italic;
      color: #666;
      text-align: center;
      font-size: 1.2rem;
      margin-bottom: 30px;
    }
    
    .article-body {
      /* Sans-serif for readability */
      font-family: 'Roboto', sans-serif;
      font-weight: 300;
      font-size: 1.1rem;
      line-height: 1.8; /* Improves readability heavily */
      color: #333;
      text-align: justify;
    }
  </style>
</head>
<body>

<div class="article">
    <h1 class="article-title">The Art of Typography</h1>
    <p class="article-subtitle">Using CSS to make words beautiful.</p>
    
    <p class="article-body">
      Good typography is not just about choosing a pretty font; it is about creating a visual hierarchy and ensuring readability. By adjusting the <strong>line-height</strong>, <strong>letter-spacing</strong>, and pairing contrasting typefaces (like a serif for headings and a sans-serif for body text), we can dramatically improve the user experience of a website.
    </p>
  </div>

</body>
</html>

Result

Topics

Introduction Environment Setup First Web Page Workflow & Tools Essentials Document Structure Text Content Lists & Tables Links & Navigation Images & Media Forms & Validation Reusable Components Styling Essentials Selectors & Specificity Cascade & Inheritance Typography Colors & Backgrounds Box Model Layout Fundamentals Positioning & Z-Index Flexbox CSS Grid Layout Patterns Responsive Design Responsive Components Custom Properties Calc & Functions Transitions Transforms Animations Effects & Filters Accessibility Design Systems Performance Debugging & Testing Tooling & Automation Landing Page Project Exercises Quiz

HTML & CSS Masterclass Tutorial

Course Topics

Typography

Typography

Try It Yourself

Topics