JPKCom DB

Fonts — Examples

Hands-on runs with the Fonts tester: compare typefaces A/B, test web fonts and local files, check glyph coverage, build clamp() sizes and a type scale.

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

The Manual explains every source, tab and option in detail. This page adds concrete workflows: typical tasks, walked through step by step. The interface is in English, so labels appear as they do on screen.

Example 1: Compare two Google Fonts side by side

You are torn between two typefaces and want to see which suits your text better. The tool has two slots and a dedicated comparison tab for exactly that.

  1. Open the tester. In the Font Selection card the Font A slot is active. In the Google Fonts tab, type "Inter" into the Search field and click Inter in the list. The status next to "A" changes from "loading…" to "loaded".
  2. Switch to Font B (compare) at the top, search for "Source Sans" and click Source Sans 3. The second typeface lands in slot B.
  3. Open the Compare A / B tab. Replace the text in the Sample text field with your real content — your page heading, say — and use the Size slider to set the size it will actually appear at.
  4. Below that, the Paragraph card shows a paragraph of body copy in both typefaces side by side. This is where you see which one reads more calmly at paragraph length and fits more text per line.
  5. Pick a cut in the Weight / style bar, for instance 700 — both columns switch together, so you compare the bold weights directly as well.

When comparing, look past the overall impression to the details that only show up in running text: the legibility of small sizes, the shape of the figures, and how calm the text feels at paragraph length. For reading flow in a full layout, the next step is the Editable Sample Layout — it shows Font A, so switch back to Font A and click the winner there again.

Example 2: Preview your own web font via its CSS URL

You have a licensed font from a provider (Adobe Fonts, Bunny Fonts, Fontshare) or your own @font-face stylesheet on a CDN, and you want to check it before embedding.

  1. Copy your font's stylesheet URL — the exact address you would otherwise put in a <link> in the <head>, for example:

    https://fonts.bunny.net/css?family=lato:400,700

  2. In the tool, open the Stylesheet URL tab and paste the address into the Stylesheet URL (https) field. It must start with https://.

  3. Leave the Font family name field empty and click Load stylesheet (or press Enter).

  4. If the provider allows reading the rules via CORS, the tool detects the family from the @font-face rules on its own, fills it in and reports "loaded". If the stylesheet defines several families, the status names the others, and you will find them as suggestions in the Font family name field. To use another family, pick it there and click Load stylesheet again.

  5. If the status instead says "loaded — enter the font family name …", the server does not expose its rules. Enter the exact family name from the provider's documentation (e.g. "Cabinet Grotesk") and click Load stylesheet once more.

With the font in slot A, all weight buttons are active for this source — pick the cut you actually licensed and included in the stylesheet.

Example 3: Check glyph coverage for accents and symbols

A pretty typeface is no use if it lacks the eszett or its euro sign falls out of line. That is exactly what you check in the Glyphs tab before you commit.

  1. Load your candidate typeface into slot Font A (from any source) and wait until the status turns green — "loaded", "loaded from file" for a local file, "installed on this device" for a system font.
  2. Switch to the Glyphs tab. You see a grid of characters, each cell with an entity number and a rendered glyph.
  3. Walk through the characters your project needs. For multilingual or German content, that means the umlauts (ä, ö, ü, Ä, Ö, Ü), the eszett (ß), the typographic quotation marks (“ ” ‚ ‘) and the euro sign (€). In the grid you find them in the extended Latin block and among the punctuation.
  4. Watch for cells that break ranks. If a character is missing from the font, the browser sets it in a fallback font or shows a notdef glyph — a clear sign the typeface is not complete for your language.

With decorative or very young Google Fonts this pays off: many cover the basic alphabet but fall short on ligatures, dashes or special characters.

Example 4: Judge a typeface in a real layout

Almost any typeface looks good as a sample alphabet. Whether it holds up in running text is what the Editable Sample Layout shows.

  1. Load your typeface into slot Font A.
  2. Open the Editable Sample Layout tab. The chosen font renders a full magazine layout: headings, multi-column text, a quote, a list and an info card.
  3. Replace the placeholder text with real content. The whole layout is editable — click into a heading or paragraph and write your own text. That lets you judge legibility, line spacing and how bold, italic and hierarchy levels interact in a realistic context. Leave the Weight / style bar unset for this — a chosen cut would apply to every element, headings and emphasis included.
  4. Check the spots where weak typefaces give themselves away: long paragraphs at reading size, the contrast between heading and body, and how clearly emphasis (bold/italic) stands out.

This view complements the Specimen tab: the specimen tests sizes and characters, the sample layout tests reading flow.

