Handling responsive images and typography ensures that both visuals and text adapt gracefully across devices. CSS breakpoints help resize images and adjust font sizes for different screen widths, maintaining clarity and visual balance.

Techniques for Responsive Images

1
Use max-width: 100% and height: auto to make images scale within their containers.
2
Apply media queries to change image sizes or switch to alternative images at specific breakpoints.
3
Use the HTML <picture> element or srcset for serving different image resolutions to various devices.

Example: Resizing Images at Specific Breakpoints

In this example, the image width changes at 768px and 1024px breakpoints to optimize layout and visual hierarchy across screen sizes.

Techniques for Smooth Font Scaling

1
Use the clamp() function to define a minimum, preferred (fluid), and maximum font size.
2
Combine relative units (vw, em, rem) to make font size responsive to viewport width.
3
Use media queries for additional fine-tuning between major breakpoints.

Example: Fluid Typography Between Two Breakpoints

Here, clamp() ensures that font sizes grow smoothly between two breakpoints — never shrinking below the minimum or exceeding the maximum. This method provides a natural scaling effect without the need for multiple media queries.

Scenario Questions

0-2 years experience

1We have a product page with a hero image that should be 100% width on mobile, 50% width on tablets, and 33% on desktop. How would you write the CSS to achieve that?
2You need the body text to be 14px on screens up to 600px wide and 18px on screens 1200px and wider, with a smooth transition in between. What CSS technique would you use and how would you implement it?

2-5 years experience

1During a sprint you notice that the image in the sidebar stops scaling correctly after a new breakpoint was added. Walk me through how you'd debug and fix the issue.
2Our design team wants the heading font size to scale fluidly between 24px at 480px viewport width and 48px at 1440px. Explain how you'd implement this, and discuss any trade‑offs compared to using media queries.

5-8 years experience

1We’re building a component library that must support responsive images and fluid typography across many products. How would you structure the CSS or design tokens to make these patterns reusable and maintainable at scale?
2Consider performance: loading multiple image variants for each breakpoint can increase payload. What strategies would you employ to balance image quality, bandwidth, and CSS complexity?

8+ years experience

1Our company is migrating a legacy monolithic site to a component‑based architecture with a design system. How would you approach standardizing responsive image handling and fluid font scaling across dozens of teams while minimizing breaking changes?
2Discuss the long‑term maintenance implications of using CSS clamp() for fluid typography versus a JavaScript‑based solution in a large, multi‑brand ecosystem.

Follow-up Questions

What browsers or devices would you prioritize testing on?
How would you preserve an image’s aspect ratio when it resizes at each breakpoint?
Can you describe a scenario where fluid typography could break a layout and how you'd fix it?

Sharethis question

Share via WhatsApp, X, Facebook, LinkedIn or copy link. Open Graph preview enabled.