Fun with Fonts: Free HTML & CSS Tutorial

Topics Covered in This HTML & CSS Tutorial:

Master Google Fonts integration, implement bulletproof font stack fallbacks, and optimize line-height and margin properties for superior text readability and user experience.

Exercise Preview

Exercise Overview

In this exercise, we'll elevate the Hipstirred site from generic to professional by implementing custom web typography. While system fonts serve a purpose, they won't differentiate your brand or create memorable user experiences. We'll leverage Google Fonts—the web's largest repository of free, production-ready typefaces—to transform our site's visual hierarchy and readability. Google's CDN hosting ensures reliable delivery and optimal performance across global audiences.

1. Before we begin, close any open files in your code editor. Working with a clean slate prevents confusion when switching between project directories.
2. Navigate to the Hipstirred Font Fun folder located in Desktop > Class Files > Web Dev Class. If your code editor supports project folders (like Visual Studio Code, Sublime Text, or Atom), open the entire directory for streamlined file management.

Limiting the Text Content's Width

Before diving into typography, we need to establish proper content width and spacing. Research consistently shows that optimal reading experiences occur with line lengths between 45-75 characters per line.

1. Open index.html from the Hipstirred Font Fun folder in your code editor.

2. Preview index.html in your browser and observe the current layout issues:

   • New text content has been added to the main tag, plus a copyright footer.
   • Text extends edge-to-edge, creating uncomfortably long line lengths that strain readability. This violates fundamental UX principles for content consumption.
3. Return to your code editor to address these layout concerns.
4. Open main.css from the Hipstirred Font Fun folder.

5. Add this new rule below the existing .hero rule:

   main {
      max-width: 850px;
      padding: 25px;
   }

   The 850px maximum width ensures optimal reading line length while the padding provides essential breathing room around content.

6. Save main.css and test your changes.
7. Reload index.html in your browser. Notice the improved readability, though the content needs proper centering for visual balance.
8. Return to main.css in your code editor.

9. Add these centering properties to the main rule:

   main {
      max-width: 850px;
      padding: 25px;
      margin-right: auto;
      margin-left: auto;
   }

   Auto margins on left and right create perfect horizontal centering for block-level elements.

10. Save main.css and verify the changes.

11. Reload index.html in your browser.

    Excellent—now we have a properly structured layout foundation for typography experimentation. The footer's left alignment will be addressed in a subsequent exercise focused on footer design patterns.

Experimenting with Google Fonts

Google Fonts has revolutionized web typography since its 2010 launch, now serving over 1 trillion font requests monthly. Its fonts are optimized for web delivery with multiple format support and intelligent subsetting.

1. Open a new browser tab and navigate to fonts.google.com

   This Google service provides over 1,500 open-source font families, all licensed for commercial use without restrictions. The fonts are professionally designed and optimized for both screen and print applications.

2. Customize the preview text by clicking Type something at the top and entering Curated Coffee. This allows you to evaluate fonts using your actual content rather than generic samples.
3. Scroll through the available typefaces to get familiar with the range of options—from traditional serifs to modern sans-serifs and decorative display faces.
4. Let's evaluate three specific fonts for our project. Search for Medula in the search field.
5. Click on Medula One to view its details.

6. Notice this font offers only Regular 400 weight.

   Web font weights use numerical values: 100-300 (thin to light), 400 (normal), 500-600 (medium to semi-bold), 700 (bold), 800-900 (extra-bold to black). This standardization ensures consistent rendering across platforms.

7. Click + Select this style on the right.

   The Selected families panel should appear on the right side, beginning your font collection for this project.

   NOTE: If this panel closes, reopen it using the button at the top right.

8. Add our second candidate font:

   • Click Browse fonts at the top of the page.
   • Search for Rancho.
   • Select Rancho from the results.
   • Click + Select this style to add it to your collection.

9. Add the third font to complete our selection:

   • Click Browse fonts again.
   • Search for Abel.
   • Select Abel from the results.
   • Click + Select this style to add it.

   PERFORMANCE TIP: Each additional font weight increases page load time and bandwidth usage. In 2026's mobile-first environment, only select weights you'll actually implement. Users on slower connections or limited data plans will appreciate your restraint.

