Setting font-size in CSS and its Accessibility Issues

Setting Your font-size in CSS Using Relative Unit Values

With some recent testing it has come to my attention that using some relative size units as a value for the font-size property in Cascading Style Sheets does allow users to re-size the text. However, one unit type, the px or pixel unit does not. The logic behind the ones that do allow you to re-size it in your browser and the one that does not is explained below. The issues with accessibility and font-size relative values lead to my conclusion justifying NOT using the px (pixel) unit as the font-size property’s value in Cascading Style Sheets.
Using relative text sizing in CSS is common place. According to Sklar J. (2008) there are four different relative size units.
The first three are relative to the size of the font you use. They are:
 
  • em = a CSS element sized at 1em would be the width of a capital letter M, in the font used. Example: p { font-size : 2em }
  • ex = an CSS element sized using 1ex would be the height of a lowercase letter x, in the font used. Example: p { font-size : 4ex }
  • percentages = the size is relative to the inherited font size. Example: p { font-size : 2em } p b { font-size : 200% } In this example the element we are concerned with,, would be 200% larger than the inherited font-size, 2em.      

The last of the four available relative units is px. This set your font-size in pixels. It is a relative unit but, it is relative to the viewing device and not the specified font. This means how big the characters are on your screen depends on what screen resolution you view a web page at. The text would appear larger when you were using lower screen resolutions. When viewing a page in 800 x 600 screen resolution, text is bigger than when viewing the same page using 1024 x 768.

 

  • px = CSS elements sized at 10px would be 10 pixels in length. Example: p { font-size : 12px }
Please note: With the px unit length is inferred, rather than width, as length is mentioned by W3C CSS2 syntax and basic data types and width is not. However this is not a firm conclusion.
 
 

Accessibility Issues When Using Relative font-size Units

Where accessibility is concerned this leaves me in no doubt about what relative unit webmasters should use. Readers being able to change the font size through their browser has been available for some time. The main reason I can see for this is to allow us to make text bigger if we are having difficult reading it. Personally my eyesight is deteriorating all too rapidly and I have sued this function many times.
 
When webmasters have used the px unit in the font-size property this standard function of browsers becomes useless. For me, potentially this means I may not be able to read what is on screen without changing my screen resolution. Yes, it is possible to do this but quite frankly it is a bit of a hassle with computers in 2008.
 
So, as the px unit hampers accessibility I believe using em or ex would be better.
 
References:
 
Sklar, J. (2009 although I received it from the Open University in 2008) Principals of Web Design, Forth Edition, Boston, Course Tecnology.
 
Refsnes H., Refsnes S. & Refsnes J.E. CSS font-size Property, [online], Available from: http://www.w3schools.com/CSS/pr_font_font-size.asp (Accessed 20 August 2008)
 
World Wide Web Consortium 4 CSS2 syntax and basic data types 4.3.2 Lengths,  [online], Available from:  http://www.w3.org/TR/1998/WD-css2-19980128/syndata.html#length-units (Accessed 20 August 2008)
 

Changing your font size in WordPress is done by editing the CSS.

 1) Enter a post like you usually do.
2) You then have to be in the HTML editor. Look for a button that says HTML on it when you are entering or editing a post.
3) surrounding the text you just typed you will see something similar to this <span style=”font-size: 1em; font-family: Arial;”>PUT YOUR TEXT HERE</span>
If you don’t see it just copy and paste it from here and put it AROUND the text you entered.
4) Next change the number of the font-size element. I changed it from 1em to 2em in this example
 
 
This is how to change WordPress font size.
 
It is quite a fiddle but it is possible.

 

Advertisements
This entry was posted in Computers and Internet. Bookmark the permalink.

One Response to Setting font-size in CSS and its Accessibility Issues

  1. elk says:

    i still have no clue how to change text size in my wordpress blog… 😦

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s