Tweaking Your WordPress Theme’s Text – Part 2

3 Flares 3 Flares ×

This is a sample of some of the best web fonts: Arial, Helvetica, Futura, Tahoma, Palatino, and Verdana.Welcome back! Last week, we looked at the basics of text in CSS, and learned about how to choose the best colour for your WordPress theme’s text. In this post, we’ll be looking at fonts, and answering some of the most common questions:

What type of font should I use for my website?
What’s the difference between serif and sans-serif fonts?
How large should the text on my website be?

Before we begin, we can’t say it enough: before experimenting with your CSS, be sure to back up your style sheet. Otherwise, one wrong Ctrl+S could destroy an entire afternoon’s work.

 

Serif and Sans-Serif Fonts

Serifs are small lines that are used to accentuate letters in a font. In this image, you can see the serifs highlighted in red.

One of the most basic distinctions when it comes to fonts is serif vs. sans serif. Basically, serifs are those small lines that you see with some fonts (as you can see in the image on the right). In traditional print media, body text tends to be a serif font – like Times New Roman, a classic font that was originally developed for the British newspaper The Times. Sans serif fonts are used for headlines.

However, text on the web completely reverses that dynamic. Most people find that reading sans-serif text on the computer is much easier on the eyes. When tweaking your website text, you’ll probably want to use sans-serif body text, and serif headers.

What font is best for your site? It depends on the style and distinct branding that you want your site to represent. In general, however, there are a number of classic fonts – traditional standbys that have risen to the top of the Internet landscape because of their style and elegance. Arial, Futura, Helvetica, Tahoma, and Verdana are among the most popular sans-serif fonts; while Georgia, Palatino, and Times New Roman are solid bets for serif fonts.

There are three core fonts for the web: Arial, Verdana, and Georgia. These simple and elegant fonts form the foundations of modern text design for the Internet.When selecting your font, you should make sure to list several alternatives, in case your readers’ computers don’t have that particular font. Here’s an example:

h3 {font-family: Futura, Arial, sans-serif; }

Feeling a bit more adventurous? One of the most amazing services that Google has for fledgling designers is Google Web Fonts: an interactive database of free web fonts that can be sorted and filtered into a variety of categories. Here’s a list of the best 20 web fonts that the folks over at Awwwards were able to find!

Choosing Your Font Size

This is a bit trickier than it used to be. When tweaking your WordPress theme’s text, it’s important to consider that you want your site to be easy to read. With so many devices on the market (laptops, desktops, tablets, phones), it’s harder than ever to tell when people will be able to comfortably read your site.

For the greatest flexibility, you may want to declare your font sizes in em. For example, 1em is the default font size in your reader’s browser (16 pixels in Firefox and Internet Explorer), while 1.3em is 1.3 times the default font size. This feature allows your users to resize the text without magnifying your website – a crucial option for people who have impaired eyesight!

h3 {font-size: 1.3em; }

A word to the wise: many designers are realizing that larger, more generous fonts – when combined with short, punchy text – can be extremely powerful.

Special Text Effects

There are a number of other attributes that can enhance your text. Here are just a few examples:

  • Italics: font-style: italic;
  • Bold text: font-weight: bold;
  • Capitalization: font-variant: small-caps; OR text-transform: uppercase;
  • Underline: text-decoration: underline
  • Don’t underline: text-decoration: none
  • Strike-through: text-decoration: line-through

Using these and other text options, you can introduce a unique aesthetic to your WordPress theme that will set it apart from the cookie-cutter models. In the coming weeks and months, you’ll be able to expand your repertoire of skills as we continue our hands-on exploration of CSS, WordPress, and web design basics. So get your hands dirty, play with some CSS, and soon you’ll be a WordPress MacGyver!

Image sources: Wikipedia (1) (2) (3) (4)

Want more of this awesome content?

 

Sign up to receive our Monthly Newsletter

 
Chosen one of the Top Ten Social Media Companies in Canada

Join our eClub

Powered by Subscribers Magnet

Follow Us on Google+

View More of Our How to’s on Slideshare

View Supernova Media's profile on slideshare
About Nancy Bain

Our services include building optimized, functional and self managed WordPress websites, Nova Scotia social media training and consulting, interactive full screen high definition virtual tours with lead capture and print advertising. For most of our clients, we are their one stop solution for all things marketing, branding and small business development related.

3 comments
website
website

A fascinating discussion is worth comment. I think that you should write more on this topic, it may not be a taboo matter but usually people don't discuss these issues. To the next! Kind regards!!

Alex Colgan
Alex Colgan

Thanks, Natalya! I might do another post on fonts in the future :)

How to name domain
How to name domain

I always looking for good text fonts when designing websites and go inside the wordpress themes. I think your post is useful for wordpress users. Thank you. Natalya

3 Flares Twitter 0 Facebook 0 Google+ 3 Pin It Share 0 LinkedIn 0 StumbleUpon 0 Buffer 0 3 Flares ×