Typography & Units

This page offers two free tools for organising typography and interface measurements. Type scale builds a size ramp from a ratio, and Pixels and REM converts pixels and rem with a chosen base. They help designers and developers set a text hierarchy and translate values between units. Both tools need no sign-up and keep your work in the browser.

Start with Type scale if you need a progression of sizes, for example for headings and paragraphs. Use Pixels and REM when you already have values to convert or want to check a base. The two tools work well together: the scale sets the steps, then the conversion helps express them in rem. They are free and require no sign-up.

How to use

  1. Start with Type scale to set a progression of sizes and choose a ratio that fits your text hierarchy.
  2. Note the values you get, then use Pixels and REM to translate them into rem with your project base.
  3. Finally check that headings, subheadings, and body text stay readable and consistent across several screen widths.
  4. Check the conversions one last time with Pixels and REM on a small and a large screen, then adjust the base or steps if text feels too tight.

Frequently asked questions

Why use a type scale?

Type scale builds a size ramp from a ratio. It helps keep a consistent hierarchy between headings, subheadings, and body text. The tool is free and requires no sign-up.

Which base should I choose for Pixels and REM?

Pixels and REM converts with a chosen base. The base is the reference size you use in your project. Check that starting value before converting.

Do the two tools work together?

Yes. Type scale defines the steps, then Pixels and REM can convert the resulting values. This keeps a readable progression and suitable units. Both are free, require no sign-up, and stay in your browser.

How do I apply a scale and then convert to rem?

Define the steps first with Type scale. Note the sizes you want, then open Pixels and REM to convert those values with the chosen base. Check the result in your stylesheet to keep a regular hierarchy.

What should I check before choosing a ratio in Type scale?

Look at the difference between the smallest and largest planned text. A strong ratio can create gaps that are hard to use, while a weak ratio makes the hierarchy less clear. Then test the steps with Pixels and REM to express them in your units.

Tools in the same category