How to Increase or Decrease The Font Size in The Visual Editor

photo credit: Mr Ush – cc

If you use the visual editor to write posts or pages, you’ll know that the font can sometimes be hard to read due to its size. Some themes use a tiny font in the visual editor and unless you know how to apply CSS changes, you’re stuck with it. Luckily, there’s a plugin available specifically for the purpose of adjusting the font size in the visual editor called Visual Editor Font Size.

Developed by Nikolay Bachiyski, Visual Editor Font Size adds a meta box to the post editor. After installing and activating the plugin, check the screen options on the post editor and make sure the box next to Visual Editor Font Size is checked. The meta box has a plus and minus button to increase or decrease the font size. There’s also a sample of text to indicate how large or small the font is and the revert link resets the text to the default size.

Visual Editor Font Size Meta Box

Although it works fine in WordPress 4.0, I’d rather see the size adjusting buttons added to the TinyMCE editor. The editor is the first place I look to manipulate content in the visual editor and when I didn’t see any additional buttons, I thought the plugin was broken. This plugin is great if you don’t have the CSS knowledge or access to make the appropriate changes, but it’s not the best way to solve the problem.

If the theme you’re using doesn’t have a visual editor style applied to it, contact the author and send them this link. It’s a Codex article that explains how to add a style to a theme specifically for the visual editor. When executed well, the content in the editor will look identical to what visitors see. Stargazer, by Justin Tadlock, is an excellent example of a theme where the content in the visual editor is the same style that’s seen by visitors.