Skip to main content
dubinity

Design & Accessibility

Line Height Calculator

Turn a font size and a line-height ratio into pixels and rem, or find the unitless ratio for a target line height.

  • Runs in your browser
  • Works on mobile
  • In: Font size, RATIO, Target line height
  • Out: Line height (px), Line height (rem), RATIO

Inputs

px
px
px

Result

Line height

24

In pixels.

Line height in rem
1.5
Space above and below each line (px)
4
Unitless ratio for the target
1.75

Prefer a unitless line-height (e.g. 1.5) in CSS: it is inherited as a ratio, so nested text with a different font size keeps proportional spacing.

Your files and text are processed on your own device, inside this page. Nothing is uploaded to Dubinity or stored, and closing the tab discards it. How privacy works

About Line Height Calculator

Enter a font size and a line-height ratio to get the line height in pixels and rem and the space it adds around each line. Enter a target line height in pixels to get the unitless ratio to put in your CSS.

For body text, 1.5 is a common, readable choice: WCAG 2.2 recommends at least 1.5 within paragraphs at level AAA (1.4.8), and asks that content still works when a visitor sets it to 1.5 (1.4.12).

How to use it

  1. 1Enter your figures. The result updates as you type.
  2. 2Change the currency if you need to.
  3. 3Copy the result, or share a link that opens the same calculation.

Questions

Was this tool helpful?

Related tools

All design tools

  • PX to REM Converter

    Convert pixels to rem and rem to pixels for CSS, from any root font size, with points and percent alongside.

    Pixels · REM · Root size
    Runs in your browserOpen tool

  • Type Scale Generator

    Build a modular type scale from a base size and ratio, preview every step and export CSS, design tokens or Tailwind config.

    Base size · RATIO
    Runs in your browserOpen tool

  • Color Contrast Checker

    Check the WCAG 2.2 contrast ratio of a text and background colour, with AA and AAA verdicts and the nearest passing colour.

    HEX · RGB · HSL
    Runs in your browserOpen tool

  • Color Converter

    Convert a colour between HEX, RGB, HSL, HSV, HWB, CMYK and OKLCH, with contrast against black and white.

    TEXT
    Runs in your browserOpen tool

  • Lorem Ipsum Generator

    Generate placeholder paragraphs, sentences or words, in classic Latin or in Arabic filler text.

    NONE
    Runs in your browserOpen tool

  • Color Palette Generator

    Generate colour palettes from a base colour and a harmony, or at random with locks, then export CSS, tokens, Tailwind or a PNG.

    HEX · RGB · HSL
    Runs in your browserOpen tool