ForHosting KIT · Developer Utilities

Pixels to percent font size converter

The pixels to percent font size converter turns a fixed pixel measurement into a percentage based on the font size of its parent element.

● BetaFree · in your browser

Run — free How it works & API

Use it from WebAPIEmailTelegramApp soon

Enter the intended pixel size and the parent size, and the calculator returns both the numeric percentage and a ready-to-use CSS value. This is useful when you are replacing fixed typography with inherited sizing, matching an existing design without changing its visual scale, or documenting the relationship between nested text and its surrounding context.

Convert an existing pixel design accurately

Start with the font size you want to reproduce and the computed font size of the element that will become its parent. The converter divides the pixel size by the parent size and multiplies that ratio by one hundred. For example, an 18-pixel child inside a 16-pixel parent becomes 112.5 percent. You can paste the returned CSS value directly into a font-size declaration. The parent measurement matters because percentages do not describe an absolute physical size; they describe a relationship in the inheritance chain. If the parent later changes from 16 pixels to 20 pixels, a child declared as 112.5 percent grows with it. Use the actual immediate parent font size, not an unrelated root or body value, unless that element is truly the parent whose computed font size the child inherits. Precision controls how many decimal places are retained, helping you balance exact design matching against readable stylesheet values. Integer results remain compact and do not gain unnecessary trailing zeroes.

Understand how CSS font percentages behave

A percentage font size is resolved against the computed font size of the parent element. One hundred percent means the same size as the parent, fifty percent means half the parent size, and one hundred fifty percent means one and a half times that size. This behavior makes percentage typography naturally responsive to inherited changes, but it also means nesting can compound. If one container is set to 125 percent and a child inside it is also set to 125 percent, the child becomes 156.25 percent of the size outside both levels. The converter calculates one relationship at a time, so always supply the parent size at the exact level where the new declaration will live. Percentage font sizes and em units express the same parent-relative ratio for font-size, but their syntax and common design-system conventions differ. This tool specifically returns percentage syntax, which can make scale relationships immediately legible to people reviewing a stylesheet or translating a pixel-based specification into inherited CSS rules.

Use the result safely in a typography system

Treat the converted value as a faithful starting point, then test it in the real layout. Browser zoom, user font preferences, fallback fonts, line height, and available width can all affect how text appears even when the mathematical font size is correct. Percentage sizing is especially helpful for components that should follow a surrounding text scale, such as captions, badges, navigation labels, and nested headings. It can be less suitable when repeated nesting would make the final scale difficult to predict. In those cases, a root-relative unit or a design token may be easier to maintain. Keep enough decimal precision to avoid visible drift, but avoid carrying meaningless digits from approximate design measurements. The calculator rejects a zero or negative parent because no useful CSS percentage can be derived from it, and it rejects negative child sizes because CSS font sizes cannot be negative. The returned formula and normalized inputs make automated conversions easy to audit before generated declarations are committed to a stylesheet.

What you can do with it

Modernize a fixed stylesheet

Replace pixel font declarations with parent-relative percentages while preserving the current visual size.

Implement a design handoff

Translate pixel measurements from a design file into CSS values that inherit from a component container.

Document component scale

Express captions, labels, and headings as clear percentage relationships to their immediate parent text.

FAQ

What formula does the converter use?

It calculates pixel size divided by parent size, then multiplies the result by 100.

What should I use as the parent size?

Use the computed font size of the immediate parent element that the percentage declaration will reference.

Is 100 percent always 16 pixels?

No. One hundred percent equals the parent font size, whatever that computed size happens to be.

Are font percentages the same as em units?

For the font-size property, both express a ratio relative to the parent, but this converter returns percentage syntax.

What does the API request cost?

Each API request costs $0.002; the calculator is also available to run in the browser.

For developers — API access

Everything on this page is available programmatically. This section is for teams who want to wire it into their own systems; everyone else can just use the tool above.

API endpoint

POSThttps://api.kit.forhosting.com/str/px-to-percent

Prefer to automate it? One authenticated POST creates the task; the result comes back by webhook or a signed link. The same capability also runs here on the web, by email and from Telegram — and soon from our app too.

Call it from your stack

curl -X POST https://api.kit.forhosting.com/str/px-to-percent \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"pixel_size":18,"parent_size":16}'

const res = await fetch("https://api.kit.forhosting.com/str/px-to-percent", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "pixel_size": 18,
    "parent_size": 16
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/str/px-to-percent",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "pixel_size": 18,
    "parent_size": 16
},
)
task_id = res.json()["task_id"]

<?php
$res = file_get_contents("https://api.kit.forhosting.com/str/px-to-percent", false, stream_context_create([
  "http" => [
    "method"  => "POST",
    "header"  => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
    "content" => '{"pixel_size":18,"parent_size":16}',
  ],
]));
$task = json_decode($res, true);

body := bytes.NewBufferString(`{"pixel_size":18,"parent_size":16}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/str/px-to-percent", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

Example request

{
  "pixel_size": 18,
  "parent_size": 16
}

Example response

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "str.px_to_percent",
  "status": "queued",
  "_links": {
    "result": "/tasks/tsk_…/result"
  }
}

The API is asynchronous: the call returns a task_id immediately and the result arrives by webhook. Polling is capped at 1 req/s per task.

Pricing

Per request$0.002

Published price — no tokens, no invented credits. A failed task is never charged.

Errors

HTTP	Code	Meaning
`401`	`unauthorized`	Missing or invalid API key.
`402`	`insufficient_balance`	Your balance doesn't cover the task price.
`404`	`unknown_type`	That task type doesn't exist.
`429`	`rate_limited`	Too many requests. Use the webhook instead of polling.

Read the full KIT documentation →