Local Font Inspector - Online See All Font Metrics
Select a local font and see all its metrics: ascent, descent, x‑height, and supported features. Typography deep dive.
UD5 Toolkit
✏️ Click directly on the text to edit your own sample.
font-family: Arial; font-size: 48px; font-weight: normal; font-style: normal; color: #000000; background-color: #ffffff; text-align: left; text-decoration: none; letter-spacing: 0px; line-height: 1.5; text-shadow: none;
Instantly test and compare how text looks using fonts installed on your device. Adjust font size, weight, style, colors, and more — all in real time.
font-family names and your system renders them if available.Select a local font and see all its metrics: ascent, descent, x‑height, and supported features. Typography deep dive.
See which fonts map to generic families (serif, sans‑serif, monospace) on different operating systems. A handy reference.
Detect browser support for font‑tech() and font‑format() values in @font‑face src. Check COLRv1, variable, etc.
Build a complete font‑stack for your website. Choose a primary font and get the best fallback options for different OS. Copy the CSS.
Load any variable font from Google Fonts or local file and play with weight, width, slant, and custom axes. Download CSS.
Type any character and see how it renders in different font stacks. Detect missing glyphs and fallback behavior.
Apply East Asian glyph variants like jis78, proportional-width, ruby. See the difference instantly. For CJK typography.
Choose a font family and see how it renders famous pangrams (The quick brown fox…). Instant web font loader.
Paste your full CSS and HTML; automatically identify and extract the styles needed for the visible part. Reduce render‑blocking resources.
Toggle OpenType features like liga, smcp, tnum, and see the text update. Support for variable fonts. Typography nerds.
Toggle between light and dark mode for a demo page. See how to use the media query. Copy the pattern.
Highlight elements with aria‑describedby and see the linked description text. Verify a11y annotations.
See how a full paragraph looks with your chosen text and background colors. Not just a ratio; the real appearance.
Select character sets (Latin, Cyrillic, Greek) and generate the exact unicode‑range descriptor for your fonts. Improve performance.
Paste HTML and see a collapsible tree of tags. Understand document outline and nesting. Handier than raw code.
Simulate forced‑colors mode and see how your site looks. Adjust CSS system colors. Make your design accessible.
Apply dyslexia‑friendly fonts, spacing, and background to any text. Preview and copy the formatted version. Improve readability.
Choose tabular‑nums, diagonal‑fractions, ordinal and see the effect on a numeric list. Elegant data presentation.
Paste a website's HTML and see which text is only visible to screen readers (e.g., .sr‑only). Preview the accessible layer.
Beautify and format your CSS stylesheets instantly. Organize, minify, or prettify CSS code for better readability. Processed securely on client-side.
Style a drop cap using the initial‑letter property. Set size and sink. Modern alternative to pseudo‑element hacks.
Style a drop cap using the initial‑letter property. Set size and sink. Modern alternative to pseudo‑element hacks.
New CSS text‑spacing property for fine control over punctuation spacing. See the effect live. For advanced typography.
Create vertically oriented text layouts with `writing‑mode`. See the effect and copy the complete CSS. For vertical languages.
View, edit, and manage JSON objects saved in your browser's localStorage. Delete, export, or import keys. No setup.
Create outlined text with the text‑stroke property. Adjust width and color. Preview and copy the CSS.
Test different line‑break and word‑break values on Chinese/Japanese/Korean text. See how browsers wrap. Essential for i18n.
Create glowing, neon‑style text effects with multiple text‑shadows. Adjust colors and intensity. Copy the CSS.
Type two letters and see if your chosen font has a kerning pair for them. Adjust tracking and see live spacing.
Paste two strings that look the same and see if they differ after normalization. Debug invisible encoding bugs.