About this plugin
Some of your fonts’ best work is hidden.
Professional fonts often contain swashes, stylistic sets, ligatures, and alternate characters. Without a tool, you must type these characters by hand inside inline spans. This is slow, mistakes are easy, and the result can be difficult for screen readers.
Typography Stylist adds controls for these features to the block editor, and it keeps the text accessible.
If you set type in professional design tools, you know what these fonts can do. Typography Stylist brings that control to WordPress. You decide how your type looks, down to a single character.
Pick the alternate you want for one letter. Set a variable font to weight 435. Save the result as a paragraph style for the rest of the site, and later update the style everywhere at one time.
Typography Stylist also manages your fonts: upload webfont kits, connect Adobe Fonts, or use fonts from the WordPress Font Library.
Glyphs Panel
The Glyphs Panel shows every character in a font, like the Glyphs panel in Adobe Illustrator.
- Search by character, by codepoint ( U+XXXX ), or by glyph name.
- Filter by OpenType feature (this includes the stylistic sets) or by Unicode block.
- Select a letter in your text to see all of its alternates. Click an alternate to put it in place of the letter.
- Click any glyph to insert it into your text.
- Move through the grid with the keyboard. Screen readers announce each glyph.
- Make the glyphs larger with “Glyph size” to compare similar alternates.
The panel reads the font in your browser, and it reads only the font’s metadata. It does not extract glyph outlines, and it does not store font data on your server.
Paragraph Styles
A paragraph style is a named set of typography settings, like a paragraph style in Adobe InDesign. Save a style one time, then apply it to text in any heading, paragraph, or Typography Stylist block.
- A style holds the font, weight, italic, case (All Caps, Small Caps and others), size, letter spacing, line height, OpenType features, variable font axes, and the First Letter Hang. Fit-to-width sizes can also go into a style.
- “Browse styles…” shows each style in its own typeface, with your selected words as the sample text. You can search the list, and group it by font family, by size mode, or by recent use.
- Each style is one CSS class. Change a style and click “Update Style”. All text that uses the style then changes.
- A style can be based on another style, like “Based On” in InDesign. It uses that style’s value for every setting it does not set itself, so one change to a “Body” style also changes “Caption” and the other styles based on it.
- If the selected text already has its own settings, the editor asks before the style replaces them.
- “Detach Style” changes styled text back to independent settings.
- In a core Paragraph or Heading block, a style can apply to the whole block. Use the Paragraph Style panel in the block sidebar, or the toolbar button with no text selected. The block’s own sidebar settings override the style, and the theme’s block styles (such as “Outline”) keep working.
- Edit, rename and delete styles on the Paragraph Styles tab in Settings → Typography Stylist. Edit changes every setting of a style: font, weight, font style, size, spacing, line height, First Letter Hang, case, OpenType features and variable font axes, and the style it is based on. Every post that uses the style shows the change. The Edit form can also set the alignment, the word spacing, and the line breaking of a style (“Balance lines” for headings, “Avoid short last lines” for body text).
- Move styles, presets, options and font settings to another site with Settings → Typography Stylist → Export & Import. The file names each font by its family, and import matches it to a font on the other site. You see every item before anything is saved.
Granular typography control
Set the typography of a whole block, or of one word or one letter in it.
- OpenType features: Ligatures, swashes, stylistic sets ss01–ss20, small capitals, figure styles, and more. The full list is below.
- Variable fonts: The plugin reads the axes from the font file, and each axis gets a slider. You can set a weight of 435, not only 400 or 700. Custom axes also get sliders.
- Size: The text can keep the size it inherits, use a responsive size (a CSS clamp() between a minimum and a maximum), or use fit-to-width.
- Fit-to-width: Each line of a Typography Stylist block fills the width of the block, as on a poster or a wedding invitation. In a fitted line, you can make one glyph smaller or move it up or down, and the line still fills the width.
- Spacing and style: You can set the letter spacing, line height, weight, and italic.
Your site’s front end gets CSS only. The plugin adds no JavaScript to your pages.
Two ways to style text
- In a heading, paragraph, or other text block. Select the text, then click “Typography Stylist Features” (a swash “T”) in the block toolbar. Use this for whole words and phrases. Changes apply at once.
- In a Typography Stylist block. Use this block for letter-by-letter work. Set the options for the whole block in the sidebar. Select text in the block to change only that text.
The block toolbar also has a Glyphs button and a Paragraph Styles button. To remove them, turn them off in Settings → Typography Stylist → Options.
Accessibility
A style on part of a word puts the letters in separate elements. Some screen readers then read the word in pieces, or skip it. The Typography Stylist block prevents this.
It writes two copies of your text:
- A plain heading for screen readers. It is hidden from view, and it keeps the document outline correct.
- A styled copy for the screen, with aria-hidden="true".
If you style part of a word in a heading or paragraph block, a notice tells you about the risk. The notice has a button that converts the block to a Typography Stylist block. Your change applies whether you convert or not.
You can turn the notice off in Settings → Typography Stylist → Accessibility.
The editor panels work with the keyboard and with screen readers.
Fonts
Use fonts from these sources:
- Webfont kits from MyFonts, Font Squirrel, and other providers. A ZIP with only font files also works. The plugin makes the @font-face CSS for you.
- Adobe Fonts projects.
- Fonts that your theme, another plugin, or a CDN already loads.
- Fonts in the WordPress Font Library (WordPress 6.5+). You can also add your uploaded fonts to the Font Library, and remove them again.
By default, a font loads only on the pages that use it. This includes blog, category, and tag archives. When you delete a font, you can choose a replacement font, and content that used the deleted font shows the replacement.
Supported OpenType Features
Ligatures:
* Standard Ligatures (liga)
* Discretionary Ligatures (dlig)
* Contextual Alternates (calt)
* Contextual Ligatures (clig)
* Historical Ligatures (hlig)
Stylistic Sets:
* ss01 through ss20
Swashes & Alternates:
* Swashes (swsh)
* Contextual Swashes (cswh)
* Stylistic Alternates (salt)
* Titling (titl)
* Historical Forms (hist)
Decorative:
* Ornaments (ornm)
Numerals & Figures:
* Proportional Figures (pnum)
* Tabular Figures (tnum)
* Lining Figures (lnum)
* Oldstyle Figures (onum)
* Fractions (frac)
* Slashed Zero (zero)
Capitals & Case:
* Small Capitals (smcp)
* Capitals to Small Caps (c2sc)
* Petite Capitals (pcap)
* Case-Sensitive Forms (case)
Positional Forms:
* Initial Forms (init)
* Medial Forms (medi)
* Terminal Forms (fina)
* Isolated Forms (isol)
Superscript & Ordinals:
* Superscript (sups)
* Subscript (subs)
* Ordinals (ordn)
Other Features:
* Kerning (kern)
* Localized Forms (locl)
* Randomize (rand)
Recommended Fonts
The OpenType features work only with fonts that contain them. Many script fonts and professional typefaces do. Some examples:
- Script fonts by Alejandro Paul, such as Inglesa and Gratitude Script (with the wonderful Kathy Milici)
- Bookmania by Mark Simonson
- Orpheus, designed by Kevin King, Patrick Griffin, and Walter Tiemann, from Canada Type
- Elaina and other fonts by Laura Worthington
- Liza from Underware
- Memoriam by Patrick Griffin
- ITC Avant Garde, designed by André Gürtler, Christian Mengelt, Ed Benguiat, Erich Gschwind, Herb Lubalin, and others, from Monotype
To see which features a font has, read its specimen or open the font in the Glyphs Panel.
Bundled Third-Party Libraries
The Glyphs Panel reads font files in the browser with two open-source libraries. They are bundled unmodified in glyphs-panel/assets/js/vendor/. They load only when you open the Glyphs Panel, and they run in the browser.
No font data goes to a server.
- opentype.js v1.3.4: reads TTF, OTF, and WOFF font files. MIT License. Source: https://github.com/opentypejs/opentype.js
- wawoff2: decompresses WOFF2 font files (a WebAssembly build of Google’s woff2). MIT License. Source: https://github.com/fontello/wawoff2
txt for build and source details.
Source, Docs & Support
- Source code and issue tracker: github.com/mattcowan/typography-stylist-for-wordpress.
- Developer documentation: The hooks reference ( HOOKS.md ) is on GitHub.
- Beta builds: Pre-release versions go to the GitHub Releases page before they go to WordPress.org.
- Support: Use the WordPress.org support forum, or GitHub issues for bugs.
If you like the plugin, a short review helps other type lovers find it.
Technical Details
Data Storage
The plugin keeps the typography of your text in the post content, as inline styles and data attributes. It keeps fonts, paragraph styles, and settings in the WordPress options table. The plugin adds no database tables.
Uploaded font files go in wp-content/uploads/typography-stylist/fonts/.
Extensibility
Developers can extend the plugin with WordPress hooks and filters. md on GitHub has the full reference, with examples. The REST API endpoints are at /wp-json/typost/v1/.
Source Code
The plugin contains its compiled and minified files, and also their source code. org requires this for security and transparency.
Minified and compiled files:
- Each assets/js/*.min.js file has its source file in assets/js/.
- Each assets/css/*.min.css file has its source file in assets/css/.
- The files in blocks/typography-stylist/build/ are compiled from the source files in blocks/typography-stylist/.
Credits
Developed by Matthew Cowan.
Special thanks to my wife for her support and inspiration, and to my dog, Sugar, for taking long walks with me between adding features.