Adding Fonts to Our Page

Now we'll implement the technical integration between Google's font servers and your webpage using modern preloading techniques.

1. Ensure the Selected families panel is visible on the right. If not, click the button to open it.
2. Verify all three fonts appear in your selection: Abel, Medula One, and Rancho.

3. Copy the provided embed code that handles font loading from Google's global CDN:

   <link rel="preconnect" href="https://fonts.googleapis.com"> 
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
   <link href="https://fonts.googleapis.com/css2?family=abel&family=medula+one&family=rancho&display=swap" rel="stylesheet">

4. Keep the Google Fonts tab open—you'll reference it throughout the styling process.
5. Switch to index.html in your code editor.

6. Insert the font links above your main.css link, following this hierarchy:

   <title>Artisanal Coffee Curators | Hipstirred</title>
   <link rel="preconnect" href="https://fonts.googleapis.com"> 
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> 
   <link href="https://fonts.googleapis.com/css2?family=abel&family=medula+one&family=rancho&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="main.css">

   PERFORMANCE NOTE: Placing Google Fonts links before your CSS enables earlier font discovery and download initiation. The display=swap parameter ensures text remains visible during font load using fallback fonts, preventing the "flash of invisible text" (FOIT). The preconnect directives establish early connections to Google's font servers, reducing connection overhead.

7. Save the file to implement the font loading infrastructure.

Applying the Fonts to Content

With fonts successfully loaded, we can now apply them strategically to create visual hierarchy and enhance the user experience.

1. Return to the Google Fonts tab in your browser.

2. In the CSS rules to specify families section, copy the Abel font declaration:

   font-family: 'Abel', sans-serif;

3. Switch to main.css in your code editor.

4. Update the body rule to establish Abel as the base typography:

   body {
      font-family: 'Abel', sans-serif;
      margin: 0;
   }

   Setting font-family on the body element cascades to all child elements, establishing consistent typography foundation.

5. Save main.css and test the changes.
6. Reload index.html in your browser. The new typeface should now appear throughout the page, though the size needs optimization.
7. Return to main.css in your code editor.

8. Enhance the body rule with improved font sizing:

   body {
      font-family: 'Abel', sans-serif;
      font-size: 19px;
      margin: 0;
   }

   19px provides excellent readability on modern displays while accounting for various viewing distances and device types.

9. Save the changes and reload to verify the improved text size.
10. Now let's create visual impact with our headline typography. Return to Google Fonts in your browser.

11. Copy the Medula One font family declaration:

    font-family: 'Medula One', cursive;

12. Switch back to main.css in your code editor.

13. Apply Medula One to the main heading:

    h1 {
      font-family: 'Medula One', cursive;
      font-size: 95px;
    }

14. Save and reload index.html to preview the new headline font.

You'll notice the browser is artificially emboldening the font since Medula One doesn't include a bold weight, and browsers default to bold for h1 elements. This creates suboptimal rendering that doesn't represent the font designer's intentions.

1. Return to main.css to correct this typography issue.

2. Add proper font-weight control to the h1 rule:

   h1 {
      font-family: 'Medula One', cursive;
      font-size: 95px;
      font-weight: 400;
   }

   Using 400 (equivalent to 'normal') prevents artificial bold rendering and displays the font as designed. This maintains typographic integrity and optimal legibility.

3. Save and reload to see the authentic font rendering.

   While Medula One displays correctly, its style may be too similar to our body text for effective hierarchy. Let's test our third option for better contrast.

4. Return to Google Fonts and copy the Rancho font declaration:

5. Copy the Rancho CSS rule:

   font-family: 'Rancho', cursive;

6. Return to main.css and update the h1 rule.

7. Replace Medula One with Rancho:

   h1 {
      font-family: 'Rancho', cursive;
      font-size: 95px;
      font-weight: 400;
   }

8. Improve the fallback font stack for better compatibility:

   font-family: 'Rancho', sans-serif;

   Since reliable cursive fallbacks don't exist across all platforms, sans-serif provides better consistency when custom fonts fail to load.

9. Save main.css and test the updated typography.

10. Reload index.html to see Rancho in action—this creates much better contrast and brand personality!

