Fluid Typography & Flexible Images

1. Welcome and Icebreaker:

• Icebreaker: “What is your favorite font or image style on the web?”

2. Outline the Session:

• Agenda:
  • Responsive text with relative units (em, rem, vw)
  • Flexible images
• Learning Outcomes:
  • Use relative units for scalable typography
  • Make images responsive
• Structure:
  • Theory, live coding, and hands-on practice
  • Interactive Q&A

3. Concept Explanation:

Fluid typography uses units like em, rem, and vw to scale text based on the viewport or parent element. Flexible images use CSS to adapt to different screen sizes, ensuring they never overflow their container.

4. Live Coding Demonstration:

Example of fluid typography and flexible images:

<style>
h1 {
  font-size: 4vw;
}
p {
  font-size: 1.2em;
}
img {
  max-width: 100%;
  height: auto;
}
</style>
<h1>Fluid Typography</h1>
<p>This text and image scale with the viewport.</p>
<img src="example.jpg" alt="Example image">

• Step-by-step:
  • Use vw, em, or rem for font sizes.
  • Set images to max-width: 100% and height: auto.
• Best Practice: Test on various devices.
• Common Pitfall: Using only px units for fonts or fixed image sizes.

5. Tasks:

• Exercise:
  • Create a page with a heading and paragraph using vw and em units.
  • Add an image and make it flexible.
  • Resize your browser to see the effect.