Small-caps generator for variable fonts

Preparing the font analyzer…

Choose a suggested Google family to load it immediately, or press Generate small-caps. You can also drop a font file here or use the file picker below.

Installed fonts & local files

Open a variable font file

Google suggestions apply immediately. For an installed font, enter one name and press Enter. Lists are not supported. Installed families are measured in the browser without font-file access; static fonts are supported. Quote a name to prefer its local version over Google. Fonts available only inside an app, such as Office cloud fonts, may need system installation first.

File imports require a variable weight axis. Choose a Google family/link/CSS embed, or paste a direct HTTPS WOFF, WOFF2, TTF or OTF URL (16 MB maximum). The font host must allow CORS, including access from local files. All processing is done in your browser; no data is sent to a server. A usable width axis enables independent width fitting.

Start with a font

Choose a Google font, enter an installed family, or open a font file using the panel on the left.

Your preview, outline comparison, and CSS will appear here.

How fonts compare

ReferencesCompare Text weight Optical design

CSS-only calibration: actual wght/wdth axes, no geometric stretching. Green squares = serif; orange circles = sans-serif. Roboto Mono is grouped by its sans-serif letterforms. Reference type and width-axis availability are listed in the table and tooltips. Numbers identify table rows. Optical designs use each font’s own endpoint, not a shared numeric size; base width and other axes stay at defaults. These measurements are embedded and work offline; extra font files are not bundled.

Orange circles: sans-serif. Green squares: serif. Focus a point and use arrow keys to explore; Home and End move to the first and last point. Read the measurements table.

Hover or focus a point for its measurements; the complete values are in the table.

Copy the chosen CSS

JavaScript

Run after the small-caps markup, or load with defer.

Usage and fit details

Use <span class="smcp">Lord</span> inside .smcp-text. One span per word, spaces outside.

HTML + CSS and measurements

Take the recipe with you

The recipe below includes the markup and any width-correction script required by your selected mode. URL imports retain their source; installed faces use local(). File imports need your own licensed font URL.

Font verification & measurements