Removing an Unused Font

Optimization is crucial in modern web development. Unused fonts waste bandwidth, slow page loads, and consume mobile users' data allowances unnecessarily.

1. Switch to index.html in your code editor.

2. Remove the unused Medula One reference from your Google Fonts link:

   <link href="https://fonts.googleapis.com/css2?family=abel&family=rancho&display=swap" rel="stylesheet">

   This eliminates the &family=Medula+One parameter, preventing unnecessary font downloads.

3. Save the file to implement the optimization.

Styling the Subheading

Effective typography hierarchy guides users through content logically, establishing clear information architecture.

1. Our subheading needs refinement to support the main headline without competing for attention.
2. Return to main.css in your code editor.

3. Add this new rule below the h1 rule:

   h2 {
      font-size: 20px;
      font-weight: normal;
      text-transform: uppercase;
   }

   The smaller size creates clear hierarchy, while uppercase transformation adds sophistication and complements the decorative headline font.

4. Save and reload index.html to see the improved subheading treatment.

   The typography improvements are working, but the spacing between headlines needs adjustment for optimal visual relationships.

Improving Margins & Line-Height

Professional typography requires careful attention to white space relationships. Proper spacing creates breathing room and establishes clear content relationships.

1. Switch to main.css to refine the headline spacing.

2. Reduce the bottom margin on the main headline:

   h1 {
      font-family: 'Rancho', sans-serif;
      font-size: 95px;
      font-weight: 400;
      margin-bottom: 10px;
   }

3. Eliminate the top margin on the subheading for tighter grouping:

   h2 {
      font-size: 20px;
      font-weight: normal;
      text-transform: uppercase;
      margin-top: 0;
   }

4. Save and reload to see the improved headline relationship.

   The headlines now form a cohesive unit, but we need to balance the top margin of the main headline for symmetrical spacing.

5. Return to main.css for the final spacing adjustment.

6. Add controlled top margin to the h1 rule:

   h1 {
      font-family: 'Rancho', sans-serif;
      font-size: 95px;
      font-weight: 400;
      margin-top: 10px;
      margin-bottom: 10px;
   }

7. Save and test with various browser window widths.
8. Make your browser window wide to see the headlines in their optimal single-line layout.

9. Narrow the browser until "Curated" and "Coffee" wrap to separate lines—you'll notice excessive line spacing that disrupts readability:

   

10. Return to main.css to optimize line spacing.

11. Add precise line-height control to the h1 rule:

    h1 {
       font-family: 'Rancho', sans-serif;
       font-size: 95px;
       line-height: 90px;
       font-weight: 400;
       margin-top: 10px;
       margin-bottom: 10px;
    }

    The 90px line-height creates optimal vertical rhythm when text wraps, maintaining visual cohesion across different viewport widths.

12. Save and thoroughly test the line-height across various browser widths to ensure consistent rendering.
13. Now let's enhance the h3 section headings to improve content organization and scannability.

14. Add this comprehensive h3 rule below the h2 rule:

    h3 {
       font-size: 28px;
       border-bottom: 1px solid #d17e32;
       padding-bottom: 10px;
       margin-top: 40px;
       margin-bottom: 10px;
    }

    The border-bottom creates visual separation, while increased top margin provides clear section breaks. The warm orange border color complements the coffee theme.

15. Save and reload to see the improved section organization.
16. Let's optimize paragraph spacing and readability with professional typography standards.

17. Add this paragraph rule below the h3 rule:

    p {
       line-height: 32px;
       margin-top: 0;
       margin-bottom: 20px;
    }

    The 32px line-height provides comfortable reading rhythm, while consistent margins create predictable content flow.

18. Save the changes and preview the enhanced typography system.
19. Reload index.html to see the complete typography transformation. One final refinement will perfect the design.
20. Return to main.css for a subtle contrast adjustment.

21. Soften the text color for improved reading comfort:

    body {
       font-family: 'Abel', sans-serif;
       font-size: 19px;
       color: #555;
       margin: 0;
    }

    The dark gray (#555) reduces harsh black-on-white contrast while maintaining excellent accessibility standards.

22. Save the final changes.

23. Return to your browser and reload index.html to see the completed professional typography system.