How close are we to achieving full typographic control over our web pages? How has CSS improved the situation and what's likely to happen in the future?
Introduction
Before we decide whether we are close to achieving full typographic control in web pages, it is worth defining what we mean by typography, stating its importance in web design and examining the existing forms of control and their limitations.
In this article we'll also take note of the differences between print and screen typography, summarise the history of it in web pages, identify how CSS has improved typography on the on the web, discuss the roll of platform, browser and resolution and the opportunities the future brings.
Definition
The arrangement and appearance of printed matterSource: http://www.dictionary.com
Background
As you can see the dictionary definition only describes printed type. No doubt this is because print is more commonly thought of in terms of typography but it is important at this point to highlight some clear distinctions between screen and paper typography.
Not only are there differences between paper and screen as media but also in the way we view them. When we read, we tend to look for recognisable shapes and not the letters of a word as you might expect. We also understand these words by scanning the top of their shape and not their entirety. Most printed media such as books or magazines, for example, render at 1200 DPI (Dots Per Inch) or greater. Monitors however at best produce at 85 DPI. It is therefore even more important for screen typography to have clarity of type and type structure in any given page.
A further problem for us when we read web pages is the limitation of the screen. Printed pages, even that of a paperback novel will better the screen in terms of space for its content text. The latter is forced to create a hyperlink to another page or makes use of a scroller to fit in the same quantity of text.
Perhaps it is unfair however to compare print and screen when they are such very different media serving what could be very different purposes. It is fair to say that most users will scan web pages searching for particular content and if they don't find what they want, will move away quickly. One only has to think of the term browser to understand in part (and for the purpose of highlighting this difference) web user behaviour. Print on the other hand offers a different service. If we take the example of a novel, its contents is predetermined. I doubt if anyone moves around a novel as one would in web pages. Granted a newspaper could be scanned for an article much the same as a user would search a BBC news site. The difference being that a lot of online time is spent looking for specific content in a variety of places where ambiguity can preside, in buying a newspaper however, we're searching within a confined space. It is also worth remarking that even when the user finds what they are looking for, reading the content often occurs after printing the web page has taken place. The user now benefits from the 1200 DPI as mentioned earlier!
Having established that there are many differences between type on paper and on screen and that we use them in very different ways, it's time to dive into a bit of screen type history.
Nico Macdonald tells us that the problem of luminosity, or light emitting, as opposed to reflective paper, led to a focus in the 1980s to pioneer anti-aliasing, mainly for TV. This was the begin of a drive to bring greater legibility to the screen. It works by adding gray pixels to the area surrounding a character, thus improving its smoothness and therefore legibility.
Since then the evolution of the world wide web, from a basic tool used by scientists to share data, to the vessel for information and trade used by millions around the world each day, demanded still greater legibility.
In some part VDU technology has begun to address this by marketing screens with not only a greater resolution and physical size but also a vast array of colours, creating tremendous possibilities for type in web pages.
Traditional print type fonts such as Times New Roman, a serif font, did not give the clarity now needed for the web and its growing users. Microsoft commissioned designer Matthew Carter to create more legible fonts that they then shipped with the next operating system. In 1996 Verdana was delivered, a sans-serif font, and Georgia, a serif font, are both still used widely on the web today.
Of course on their own fonts are only part of the typography equation on the web. Words need structure, they need hierarchy and HTMl gives us this. Tim Berners-Lee originally developed HTML and propped by new fonts and greater screen technology web typography moved out of its infancy during the early 1990s. Suddenly there was a call for HTML standards which led to a wave of work that focused on putting best practice into code.
Despite the arrival of HTML 2.0 and 3.0 in 1995 that promised code with greater depth, there was still a failure to standardise common practice as heralded by the World Wide Web Consortium (W3C) HTML working group. In 1996 however, HTML 3.2 was released and it came closer to tackling the issue of standardisation. The last version HTML, version 4.0 carries opportunity to deliver web pages that integrate with Cascading Style Sheets (CSS), scripting such as JavaScript, embedding objects such as Flash SWF, more for e-forms and improved accessibility function.
So we've got the monitors, fonts and HTML. The latter supplies the hierarchical structure to our web page. You can see how works in this article, via HTML tags such as <H1> - the main header of the document, then to the subheadings using <H2> and titles within them using,<H3>. The <p> tag groups words into paragraphs.
Importantly the <font> tag gave new variety to typography but was then superceded by the emergence of CSS font control. Now it's depreciated and XHTML's inheritance of the role HTML played, together with CSS, makes concrete the impetus by those in the web standardisation world, to deliver web pages with structure very much separated from style.
Now not only is the onus on designers to conform to standards and thus create sites that split the code between well structured XHTML pages and CSS but also to use these technologies to further control the way in which pages render for the end user.
More CSS
What is it about CSS that has improved the control over web pages? Well, we've discussed structure and the visual style separation and the other main benefit, Lynch and Horton tell us, is that they can enables us to have just one style sheet controlling hundreds of pages, thus the term cascading in CSS.
Looking more deeply, we can create a style for a particular HTML tag once, let's take the <H1> tag for example and this is applied to all <H1> tags in the site. In a hundred page site, think of the code you would have needed to create this using the <font> tag.
CSS has also improved the possibilities of the layout of web pages. This is another key factor in designing a legible page. A consistent layout is more easily achievable over many pages with CSS, with a move away from tables as a method of page division, we now use the <div> tag and applying style to it and the elements within.
We can make good use of alignment, a style attribute that aids the hierarchical layout of a page and influences headings, sub-headings and paragraph blocks. Of course there are best practice rules when applying style, all of which have been broken by new kids on the block like me fairly recently. A good example of a rule lies in applying colour to paragraph text. Ensuring that the text matches, in colour, the graphical colours of the page may not be the best way forward says Wendy Peck. Below exemplifies the difference between a large block of colour and smaller ones:
She also explains that there is a big difference between a large block of colour that you might find in a graphic and that of the type. She goes on to state this is because the type is made up of many very small blocks of that same colour and when placed together do they not only (with most colours) result in a more illegible page but often don't look like they are the same colour but a shade light that the original graphic colour we're trying to match. In fact her tip is to, if you insist in using coloured type, to darken it so as to convey the illusion that the colours match. Below illustrates this:
The message is to use black on white where ever possible.
Another great asset that CSS brings to the web page table is the ability to swap style. Perhaps the best example of using alternative style sheets is found at meyerweb.com. Here Eric Meyer utilises DHTML (a combination of CSS with JavaScript) to present the user with eight possible style for one page. Below is a screen shot of the default page, note the bottom left of the shot, these are the links to alternate the style of this page:
Here's an example of the same page with Meyer's Darkfall style sheet applied:
Accessibility is the most contemporary issue surrounding the use of CSS and adhering to web standards. This is especially so because of the pending accessibility law that will govern accessibility on the web, due to come into effect in April 2004. A well formed XHTML page should have little problem being fully accessible. CSS has enabled the designer to provide, as we have seen alternative styles to a page or site. To emphasis this I've built alternatives into this page. They include a page that is designed along the accessibility guidelines as stated by the W3C, please see below and note the red box:
I've also a working print version which omits the navigation bar and anchors, sets background colour to white, changes the font to black Times New Roman and sets the margins. This will work when you print the page and utilsies the media attribute of the link tag. As the user prints the page, this style sheet is called upon:
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
For a view of how this would render when you print, use the radio button below:
This radio button takes us back to the default style:
CSS also allows you to easily set the type size via the unit ems which ensures that the user can in-large the text to their own specification. The pixel unit does not give us this function. Eric Meyer's site has an additional feature worth mentioning here. By clicking on advanced set up from the styles selection part of the page the user can enter any pixel measurement they like, giving complete control of type-size to the end user. A screen shot of this is seen below, the area of interest has a red box around it:
The move to a structured markup has also benefited the disabled because, for example, we no longer use the <font< tag which would have prevented a use from switching to his/her own predefined style sheet. That said, it is all too easy to be complacent. If we were to use colour as an emphasis tool as opposed to say, bold, we'd be in danger of discriminating against an individual who is colour-blind. We also need to be mindful not to cause greater problems in controlling the dimensions of a web page through fixed widths. This is because when the user enlarges the text in fixed width divisions, the chance of them seeing a two word line despite altering their screen resolution is present.
Having looked at the exciting opportunities available with XHTML and CSS and examined the caution we need to take in view of accessibility law I feel it is appropriate to air the limitations to control that a designer faces.
Limitations
The platform or the operating system on you computer effects the way typography is seen. Below is an example that Lynch and Horton give highlighting the differences between the PC platform, on the left and the Mac platform on the right:
At this point we should mention graphics and the Flash SWF format. Both of these formats embed fonts which gives the designer over all control. The end user looses all control over the fonts chosen which opens us up to accessibility problems. A limitation here is that you need the Flash Player to view SWF files although on the plus side the movies are then fully scalable. Flash 6 came with enhanced accessibility features that allowed the designer to build an accessible movie and graphics can be given full descriptions, even in another page to satisfy the guidelines as set by the W3C
Lastly, we have the browsers. The bain of the web designers life. Historically, there has been what has been coined the browser wars where Microsoft's Internet Explorer seems to have come out top to the despair of many designers. Recently Netscape owners, now AOL have declared that they'll not be producing another. This is better news out of a bad lot not because IE 6 is the most compliant browser, far from it, more that now designers can leave the arduous task of coding for three - four different browsers. However, we still need to be aware that each has a number of different versions and our users can be using any number of them. There are also other browsers out there such as Mozilla and Opera that we should consider especially if we're designing a site where designers are the main audience for example as they'll more often tab not be using one of the two. The shot below highlights the difficulty that still remains, this is the top of this site in Mozilla 1.5, notice how the ‹H1› tag renders differently to that of IE6:
Here is an example of the way padding and margin render differently in Mozilla 1.5. As you can see the paragraph sticks out of the #wrapper ‹div› tag
The future
Web page design is fundamentally controlled by business. It controls budgets and therefore the time we can spend developing. Only a lucky few can spend their days pushing the parameters of design out into the unknown and whilst they are an essential part of the evolution process I don't believe that they hold the desires of the many, commerce does.
Emerging devices for viewing web pages will not be without their influence, including the further integration of internet access into existing functions in PDAs, mobile phones and television. Web page typography will have to adjust here to accommodate the variety in screen resolution and space for layout and tackle the accessibility issue.
There is also a increasing focus on ethical considerations such as privacy on the internet. Admittedly it is difficult to see how this will directly affect typography but if it influences web page design, it will inevitably affect its type because of the need to change content control you'll need to think about type. As bandwidth becomes less of a problem for home users to view video, audio and SWF files, web page design in the near future looks to stretch these further. In business there is a huge demand for low cost, easy access conferencing, now achievable with today's technologies. No doubt we'll see a dramatic change in the methods of web advertising when mobile phones, for example, harness more of the power the web can offer. As graphics and embedded fonts become less of a problem, software designers will have to give more control to the end user in formatting the type where at present they are not able to.
Language may play a greater role too in the future, especially if we look at the current growth areas of web user, namely in China and India. Clearly this has a potentially massive influence on the future of web typography just in terms of translation and its effect on layout. It is important to note however that there is a great effort to retain English as the internet language in these new growth areas.
In short, the pace of change is increasing and web page designers will need a bigger ear to a wider ground.
Conclusion
We've seen how the development of web technologies such as HTML and CSS coupled with improvements in hardware have given us greater control over our web pages. The question asks us however, whether we are close to achieving full typographic control over our web pages. Whilst I would be happy to concede that we have never had greater control over web pages than now, I don't believe I could ever say that we are close to full control. In fact I would probably stick my neck on the line and argue that I could never, at least in the more immediate future, see a time where we had full control.
We need to understand whether we're talking about the user here or the web designer. Full control for the designer implies that they know exactly how the web pages are going to render for the end user and as we have seen this is impossible. All the designer can do is hope that the end user views the pages as predicted and this is more likely to be achieved if the designer builds choice into the pages via, for example, alternative style sheets. Ultimately, we can't predict the platform, browser of screen reading devices so we can only ever expect to minimise the loss of control. Conversely, if the question is asking if the end user can ever achieve full control over web pages, the answer is also no because what the end user sees is increasingly controlled by the designer, albeit with suggested choice. I'd also like to note that a move to fully control a design by a designer can have its negatives in terms of the reaction of the end user. I exemplify the ability to fix the window parameter via JavaScript control of the Window Object, we all loved that one!
In the real world there are also other factors that play their part. A designer is predominantly working to budget and to time constrains. At best they can suggest, for example, which screen resolution to build for under their consultative role, but the final decision may rest with the client.
Lastly, I like to suggest that not ever achieving full control is the nature of everything. Why? Well because in our world we are always evolving. I can make an analogy with science as a whole. Science labels in a bid to understand and control but the world is not a fixed entity but always in a flux so science is playing catch up. Indeed as science explains it discovers more that needs explanation. The same applies to law. Societal behaviour changes and the legal system has to catch up by passing a law to control the behaviour. Using chip oil as and alternative to petrol springs to mind but equally good is changes in drug use or delinquency on street corners! For technology then, specifically for web page technology, we can see how the future will bring greater control to existing methods of communication only to loose it as they jump to the next gadget to reach the high street.
Reference
Bibliography
- Bruinsma, Max. 2003, Deep Sites: Intelligent Innovation in Contemporary Web Design, Thames & Hudson
- Lynch, Patrick J. and Horton, Sarah. 2001, Web Style Guide (2nd Ed.), Yale University Press
- Macdonald, Nico. 2003, What is Web Design?, RotoVision SA
- Peck, Wendy. 2003, Great Web Typography, Wiley Publishing, Inc., New York
Links
Code
- 2 November 2001 – Issue No. 126, Alternative Style : Working With Alternate Style Sheets by Paul Sowden
- meyerweb.com - Print Different