Pick a base font size and a musical or geometric ratio, and get a labelled type scale — caption, body and headings — in pixels and rem, with a live preview at each step.
A modular type scale multiplies the base size by the chosen ratio once per step up, and divides once for the step below the base. Step 0 is body text at the base size; steps up are labelled h5 through h1 by convention, and the step below is the caption or small size. Rem values divide the pixel size by the base size, assuming the common setup where 1 rem equals the base font size. Gentler ratios near 1.2 suit dense interfaces; larger ratios suit display-led pages.
Which ratio should a beginner pick? A minor or major third (1.25 or 1.333) is a safe, versatile choice. Subtle ratios near 1.2 suit app interfaces, while 1.5 and the golden ratio make bold, widely spaced heading scales.
How are rem values calculated? Each pixel size is divided by the base size, so the base step is exactly 1 rem. That matches a stylesheet where the root font size equals the base size.
Why does the scale include a step below the base? Small text still needs a place in the system. The minus-one step covers captions, footnotes and fine print at a size in proportion with the rest.