Giving Your Readers the Freedom to Choose Fonts on Your WordPress Blog

Blog No Comments

If you saw that headline and imagined a future where you’d be running a typography poll to see which kinds of fonts your readers like best, then don’t worry because nothing could be further from the truth. One of the fastest-growing trends in WordPress design is to let end-users automatically select their own fonts through their browsers as opposed to specifying a long list of acceptable alternatives in a CSS style sheet. Anyone who’s edited the font stack in a WordPress template has probably seen something like this:

font-family: “Georgia”, “Palatino”, “Book Antiqua”, “Times New Roman”, Times, serif;

Sometimes these can go on for quite some time. Rather than doing this, though, you might want to consider simply specifying serif, sans-serif, or monospace and letting your readers’ browsers figure out the rest. This can help to dramatically reduce the length of your WordPress page’s CSS style sheet while helping to ensure genuine platform neutrality.

Promoting Inclusiveness with Font Design

Creating a long font stack could make a WordPress blog or eCommerce site appear somewhat unusual on machines that don’t render certain typefaces fairly well. While a browser might suggest a reasonable alternative if a font isn’t installed, it’ll dutifully use a poor option if said one is there. That’s especially problematic for those browsing the web on laptops running macOS or GNU/Linux, where the rendering engine for fonts is very different from those used on mobile devices. Users who open up a WordPress blog on these kinds of devices might actually get a very poor user experience.

Therefore, it makes sense to simply specify the use of a Sans Serif font, which is often deemed far more readable on screen due to the fact that these lack the flourishes found on true Serif typefaces. Users who have special accessibility concerns might also appreciate this decision as well, though there’s a high probability that some have also specified overrides in their browser that will ignore whatever WordPress selects for them.

Best of all, this sort of code should work equally well with any kind of plugin that one happens to be using. Small business owners deploying a dropshipping or shopping cart plugin should find that their order forms will actually respond to the specifications given in the previous line of CSS code. Users who have browsers that never received any sort of special configuration will even be able to render these forms correctly, which is an important consideration when considering the possibility that some users might be placing an order from an open-source platform.

Just because you’re giving your users free reign to pick what fonts your blog renders in, however, doesn’t mean that you can’t still get creative with the design.

Designing with the Most Basic Font Specifications

Point sizes are the classic way to specify sizes when working with text, but CSS offers a number of different options. You might still want to use h1 or h2 tags for headers, but in either case, don’t feel like you have to make all of the text on a page the same size. Vary your choices and you’ll find that your site probably looks much more distinctly designed than it might have even if you had gone through and specified the exact typeface everything should have been in.

Some of the best free WordPress plugins are looked at in a positive light because of the fact that they’ve taken such risks with their design. Take a look at any of the design-related ones that you’re using currently. Chances are that they do something at least somewhat unconventional. You might want to consider adopting some of this style yourself.

Try using a serif typeface for headings and then sans serif or so-called Gothic faces for the actual body text. While this violates the basic rules of typography, it can actually end up looking really impressive in many cases. It might even prove to be more readable than lining text that’s created using all of those traditional rules.

Limit your use of typewriter-style fonts to code blocks, however. These can quickly become unwieldy to read and often have a decidedly low-tech look on many screens, especially if they’re forced to select a default monospaced font. That being said, you could experiment with specifying them as a heading typeface and gauging feedback to see how your readers reply to it.

You might be surprised to learn that not only do others like your experiments but your readers actually have more of an interest in type than you’d ever have imagined!

We really appreciate you for visiting PremiumCoding and reading this article! Now you might also want to check out our Themes here.