Fontish Type Scale Builder

Fontish Type Scale Builder is a free browser tool for turning a body text size into a coherent set of display, heading, body, label, and supporting text styles. It addresses a common design problem that looks simple until a real page is involved. Picking a few font sizes by eye can produce weak hierarchy, inconsistent rhythm, and oversized mobile headings. The builder gives designers and developers a structured starting point, then lets them see the result in context before any values move into a codebase.

The setup is direct. A user chooses a font family, base size, scale ratio, line height, and heading weight, then sets desktop, tablet, and mobile breakpoints. Fontish calculates the related sizes and displays the generated scale in a table across those three viewport ranges. Preset ratios include familiar options such as Minor Third, Major Third, Perfect Fourth, and Golden Ratio. That makes it possible to compare a restrained interface scale with a more dramatic editorial one without calculating every step manually. The output covers more than large headings, so the system can account for the smaller roles that often get improvised late in a project.

The live preview is the most useful part of the workflow. Rather than showing isolated specimens only, the tool provides article, landing page, and dashboard views. Each view can be checked at desktop and mobile sizes, which makes awkward wraps and hierarchy problems easier to notice. A scale that looks polished in a marketing hero may feel wasteful in a dense dashboard, and a large ratio that works on a wide screen can overwhelm a phone. The builder encourages that comparison before export, while controls for weight and line height help the user evaluate rhythm alongside raw font size.

Once the scale feels right, Fontish can present the result as CSS, SCSS, or Tailwind output. Users can copy the code or download a CSS file, so the experiment can become an implementation without retyping every value. Responsive values are included rather than left as a separate exercise. The page also shows a compact accessibility check covering a body size of at least 16 pixels, comfortable line height, clear visual hierarchy, and the presence of responsive values. These checks are useful reminders, though they are not a substitute for testing contrast, zoom, language support, and real content in the finished interface.

The tool fits product designers, web designers, frontend developers, brand builders, and students who need a repeatable type hierarchy. It is especially practical at the beginning of a site or design system, when the team needs sensible tokens quickly but still wants room for visual judgment. It can also help with a redesign by exposing how a current collection of arbitrary sizes might be replaced with a smaller, related set. Because the previews use recognizable page patterns, less experienced users can see what a ratio means in practice instead of treating the number as an abstract typography rule. A useful working loop is to start from the intended body text, choose a modest ratio, and then move between the three previews while adjusting weight and line height. The generated table keeps desktop, tablet, and mobile values visible together, so the user can spot a breakpoint where one heading changes too sharply. Resetting and generating again is quick enough to compare several directions in one sitting. That makes the page useful during design discussion as well as implementation, since collaborators can evaluate the visible hierarchy before debating individual code values.

What separates the builder from a basic modular scale calculator is the combination of responsive settings, contextual previews, role-based output, and several export formats on one page. Fontish frames the generated values as a starting point rather than a universal answer. Different typefaces have different proportions, and the same numerical size can look very different across families. Real headlines, interface labels, translations, and narrow screens can still justify optical adjustments after export. The tool helps establish consistent logic, but it leaves the final design decision with the person using it.

Access is straightforward. The Type Scale Builder is free, requires no signup, and runs its calculations and previews instantly in the browser. There is no paid tier shown for the tool and no project workspace to learn before using it. That makes it easy to open for a quick scale, compare a few ratios, copy the chosen output, and move on. Teams that need shared libraries, version history, or full design token management will still need another system around it, but for building and testing a responsive typography foundation, its focused scope is a strength.