As you compose content on your WordPress-powered website, you will occasionally wish to format the text in certain ways. I’ve been asked questions about text formatting many times: at my WordPress presentations, and also by my clients during training sessions after I’ve built them a new website. So I have compiled an overview of how to format text using the WordPress content editor interface.
Text formatting: the easy part
The great thing about WordPress is its ease of use. The toolbar above the text editor offers a number of convenient text formatting options. To apply a style to your text, you can simply click an option, and then begin typing. Click the option again to stop using that style. You can easily render your text in boldface, italics, or strikethrough. The toolbar also makes it easy for you to write
- unordered lists
or even
- numbered lists
as well as
blockquotes
Not to mention left aligned,
center aligned, and
right-side aligned text.
Alternatively, write some text first, highlight it with the cursor, and then click an option from the toolbar to apply your selected style to the highlighted text. This is the easiest way to add (or remove) links to your text.
Even more options!
Need more options than just bold, italics, strikethrough, lists, quotes, links, and alignment? No worries! There’s a “toggle” link at the right hand side of the options menu. They used to call it, “Show/Hide Kitchen Sink” but as WordPress has grown up, some components have been renamed. This button now describes itself as, “Toolbar Toggle.”
Click the toggle, and it will reveal an entire second row of options:
Now you have control over your text! From the dropdown menu at the left, you can choose if your text is a paragraph, a heading, or preformatted text. You can underline or justify your text; apply colors (not that I would recommend it…); safely paste text that you copied from another computer program; control indentation; leverage the “Undo” feature; and insert special characters. What a lot of options! Have fun with that.
Text formatting: the not so easy part
When I tell people about WordPress, I sometimes compare the text editor interface to Microsoft Word, in an attempt to express how easy it is to use. However, “ease of use” does not translate to “exact same features.” People often think that they should be able to do anything with their website content that they would be able to do with content created in a document layout program such as Word or even InDesign. This includes changing which font is used in certain places; changing the text size with pixel-perfection; and changing the precise positioning of images. Certain tasks like these are simple from the desktop software interface, but are not possible (or are much more complicated) from the WordPress interface. And the reason is, simply put, the Internet is not a desktop computer!
Regarding image positioning. I’ll address media management more fully in a future post. For now, suffice to say, if you are still using a WYSIWYG drag-and-drop website builder that allows you to precisely place your pictures in a certain place with the mouse and the images will stay there regardless of the visitor’s screen size, then your site is not mobile-friendly and as a result it probably has about a zero percent chance of hitting number one in the Google search results.
Font selection in WordPress
WordPress does not offer typeface selection via a dropdown menu. WordPress will never offer this feature out of the box (although there may already be a plugin that offers something similar). There’s a very good reason for this. It’s due to the nature of the Internet itself.
You see, when a device’s web browser (or other application interface) renders text, that device determines the shapes of the letters by accessing a special kind of computer file called a font.
Font vs. typeface. You may ask: what is the difference between a “font” and a “typeface”? Good question! The “font” is the computer file. The “typeface” is the way the letters look when that file is rendered. Graphic designers talk about “typefaces.” Computer users install “fonts” to render those “typefaces” on their local system. Normal human beings use the word “font” interchangeably, and give their graphic designers a blank look when the designer uses the word “typeface.”
Now that you understand the difference, you’ll see why typefaces are not universal. There are billions of devices from around the world, all connected to the Internet. Each of those devices can only render a given typeface if it has a specific font file installed and available on its system. Different computers have different fonts available. For example, Windows computers ship with Arial; Macintosh computers ship with Helvetica; and Linux computers might include something like the “Switzera ADF” font family. Helvetica, Arial, and Switzera may all be highly similar typefaces (a “neo-grotesque sans-serif” according to About.com) but if your document specifies one, the end user’s computer will not automatically substitute the closest typeface, in the event the user does not have your first choice typeface already installed on their system. That’s why, in CSS, we specify a “font-family.” For example, your website’s stylesheet might contain a declaration like this:
p{font-family:"Helvetica Nue", Helvetica, Arial, "Switzera ADF", sans-serif;}
This style rule instructs the visitor’s browser to render the specified text (here, any text contained within a paragraph element) using the first available system font from the list of specified typefaces. If the first one is not available, it will try to use the second; and on down the line. If none of the named typefaces are available, the visitor will see whatever sans-serif typeface happens to be the system default. (Always specify a fallback!)
The world is improving for website designers. CSS3 gave us the special new @font-face declaration, which allows you to specify a font file that can be loaded via an external URL. This approach has skyrocketed in popularity and you can see it in use everywhere you browse; but it is not without limitations. Using an @font-face declaration adds another HTTP request to your page load, which makes it that much slower; and in many cases, if the body text is to be rendered in the specified typeface, the user is unable to read your web page until the font file has finished loading and processing. This is especially problematic for users on slow connections such as, for example, a roaming mobile device. Slow page loads mean high bounce rates; so you’re generally safer using system fonts for body text.
And that’s why WordPress does not offer font selection from a convenient dropdown menu. In short, it’s too complicated. You may be able to find (or build) a plugin that will allow you to quickly select between several Google Web Fonts from the WordPress content editor interface; but this is a workaround. I would not expect the WordPress core to ever add a feature like this.
What can you do instead? You can work with your website designer to add custom CSS class definitions to your stylesheet. These new rules will require the visitor’s browser to render text in the font family of your choice. That way, you could for example switch between Helvetica and Times New Roman like this:
<style type="text/css">
/* for best results, concatenate these declarations with the stylesheet in your site's header */
.font-times{font-family:"Times New Roman", Times, "Liberation Serif", serif;}
.font-helvetica{font-family:"Helvetica Nue", Helvetica, Arial, "Liberation Sans", sans-serif;}
</style>
<p class="font-times">This text will render in Times or the default serif.</p>
<p class="font-helvetica">This text will render in Helvetica or the default sans-serif.</p>
To add class names to your paragraphs, you must manually edit the HTML from the “text” editing tab of the WordPress content editor. It’s the only way.
And if all that sounds like it’s not worth the trouble, you’re right! A well-designed WordPress theme will make all the necessary typeface selections for you. Typeface selection is an important component of the design process. Overriding the theme’s style rules with arbitrary typeface declarations can lead to a presentation that looks, well, messy. In general, it’s not worth it. If you find that you always want to use a different typeface in a specific context, work with your designer to customize your theme accordingly. This makes your life much easier. That way, you’ll never have to add CSS class names from the HTML editing view.
Text size in WordPress
Website designers have a lot of options for specifying the size of text. The old metal-type-foundry concept of “points” roughly translates to “pixels,” but not every device calculates “pixels” the same way. Because some screens (like Retina) have a higher pixel density than others, specifying a pixel-based text size will NOT result in the same size text being shown to all users. Instead, best practices state that web designers should use relative units like “em” and “rem” to offer the best presentation to all users regardless of the user’s device size. Those kinds of calculations must be performed by the web designer and built into the stylesheet. It’s simply too complicated (and problematic) to attempt to provide selectable text size options based on relative units of measurement.
I’ve had clients attempt to use headings from the WordPress text format dropdown menu, as an alternative to an easily selectable font-size option. This works…. sort of. But I would caution, that a heading should be used as a logical separator for your content. The heading tag itself has a special meaning to the search engines. Using a heading when you really just want larger text is non-semantic. If the text on your website is too small, ask your web designer to make it bigger. Substituting headings for body text will make your graphic designer cringe, and will make your website’s visitors think that you are not very professional. Use body text for body text! The text can be made bigger with a style rule. Use CSS appropriately, and use headings where headings are appropriate.
Any questions? Give Mardesco a call!