JPKCom DB

Fonts — Tips & Tricks

Tricks for the Fonts tester: judge typefaces in an A/B comparison, glyph and weight traps, privacy, clamp() with an eye on WCAG, and fluid type scales.

Back to the overview: Fonts · Open the tool: www.jpkc.com/tools/fonts/

The Manual explains every feature; the Examples show the workflows. This page is about what both assume: what to look for when comparing, what traps the tool has, and how to keep privacy in view. The interface is in English, so the real labels appear as on screen.

Compare typefaces wisely

  • Compare on your text, not on "AaBbCc". The editable rows in the Specimen tab and the Editable Sample Layout exist precisely for this: type your real heading, your real brand name, your real body copy. A typeface that shines in the sample alphabet can stumble on your actual word — and vice versa.
  • Compare side by side, not one after the other. Put the two candidates into the two slots with the Font A / Font B (compare) switch and open the Compare A / B tab: your own sample text, one size for both and a paragraph of body copy next to each other. Memory plays more tricks than you think when you keep reloading fonts (see Example 1).
  • Check the slot before you click. Every pick lands in whichever slot is active. To get back to Specimen or the layout after a comparison, switch to Font A — those tabs only show Font A.
  • Judge at reading size, not just large. Display sizes flatter. The decisive question is often how a typeface behaves at 14–18 px in a paragraph — which is what the small steps in the specimen table are for.
  • Keep a system font alongside as a reference. Put a system font such as Georgia or Segoe UI into slot B. If your chosen face offers no clear advantage over a solid system font, picking the system variant saves you a web-font download.
  • Take "not installed" seriously. The system list flags fonts that are missing on your device. Pick one of those and all you see is the browser's fallback — and visitors on other systems may see something different again. For a reliable comparison, use an installed font or load the file itself via Font file.

Glyphs and weights — the common traps

  • Always check glyph coverage before you commit. Young or decorative Google Fonts in particular often cover only the basic alphabet. In the Glyphs tab, cells set in a fallback font or shown as a notdef glyph immediately reveal whether the eszett, the umlauts, the euro sign or the typographic quotation marks are missing.
  • Watch the disabled weight buttons on Google Fonts. They are not a glitch but information: they show the cuts that font does not have. If a Light (300) or Black (900) you need is greyed out, the typeface is out — or you live with a substitute: instead of a missing Light the browser shows the nearest available cut, instead of a missing Black also an available one or an artificially emboldened one.
  • Synthetic cuts on system, file and stylesheet fonts deceive. With a font from the System, Font file or Stylesheet URL source in slot A, all 18 weight buttons are active. That does not mean the font really ships every cut — if one is missing, the browser falls back to the nearest available one; only bold weights and italic does it compute artificially (faux bold/italic). The tool registers a single file such as Brand-Regular.woff2 as exactly one cut with weight 400: 100 to 500 then show that Regular unchanged, while 600 to 900 and italic are synthetic. Rely on what you licensed and included, not on the button.
  • The buttons follow Font A. In the comparison, a chosen cut applies to both columns, but which buttons are enabled depends only on Font A's styles. If Font B lacks that cut, you see a substitute there: the nearest real cut or, for bold and italic, an artificially generated one — when in doubt, put the typeface with fewer styles into slot A.
  • If the status stays on "loading…" or says "did not load within 10 s", do not trust the preview. The tool only reports "loaded" once the browser can really render the font. Until then the preview shows the fallback, and any judgement would be a judgement of the wrong typeface.

Keep privacy in view

  • A Google Font preview contacts Google. The moment you pick a Google typeface, your browser loads it directly from fonts.googleapis.com and fonts.gstatic.com — Google sees your IP. For a quick preview that is harmless. For production, though, the usual lesson holds: self-host web fonts rather than embedding them live from Google, otherwise the embed is a GDPR (opens in a new tab) concern.
  • Stylesheet URLs go to their provider. An address loaded in the Stylesheet URL tab is fetched straight from your browser too — the provider (Adobe, Bunny, your CDN) gets a request carrying your IP. That is intended while testing, but good to know.
  • The font list is harmless. Searching and filtering the Google list runs off a list cached on the tool's server, not through Google. Only clicking a font triggers the Google request.
  • Unreleased typefaces belong in the Font file tab. A house font or a typeface under NDA does not have to go on a CDN to be tested: the browser reads local files itself, and they never leave your machine.

Use the clamp() calculator properly

  • Start with a preset, then fine-tune. The Type Scale Presets (Small to Display) set sensible size pairs in rem for you; from there you adjust to your design. That is faster than starting from scratch.
  • Stay within the 2.5 limit. If the larger size is more than 2.5 times the smaller one, the calculator warns you: a large vw term barely reacts to browser zoom, so the text may not reach 200 % (WCAG 1.4.4). Narrow the span rather than ignore the warning.
  • Output rem, not px. The default rem (recommended) is there for a reason: rem bounds grow when users raise the default font size in their browser; px bounds stay put. The px output is meant for projects that deliberately work in px.
  • em here means relative to the root font size. The calculator converts em input like rem, because it does not know the parent element's context. If your element sits in a container with a different font size, convert the values to rem or px first.
  • Shrinking sizes are allowed. Enter a smaller value for the widest viewport and the font gets smaller on wide screens — the calculator still sets the bounds correctly and flags it. That makes sense for, say, huge display lines meant to fill the screen on a phone.
  • Set the viewport range realistically. Min Viewport 320 px and Max Viewport 1440 px cover most cases. Set the maximum too high and the font barely grows on normal screens; too low and it is already capped on large monitors.
  • Trust the live preview, not just the number. Drag the browser window narrow and wide and watch the preview text. The readout names the current viewport width and the resulting size — so you see whether the span between min and max interpolates pleasantly or jumps too abruptly.
  • Take the right code form. If you need the value as a design token, grab the CSS custom property from the Code Examples accordion; in Tailwind, the arbitrary-value class; in a Sass project, the fluid() function for Dart Sass. You do not have to translate the clamp() expression into your format by hand (step by step in Example 5).
  • Do not "tidy up" the Tailwind class. In text-[length:clamp(…_+_…)], underscores stand in for spaces, and length: tells Tailwind a size is meant. Add spaces or drop length: and Tailwind generates no rule or the wrong one.
  • A scale beats single values. For a whole project, the Fluid type scale below the calculator is usually the better route: set base and ratio for each viewport, click Copy CSS, and every step from --step--2 to --step-5 hangs off the same parameters (Example 7). A smaller ratio at the small viewport keeps headings compact on phones.

Pair with other JPKCom tools

  • Found a typeface? Now the colour. Typeface and colour together decide the tone of a design. With Colors you build the palette that fits your type.
  • Embedded a web font? Check how it is included. A font stylesheet in the <head> can block rendering. The SEO & GEO Analyzer shows you, on a real URL, whether your font stylesheet is included as a render-blocking resource and which resource hints (preload, preconnect) are set. It does not fetch or measure the font files themselves.
  • Glyphr Studio for the editing step. If you want not just to test a typeface but to adjust or draw one, the link at the foot of the page leads to the external editor Glyphr Studio (opens in a new tab).

More context: the overview for the big picture, the Manual for every feature, and the Examples for the step-by-step workflows. You can try everything directly in the tool.