Defining Font Size in a WordPress Theme

WordPress

The look and feel of any page created in WordPress is determined by the settings designated in the style.CSS document. This includes font size. Changing font size may not be important to someone who is using prepackaged theme as a template for developing a fairly basic site. However, for theme creators and website owners interested in modifying prepackaged themes, font size can be very important.

Font sizes can be designated as either relative or fixed. A relative font size is one that changes depending on the device being used and the browser displaying the page in question. Relative fonts are necessary in the modern era due to the many different screen sizes found on all sorts of mobile devices. However, relative font sizes are also very helpful to internet users with visual impairment.

Fixed fonts are displayed with predetermined sizes based on either pixels or points. A fixed font will display at the size chosen by the coder regardless of whether or not the end-users web browser has been set to a different default size. The only way for the end user to make a fixed font easier to see is to zoom in on the page.

When coding font sizes in the style.CSS document, the most common choices are:

  • relative – em, ex; for example: #content h1 { font-size:1.4em;}
  • fixed (pixel) – px; for example: #content h1 { font-size:14px;}
  • fixed (point) – pt; for example: #content h1 { font-size:16pt;}

The difference between pixel and point size relates to resolution versus the physical number of points in a given letter grid. Practically speaking there is little difference in modern web browsers.

Defining Your Font Sizes

Website owners using premade themes, whether free or purchased, may be able to change font sizes within their theme settings. It just depends on whether or not theme developers include that option. If not, they can manually change font sizes the same way a developer does: by editing the style.CSS file.

To do that, log into your administration panel and then navigate to Appearance→ Editor. Once in the editor, look for the style.CSS file at the bottom of the list on the right side. Click on that file to load it into the editor. From there you can scroll through the document to find each instance where font sizes are defined. Change each one requiring editing, save the document, and you’re done.

Please remember to create a backup of your site prior to editing the style.CSS file. While it’s not likely anything will go wrong, it’s always better to be safe than sorry. A backup copy ensures you can always return to the previous edition of your site should you seriously foul something up.

As for the changes themselves, we recommend testing them on multiple devices. Use a laptop and a cellphone, for example, to check what your font sizes look like after you’ve made the changes. You may find you have gone either too large or too small. The more devices you can test the changes on, the more likely you’ll find the best settings for the largest number of devices.

Share it!Share on FacebookTweet about this on TwitterShare on Google+Email this to someone

Our Recommended Wordpress Web Hosting Provider

WordPress

WHC.CA
Get a 50% Discount by using our link.

WHC.ca

Reliable host, with excellent customer service and an easy one-click Wordpress installation. Our recommendation to host a Wordpress blog.

Leave a Reply

Your email address will not be published. Required fields are marked *