Alvaro

<a href="https://gutenberg-showcase.melonpan.io/the-typography" rel="nofollow ugc">Demo</a> – <a href="https://melonpan.io/wordpress-plugins/the-typography" rel="nofollow ugc">Documentation</a> – <a href="https://github.com/garciaalvaro/the-typography" rel="nofollow ugc">GitHub</a>
Add Typography to your Gutenberg site using Google Fonts. Enter CSS selectors or select Blocks to apply custom typography.
<h3>Typography style</h3>
Available typography options include:
<ul>
<li>Font family & variants from Google Fonts</li>
<li>Color (hex or rgba)</li>
<li>Font size</li>
<li>Line height</li>
<li>Font weight</li>
<li>Font style (italic, normal, oblique)</li>
<li>Letter spacing</li>
<li>Text transform (capitalize, uppercase, lowercase)</li>
<li>Text decoration (line-through, overline, underline)</li>
</ul>
<h3>Typography context</h3>
Typographies can be assigned to a specific context:
<ul>
<li>All site</li>
<li>Post types/s (post types available on the site)</li>
<li>Post types/s template (index, single)</li>
<li>Front page</li>
<li>404 page</li>
</ul>
<h3>Typography selectors</h3>
Each typography can have several groups of selectors with unique modifications based on the root typography. 
For example: a typography can be set with a certain Font, Color and Font size; 
each of its groups of selectors inherit those properties and one could modify the inherited color and other the inherited Font size.
Available CSS selectors include:
<ul>
<li>Text CSS selector (eg: .site-title a)</li>
<li>Block Selector (eg: Block Quote > Citation)</li>
</ul>
<h3>Usage</h3>
The plugin can be accesed from the Customizer inside the tab The Typography. 
It can also be accesed from any Block editor’s The Typography sidebar (top right corner of the editor). 
Create a typography and assign it some options; create a group of selectors and inside it create some CSS or Block selectors. 
That’s it! 
If you want to preview the different fonts before selecting one you can preview them in the <a href="https://fonts.google.com/" rel="nofollow ugc">Google Fonts repository</a>. 
Note: The typography editing is assigned to the ‘edit_theme_options’ capability. This means that, by default, only admin and super admin will be able to use the features.

The Typography

Add Typography to your Gutenberg site using Google Fonts.

Jim Roberts

Fluid Font Forge is a comprehensive WordPress plugin that simplifies responsive typography management. Generate CSS clamp() functions with mathematical precision for perfectly scaled fonts across all devices.
Key Features:
<ul>
<li>Real-time CSS clamp() generation – See your responsive font sizes calculated instantly</li>
<li>Multiple output formats – CSS classes, custom properties, HTML tags, and Tailwind config</li>
<li>Interactive preview system – Visual comparison of font sizes at different viewport widths</li>
<li>Mathematical scaling ratios – Based on musical harmony principles (Major Second, Perfect Fourth, Golden Ratio, etc.)</li>
<li>Drag-and-drop size management – Reorder your font scale with intuitive interface</li>
<li>Custom font preview – Test with your actual web fonts using WOFF2 URLs</li>
<li>Copy-to-clipboard functionality – One-click CSS copying for immediate use</li>
<li>Professional admin interface – Clean, modern design that integrates seamlessly with WordPress</li>
</ul>
Perfect for: 
* Web designers creating responsive typography systems 
* Developers implementing fluid font scaling 
* Theme creators needing consistent font hierarchies 
* Anyone wanting professional typography without complex CSS calculations
Technical Highlights: 
* Uses CSS clamp() for true fluid scaling between viewport breakpoints 
* Supports both px and rem units with automatic conversion 
* Mathematical progression ensures consistent visual hierarchy 
* Accessibility-compliant with WCAG guidelines for readability 
* Clean, semantic CSS output ready for production use
Transform your typography workflow with Fluid Font Forge – where responsive design meets mathematical precision.
Accessibility Features:
<ul>
<li>WCAG 2.1 compliant interface</li>
<li>Keyboard navigation support</li>
<li>Screen reader friendly</li>
<li>High contrast mode compatible</li>
<li>Minimum font size recommendations for readability</li>
</ul>
<h4>Mathematical Ratios Explained</h4>
<ul>
<li>Minor Second (1.067): Subtle progression, ideal for dense content</li>
<li>Major Second (1.125): Gentle scaling for readable body text</li>
<li>Minor Third (1.200): Balanced hierarchy for most designs</li>
<li>Major Third (1.250): Clear distinction between sizes</li>
<li>Perfect Fourth (1.333): Strong contrast for headlines</li>
<li>Golden Ratio (1.618): Dramatic scaling for hero sections</li>
</ul>

Fluid Font Forge

Advanced fluid typography calculator with CSS clamp() generation for responsive font scaling across all device sizes.

The Typography vs Fluid Font Forge