Editorial Style Guide Generator

The editorial style guide generator turns a set of type decisions into the document a project needs, with every role, size, weight and leading stated rather than left implicit in a stylesheet. The output is Markdown, so it can live in the repository beside the code it describes.

What is Editorial Style Guide Generator?

The editorial style guide generator takes three faces and four numbers, derives seven roles from a single scale, and writes a Markdown document containing the role table and the rules that go with it.

• The three faces are display, text and UI, and they are assigned by role: display covers the display heading, H1 and H2 styles, text covers H3 and body copy, and the UI face covers captions and interface labels.
• Seven roles are defined on one scale: display at four steps above the base, H1 at three, H2 at two, H3 at one, body at the base, and caption and UI one step below.
• The base runs from 14px to 22px, defaulting to 17px, with a type scale ratio chosen from 1.125, 1.2, 1.25, 1.333, 1.414, 1.5 and 1.618, defaulting to 1.25.
• Leading is set once for body copy between 1.2 and 2.2, and every other role carries its own line height: 1.05 for display, 1.1 for H1, 1.2 for H2, 1.25 for H3, 1.45 for captions and 1.4 for interface text.
• The measure sets the upper bound named in the rules, and every size is reported in pixels and in rem alongside its weight and leading.

The role table is the part that a stylesheet cannot express: each row states the face, the pixel size, the rem value, the weight, the leading and the purpose, so a reviewer can see that the display face never appears below twice the base size and that interface text is a step below body rather than an arbitrary value. The generated guide then states six rules in prose. Body measure stays between 45 and the chosen maximum, and widening the container is done by adding columns rather than by stretching a single one. Headings never inherit body leading. Tracking is negative above twice the base size, zero at body size and positive for uppercase and captions. One emphasis mechanism is used per passage, whether bold, italic or colour. Figures in tables and captions are tabular while figures in prose may be proportional. And the UI face never appears in body copy while the display face never appears below twice the base.

• The faces are typed in by name and are not checked against any catalogue, so a misspelled family silently produces a guide that names a font nobody has.
• Five of the six rules are fixed text with the measure and the base size interpolated, so an unusual system cannot restate them.
• Weights are assigned per role rather than adjustable, which suits a conventional hierarchy and not a display system built on one weight.
• Colour, spacing, grid and motion are outside the guide entirely.
• The output is Markdown only, and it is copied rather than written to a file.

Use it when a project needs a type guide that reviewers and contractors can read, or when the same decisions keep being re-explained in tickets. The output is a Markdown style guide rather than a stylesheet, which is why it reads as rules, and generating it from the real numbers at the start of a project is what makes those rules enforceable later, since updating the guide and the stylesheet together is a two-minute job. Where the scale itself is the question, the type scale generator derives the steps and the modular scale calculator compares ratios, and if the hierarchy needs planning before the sizes are fixed, the type hierarchy planner works through the roles. The token generator is the companion that turns the same decisions into variables.

How to use Editorial Style Guide Generator

1. Name the guide and enter the three faces the system uses for display, text and interface type.
2. Choose the scale ratio, then set the base size, the body leading and the maximum measure with the sliders.
3. Read the role table and check the size range and face count in the results box, since a guide naming three faces where the design uses two is a sign the roles have drifted.
4. Copy the Markdown and commit it to the repository as a type guide, then keep it in step with the stylesheet as the scale changes.

When to use Editorial Style Guide Generator vs related tools

Reach for it at the start of a design system, when a team is about to build several pages from the same scale, or when a review keeps reopening questions about sizes that were never written down. It is the document that stops a hierarchy being re-invented page by page. Where the scale steps themselves need deriving, the type scale generator does the arithmetic, the modular scale calculator compares candidate ratios, and the type hierarchy planner settles which roles a project actually needs before any size is fixed.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.

Frequently asked questions about Editorial Style Guide Generator