Font Size Scale Preview - Online Typography Visualizer
Type a few words and see them rendered at every heading size (h1–h6) with your chosen font. Perfect for design systems.
UD5 Toolkit
Online Compare & Dimensions
| Parameter | Current | New | Diff |
|---|
Type a few words and see them rendered at every heading size (h1–h6) with your chosen font. Perfect for design systems.
Explore the size‑container and inline‑size CSS properties for container queries. Understand containment contexts. Visual guide.
Select any element on the test page and monitor its size changes with ResizeObserver. See log of all entries.
Enter a chemical formula (e.g., H2O, C6H12O6) and calculate its molar mass. Handles parentheses and hydrates. Pure frontend.
Drag to resize a box and see the Resize Observer callback fire. Get contentRect and borderBoxSize. Learn the API.
Find your healthy weight range using multiple medical formulas (Hamwi, Devine, Robinson, Miller). Frame size adjustment included. Instant local computation.
Type a password and see a bar that fills based on estimated bits of entropy. Color‑coded feedback. No storage.
Make an element resizable horizontally, vertically, or both. See the handle and code. Useful for textareas.
Add appliances with running and starting watts to estimate needed generator capacity. Prevent overload.
Estimate your one‑rep max (1RM) from weight and reps. Supports multiple formulas (Epley, Brzycki). Training percentages table.
Estimate your one‑rep max from weight and reps. Supports Epley, Brzycki, Lombardi formulas. See your strength level.
Calculate your one-rep max using Epley, Brzycki, Lombardi or O'Conner formulas. Predict maximum lifting capacity and plan progressive overload. 100% local processing.
Toggle print‑specific styles like removing backgrounds, showing link URLs, and adding page breaks. Generate a complete print stylesheet instantly.
Add print styles like removing backgrounds, adding page breaks, setting margins. See print preview instantly.
Upload a small image and generate the CSS code for a custom cursor. Test it live on the page. Tiny but useful.
Paste a raw WebAuthn attestation response (CBOR) and decode its fields: format, authenticator data, and extensions. Debug passkeys locally.
See exact mm and inch dimensions of ISO A-series and US paper sizes. Visual comparison tool. Also calculates weight based on GSM and dimensions.
Start from a base color and use `oklch(from color l c h)` to create lighter or darker variants. Copy the code.
See the complete recursion tree for small Fibonacci or factorial calculations. Understand overlapping subproblems. Educational.
Upload one image and see it encoded in AVIF, WebP, and JPEG XL side‑by‑side. Compare quality and file size in your browser.
Shrink a PDF file size with configurable image quality and object removal. All processing stays in your browser.
Highlight elements with aria‑describedby and see the linked description text. Verify a11y annotations.
See the current viewport width/height, document size, scrollbar width, and pixel ratio. Essential responsive data.
Watch a simulation of how the JavaScript event loop handles synchronous code, microtasks, and macrotasks. Learn async.
Build the same layout with both Grid and Flexbox side by side. See the code differences and visual results.
Paste a website's HTML and see which text is only visible to screen readers (e.g., .sr‑only). Preview the accessible layer.
Pick two colors and mix them in different color spaces with sliders. See the difference between sRGB and OKLCH mixing. Copy the code.
Count total DOM nodes on the current page and show warnings if limits exceed best practices. Keep the DOM lean.
Call navigator.storage.estimate() and display a visual pie chart of used vs. available browser storage. For PWA debugging.
Predict the file size of an image based on pixel dimensions and format (JPEG, PNG, WebP). Rough estimate. Local.