ForHosting KIT · Home, food & hobbies

Golden ratio font size calculator

Start from a 16 px body and every heading grows by the square root of phi, so heading 5 lands exactly on 16 times phi. Get caption, body and six heading sizes that feel related. Free in your browser.

Free
Runs in your browser
No sign-up
Your data stays on your device

Run — free How it works & API

Use it from WebAPIEmailTelegramApp soon

Worked example

If you enter

Base: 16

You get

Golden ratio: 1.6180339888 px
Step ratio: 1.2720196495
Body: 16
Small: 12.5784220441

Designers use it as a modular scale so each type size feels proportionally related to the next instead of jumping by arbitrary pixels.

How phi sets each font size in turn

Start from a single base body size, typically sixteen pixels or one rem in contemporary UI kits. A pure integer power ladder multiplies by phi at every step, which jumps too far for six heading levels on a normal reading screen, so this calculator uses the half-step step ratio equal to the square root of phi, about one point two seven two. Body stays at base times step to the power zero.

Heading level six is base times step to the first power, heading five is base times step squared which is exactly base times phi, and so on up to heading one at base times step to the sixth power. One half-step below body is the small or caption size at base divided by step. Body line height is often set near base times phi because that vertical rhythm echoes the same ratio used horizontally in classical layouts.

A non-positive base is rejected because a zero or negative font size is not a valid modular origin and would collapse or invert the scale. Optional unit is only a label such as px, rem, em, or pt; the numbers are not converted between absolute units, which keeps the math honest and deterministic for design tokens you paste into CSS custom properties.

What you can do with it

Blog and docs style guides

Pick a readable body size for accessibility, then derive proportional headings for long-form articles without arbitrary pixel jumps.

FAQ

Which fields are required?

base (body font size) is required and must be finite and strictly positive. unit is optional and defaults to px; it labels sizes and does not convert between units.

What happens if the base size is zero or negative?

A non-positive base is not a valid origin for a modular type scale and is rejected rather than inventing sizes.

What does it cost?

The browser tool is free and runs locally.

Why does the scale use the square root of phi instead of phi?

Multiplying by phi at every step jumps too far for six heading levels on a normal reading screen. The half step keeps the sizes related, and heading 5 still lands exactly on the base times phi.

Does choosing rem or pt convert the sizes?

No. The unit is only a label next to the numbers; nothing is converted between units. Pick the one your style sheet uses and keep the same base you entered.

Related tools

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/hobby/golden-ratio-type

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/hobby/golden-ratio-type \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"base":16}'

const res = await fetch("https://api.kit.forhosting.com/hobby/golden-ratio-type", {
  method: "POST",
  headers: {
    "Authorization": `Bearer ${process.env.KIT_KEY}`,
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    "base": 16
  })
});
const { task_id } = await res.json();

import os, requests

res = requests.post(
    "https://api.kit.forhosting.com/hobby/golden-ratio-type",
    headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
    json={
    "base": 16
},
)
task_id = res.json()["task_id"]

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

body := bytes.NewBufferString(`{"base":16}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/hobby/golden-ratio-type", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)

Example request

{
  "base": 16
}

Example response

{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "hobby.golden_ratio_type",
  "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.

Technical notes

Zero, negative, missing, NaN, and Infinity bases fail with a clear invalid_input error so a broken scale never reaches CSS.

How the golden ratio builds a modular type scale

The pipeline is pure floating-point arithmetic with no network, no random seeds, and no wall-clock timestamps, so identical base and unit always produce identical JSON.

What you send and what you get back

Send base as a finite positive number for the body font size. Optionally send unit as a short string label such as px or rem; it defaults to px and only annotates labels, never converts magnitudes. Classic checks include base sixteen pixels yielding body sixteen, h5 equal to sixteen times phi, and h1 equal to sixteen times step to the sixth; base one rem for root-relative design systems; and base eighteen for slightly larger editorial bodies. Aliases include base_size, font_size, size, body, body_size, and base_font. Missing base, non-numeric strings, NaN, Infinity, zero, and negative values fail with invalid_input and are not charged. On success the response echoes cleaned base and unit, the exact golden_ratio and step_ratio constants, body and small sizes, a headings object with h1 through h6, flat h1 through h6 fields for simple clients, line_height and line_height_ratio, a scale array of role size exponent and label rows from h1 down through small, human-readable labels for every role, plus formula text and method golden_ratio_type so tests can assert the algorithm. Pricing for successful API calls is the published base of $0.002 per item; validation failures do not consume prepaid balance.

Where golden ratio font size calculators show up in real work

Product design systems constantly need a coherent type ramp so marketing landing pages, app settings, and help centers feel like one family; a single trusted oracle that returns every heading beside body and small text speeds token authoring in Figma handoff and CSS variables. Blog platforms and documentation sites assign modular scales when editors pick a root size for accessibility and need headings that still dominate without hand-tuned pixel soup. Frontend engineers writing theme packages want deterministic JSON they can snapshot in CI instead of eyeballing browser screenshots for every base size. Because this capability is a pure parse engine, API pricing is the published base of $0.002 per successful item and failed validation does not consume balance.

Integration use cases

Design-system type tokens

Generate h1–h6, body, small, and line-height values from one base size so CSS variables and Figma text styles stay on a golden modular scale.

Theme packages and CI fixtures

Bulk-produce deterministic type ramps for multiple base sizes and snapshot the JSON in regression tests before shipping a theme.

Technical questions

What is a golden ratio font size scale?

It is a modular type scale where sizes relate by the golden ratio φ ≈ 1.618 (or half-steps √φ). From a base body size you multiply by successive powers of the step ratio to get h6 up through h1.

How are h1–h6 related to the base?

With step = √φ, heading h_k equals base × step^(7−k). So h6 is one half-step above body, h5 equals base × φ, and h1 is six half-steps above body.

Read the full KIT documentation →

Run — free