Example 5: Build fluid typography with the clamp() calculator

You want a heading that is not too big on a phone and not too small on a desktop — without half a dozen media queries. That is what the Clamp() Calculator is for.

  1. Open the Clamp() Calculator tab.

  2. For a quick start, click a Type Scale Preset, e.g. H1 — that sets the unit to rem and the two sizes to 2 rem and 3.5 rem. Or enter your own values in Size at the min viewport and Size at the max viewport.

  3. Set the viewport range to interpolate over — default 320 px (small phone) to 1440 px (large desktop). Leave Output unit on rem (recommended).

  4. Read the result. The clamp() Value field holds the finished expression, with the full line in CSS Property below it. Both can be copied with a click:

    font-size: clamp(2rem, 1.5714rem + 2.1429vw, 3.5rem);

  5. Check the notes below the result. With H1, the larger size is 1.75 times the smaller one — no warning. Enter 1 rem and 3 rem as a test and the calculator reports that 3× is above the 2.5 limit and the text may not reach 200 % when users zoom (WCAG 1.4.4).

  6. Watch the live preview. The preview text in Font A scales with your window; its header shows the current viewport width and the resulting size. Drag the browser window narrower and wider to see the font grow.

  7. If you need the value not as raw CSS, open the Code Examples accordion: it gives the same value as a CSS custom property and as a Tailwind class, plus a call to the SCSS function fluid() for Dart Sass (unrounded, always in rem — see the manual):

    <p class="text-[length:clamp(2rem,1.5714rem_+_2.1429vw,3.5rem)]">

In under a minute you have a clean, cross-device font size — and you can see at once whether the span between the two sizes is sensibly chosen.

Example 6: Test a local font file without uploading it

You have a typeface as a file on your machine — bought from a foundry, taken from a client project or fresh out of a font editor — and you want to see it next to a Google alternative.

  1. Keep the slot on Font A and open the Font file tab.
  2. Drag the file (e.g. Brand-Regular.woff2) onto the drop zone or click Choose files. TTF, OTF, WOFF and WOFF2 up to 20 MB per file are accepted. The status shows "loaded from file", and the file also appears in the list below the drop zone.
  3. Switch to Font B (compare), go to the Google Fonts tab and load a freely available alternative.
  4. The Compare A / B tab now shows your house font and the alternative side by side — with your own sample text.
  5. If you loaded several files (say Regular and Bold as separate files), click an entry in the file list to put it into the currently active slot.

Your browser reads the file through the FontFace API; it is not uploaded. After a page reload it is gone and has to be selected again.

Example 7: Generate a fluid type scale for the whole project

Instead of running every heading through the calculator one by one, the Fluid type scale produces all steps at once.

  1. Open the Clamp() Calculator tab and set the viewport range and the Root font size at the top — the scale takes over both.

  2. Scroll to the Fluid type scale card. Set Base at min viewport (px) to 16 and Base at max viewport (px) to 18: body text then grows from 16 to 18 px.

  3. Choose the ratios: Ratio at min viewport 1.2 Minor third for a calm phone layout, Ratio at max viewport 1.25 Major third for more contrast on large screens.

  4. The table lists the steps from --step-5 down to --step--2 with min/max size, clamp() value and an "Aa" sample in your Font A.

  5. Click Copy CSS and paste the block into your stylesheet:

    css
    :root {
    --step--2: clamp(0.6944rem, 0.6871rem + 0.0365vw, 0.72rem);
    --step--1: clamp(0.8333rem, 0.8143rem + 0.0952vw, 0.9rem);
    --step-0: clamp(1rem, 0.9643rem + 0.1786vw, 1.125rem);
    --step-1: clamp(1.2rem, 1.1411rem + 0.2946vw, 1.4063rem);
    --step-2: clamp(1.44rem, 1.3492rem + 0.454vw, 1.7578rem);
    --step-3: clamp(1.728rem, 1.5939rem + 0.6704vw, 2.1973rem);
    --step-4: clamp(2.0736rem, 1.8813rem + 0.9614vw, 2.7466rem);
    --step-5: clamp(2.4883rem, 2.2183rem + 1.3499vw, 3.4332rem);
}

body { font-size: var(--step-0); }
h1   { font-size: var(--step-5); }
h2   { font-size: var(--step-4); }

You add the last three lines yourself — the tool only supplies the variables. That way every size hangs off the same four settings: if you change the base or the ratio later, you regenerate the scale and swap the block.

Go deeper: the overview for the big picture, the Manual for every option in detail, and the Tips & Tricks for tricks and pitfalls. You can try everything directly in the tool.