Font Tuning Tool

Find the right @font-face descriptor values (ascent-override, descent-override, size-adjust) for any Google Font. Compare against your theme's default font to match vertical positioning.

Load Font

Active Font

Test Components

Card with Actions

Check vertical alignment between the heading text and buttons in the header above.

πŸ“Š

Analytics Dashboard

Card with title icon and action button.

Buttons

Inline text with badges

This is a paragraph with a badge and a success badge inline. How do they align?

Sample Table

NameRoleStatusActions
John SmithDeveloper Active
Jane DoeDesigner Away
Bob JohnsonManager Offline

Form Elements

Select Sizes
Input Sizes

Typography

Heading 1 β€” The quick brown fox

Heading 2 β€” jumps over the lazy dog

Heading 3 β€” Pack my box with five dozen

Heading 4 β€” liquor jugs 0123456789

Body text: The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.

Small text: The quick brown fox jumps over the lazy dog.

Type / for commands, : to search a category, or just start typing

Settings

Body text size. All elements scale proportionally.
πŸ‘€

John Doe

Administrator
  • πŸ“Š Dashboard
  • πŸ“ Forms
  • πŸ“‹ Tables
  • πŸ“Š Data Grid