The ‘font’ of all (intranet) knowledge?

This is another example of BT’s intranet standards used to give users a great experience.

Most browsers, and especially those for people with visual impairment, allow users to adjust font sizes to suit their needs. Therefore, it is important that you do not fix font in an exact, or ‘absolute’, size because users may not be able to see it!

Style sheets in content management systems will take care of font sizes, but if you create your own HTML & style sheets, you must use relative sizing, e.g. -1, or +1.

HTML <font> tag

You should use style sheets instead of the <font> tag to define font attributes. If you still have existing <font> tags within your site you should make sure they are relative and not fixed. You must then switch to style sheets at your next re-design.

Using styles for fonts

When using  styles also always use the relative tags, such as percentage or plus and minus. For example if you want a headline to be bigger then use something like +2, or 150%, or ‘bigger’. Similarly, to make something appear smaller in scale to the rest of the page use -1, 75% or ‘smaller’.

The use of percentage,  ‘em’ units or other ‘relative’ mechanisms to define the font size makes it easy for users to change the text size using their browser settings. 

Testing

Testing should be done in the initial stages of creating a set of styles so that subsequent pages linked to the same style sheet will work:

  • you need to check pages using the “Largest” and “Smallest” text size settings in the browser
  • also test using a range of browser resolutions and settings to ensure the content does not become truncated or cause overlapping sections of content and text
  • switch off the style sheet in the browser to ensure the content is still meaningful.

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