Type scale

These cards are in the Design tab. Hover a row to outline its element on the page, and click it to select it, which fills the Element tab.

Type scale lists every distinct way text is set on the page: size, weight, first font, line height as a multiple, and italic, with how many elements use it and a sample in that style. It shows whether the page keeps to a scale or has drifted into forty near-identical sizes.

• The largest are first, then the heaviest, then the most used.
• The first rows show, with the rest behind Show more.
• Hover a row to outline the first element in that style, click it to select it; the tooltip gives the weight, family and line height.
• The dots on a row are the text colours set in that style, the most used first; their tooltip lists them all.

Only elements with text of their own that are drawn count, so hidden and empty boxes are left out. Text inside shadow roots and same-site frames is read.

Against a modular scale#

Under the list, the sizes are checked against a modular scale: each size a whole number of steps from the most used one (usually body text), each step a fixed ratio, such as 1.25 (a major third). Nitpique picks the ratio that puts the most sizes on a step, or you choose one. A size counts as on its step within a quarter of the gap to the next. Sizes off the scale are listed with the step they are nearest, and marked in the list. Near duplicates pairs sizes a pixel or 5% apart, which were likely meant to be one.

Copy as CSS variables#

Copy as CSS variables copies the scale as custom properties, named the way Tailwind names its text sizes: the most used size is --text-base, larger ones --text-lg, --text-xl and up, smaller ones --text-sm and down, each with the line height most used at that size, then the weights and the families.