University of Greenwich
Website and presentation by James Barker, 3rd December 2003.
Should websites be designed in such a way as to allow the user to decide how they are rendered or should web designers attempt to exert the same control over their designs that print designers have?
Text
How web designers control text size and appearance
Web designers can exert full control of how text is rendered using Cascading Style Sheets (CSS). For a full introduction and for more information about CSS try W3Schools' CSS Tutorial.
Text size is set using the font-size: property, and can be applied to any HTML tag, thus rendering text within that tag as defined in the CSS.
em, px, pt?
There are several methods of defining text size, the most common being in em units (em), pixels (px) or points (pt).
The key difference between these methods is the way in which the user can affect their display.
- Using px or pt, the text size is set permanently at the dimensions specified
-
Using em, the text can be altered by a user changing the web browser's Text Size settings
- Note: only Internet Explorer prevents px or pt resizing, but with 95% of the browser market it must be considered
Use of the web browser's Text Resize function is an important accessibility feature. It allows the hard-of-sighted a large text alternative.
That said, Text Resizing can ruin the layout of a website and designers may prefer to fix all sizes and layouts to guarantee a consitent layout for all.
The BBC's website allows the user to alter the text using Text Resize. It also offers a large text only version of its site, which can also be resized, making text appear very large.
Boxesandarrows.com has its text fixed, using the px or pt methods. The Text Resize function will not work. However Boxesandarrows have provided a large-text version of their site which also responds to Text Resize, thus providing accessibility.
The Eden Project's website home page has fixed-text, but the rest of the site is Text Resizable. They make some comments about the site's accessibility on their Help page. They state their site is in accordance with W3C Web Accessibility Initiative, CAST, RNIB and IBM Research Labs. Their site has hidden navigation that makes its screen-reader friendly. Screen-readers are used by the blind or partially sighted to read website contact out loud. This is to be commended, but Text Resize compliance on the home page could have made the site even more accessible.
Font type
Be careful which font you choose - stick to common fonts that are universal to all computers. If you use a font that is not installed on the user's computer it will use a default font which you may not be happy with.
You are pretty safe with these fonts:
- Arial
- Courier
- Georgia
- Times New Roman
- Verdana
- Trebuchet
Source: Web Style Guide.com http://www.webstyleguide.com/type/cross.html
If you want to use fancy fonts for buttons and banners etc, be sure to create them as an image to ensure display.
Accessibility
True accessibility means that the (in this case) partially sighted user should get the same web experience as the standard user. It also implies that all users should get a similar web experience regardless of browser or screen resolution (within reason!)
The web designer should choose a method of text layout control - and their decision should be made based on site content, user demographics, accessibility, client wishes and budget. There doesn't have to be a trade-off between accessibility and layout control, they can exist together with no problems.
Methods of accessible text layout include:
- Fixed text but switchable Cascading Style Sheets providing large text
alternatives. This gives the user accessibility options and allows the designer
to be in control. This is the most desirable method which is easily maintained
once the CSS is set up. That initial set up will require extra investment
and maybe only viable for larger organisations.
- Resizable text using standard browser function. Achieved by using the em unit for text sizing in CSS. No further text accessibility obligations may be necessary and careful coding can keep the layout reasonable even after resizing. The trade-off with this cheaper option is potentially poor layout after resizing if coding has not been thoroughly tested and affected users may still go elsewhere or feel sidelined.
Brand
It may be tempting for Brand Marketing departments to insist on a completely fixed approach to maintain a consitent look whatever the circumstances. Brand preservation is important, but not to the exclusion of a significant minority of users by compromising accessibility. It doesn't make commercial or legal sense to not provide an accessible alternative. Consider the payback in terms of revenue and PR that investment in an accessible version can bring.
If the position of text in a certain way near an image is brand-important, then that area of content could use fixed layout and text, positioned in an otherwise fluid layout.
Recommendation
If you are using fixed height fonts, make sure you don't overuse small text, and consider providing a large text option. If you are using Resizable fonts its worth reviewing how they affect the layout when changed.
Make sure you do not use exotic fonts. Keep it accessible.
A designer can achieve all these things whilst still maintaining control and governance.