Photo by Dan Cristian Pădureț / Unsplash

Frontend Tools

Accessibility Mar 6, 2023

1) The good line-height

Have you ever needed to create a type scale following an 8 point baseline grid, or really any grid, and had to spend extra time figuring out what should be the right line-height for every text size in the scale?

No worries! The good line-height calculates the exact number so it always fits the baseline grid!

The good line-height

2) Golden Ratio Typography (GRT) Calculator

  • Discover the perfect typography for your website by entering your current (or desired) font, font size, and/or content width
  • Experiment with different fonts, sizes, and widths to see what works best
  • Optimize for the ultimate reading experience on any device

3) Utopia

Utopia emerges when designers and developers share a systematic approach to fluidity in responsive design. Instead of designing for x number of arbitrary breakpoints, we can design a system within which elements scale proportionally and fluidly. This can help you to:

  • Design and code minimally and elegantly
  • Streamline collaboration between design and development roles
  • Ensure visual harmony and consistency

Utopia is not a product, a plugin, or a framework. It’s a memorable/pretentious word we use to refer to a way of thinking about fluid responsive design. There’s no program or dependency to install, although we are developing some free tools to support your next Utopian project:

Fluid Space Calculator
Fluid responsive design


Error to 200

Error to 200 means "Error to Success Status". Through this blog and youtube channel, I attempt to teach basics and those coding techniques to people in a short time, which took me ages to learn.