Must Know About Basic Typography Part 2
Posted on 29 November, by Arvz under Web DesignUsing Cascading Style Sheets (CSS) in fourth-generation browsers gives similar capabilities. Of course you will still be restricted, for the moment, by the availability of fonts on the user’s system. CSS can’t magically produce Frutiger Extra Bold, Bold, Roman, and Light fonts out of nowhere. Yes, there are a few font-embedding technologies available now, but they are not reliable enough for general use just yet.
The idea behind CSS is that content and type markup are kept separate, giving the designer control over type that hasn’t been provided for in basic HTML. Apart from the ability to make global changes to styles very easily, it is also possible to deliver the same content with different specifications according to the browser being used. Whether the user has a whiz-bang computer with a large 24-bit monitor or a small black-and-white organizer, it is technically feasible to invoke a different set of styles that give the optimal user experience in any browser. And, if the browser doesn’t have CSS capabilities, the layout will degrade gracefully to give, at least, a satisfactory display.
This particular block of text is, as far as HTML is concerned, one paragraph. The fact that it is visually broken up into numerous indented paragraphs using
tags and runs of means that it will degrade better on non-CSS capable browsers. Normally I would alternate s with regular spaces, but the CSS implementation in MsIE ignores the spaces and halves the indent.
The style named “normaltext” is providing the type size, specified in pixels, not points, because pixels are absolute across platforms and points are not. In normaltext, I have also specified the typeface and line-height. If all that CSS could do was to add a provision for line spacing, it would still be invaluable.
In the next section, “alttext” supplies the typeface specifications and color and provides the indents.
Just like HTML and all the other cross-platform and cross-browser issues, CSS implementation is not very consistent at the moment. It is supported by Netscape and Explorer 4 and above, and partly in Explorer 3.x, but the results are not always predictable.
You can do a lot more with CSS than I have mentioned in this primer. The basic facilities are now reasonably reliable across browsers, but some of the more esoteric features can cause problems. Even this relatively simple, justified section with paragraph indents behaves quite differently in Netscape and Explorer depending on whether I use div or p.
As with any other Web page design uncertainties, you really need to test-fly your pages on as many computers and browsers as you possibly can.
The examples here only scratch the surface of what CSS can do. In addition to creating custom styles, you can modify most of the existing HTML styles. You could, for instance, redefine the pre tag to be a larger type size or a different color, or adjust the H2 tag to be a particular font, size, and style.
If you want to find out more, check out the CSS links in the Links section and in the advanced section under Cascading Style.
Finally, some readers won’t be able to see the results of your CSS. It’s important to make sure your pages still look good in older browsers too.
Aliasing is a term used to describe the undesirable effects produced when visual information is presented at a lower-than-optimal resolution. For example, do you remember in cowboy films when the stagecoach wheels seemed to spin backwards? That was because the resolution of 24 frames per second was insufficient to capture the true forward motion of the wheels, and the illusion of the spokes moving backwards was because, in subsequent frames, the next spoke was almost reaching the position of the spoke in the previous frame.
Anti-aliasing in computer graphics was popularized by Quantel in their Paintbox computer systems back in the early ’80s. Much of what we take for granted now in programs like Adobe Photoshop was pioneered in early videographic systems costing hundreds of thousands of dollars. With the relatively coarse resolution of computer screens, individual pixels (picture elements) are quite apparent. Lines of pixels that perfectly fit the grid on a computer screen because they are horizontal, vertical or at 45 degrees cause no problem. Lines drawn at any other angle have to be approximated because they conflict with the natural grid and look stepped.
If the runs form a regular pattern, i.e. always two or always three, then you get a “sweet” line which, although stepped, is evenly stepped and doesn’t look as objectionable as the arbitrarily stepped one above.
For type, any edge that does not fall on the natural grid produces steps. Some cleverly designed screen fonts keep to the natural grid and look fine, but type that is really intended to be printed on a high resolution printer can look bad — or at least severely compromised — on a computer display.
Pixels are a fixed size and can’t be chopped up like ceramic tiles or building bricks. If you want to smooth out these unsightly steps, you can only do so using tone and color. By introducing pixels of a color somewhere between the foreground and background colors, you can effectively smooth the edges of the lines. To smooth the edge of a simple black-on-white character on the screen, a program like Photoshop will create 16 to 20 intermediate tones of gray to fill in the steps and, from normal viewing distances, the type will look smooth. No matter what the type or background color — it might be a full-tone photograph for instance — pixels of an intermediate tone and color are used to give the illusion of smoothness.
This strategy assumes that the display can handle all these colors. But on, for instance, an 8-bit display with only 256 colors, all these subtleties of tone are going to get lost, and colors are going to snap to their nearest Web palette counterparts. The image below shows how the individual pixels have “posterized” in the 8-bit rendition by a browser, yet still gives an acceptable result.
There are a number of different coding techniques used to produce anti-aliasing, and some are better than others. Try setting the same text in different programs, compare the results, and decide for yourself which is best.
Typographic design means different things to different people. Some like their type neatly arranged in grids, everything lined up with not a letter out of place. Others prefer a more free-form approach. But no matter what your stylistic preferences, being able to prioritize information successfully is one of typographic design’s most essential functions.
When a reader scans a printed or Web page, they are looking for information — fast! The designer can make it easier for people to find the information they need if it is presented in a logical manner. Any page of text starts out as a solid block of type. Without any other intervention, the reader will start at the top left and work down to the bottom right - so there is a natural flow there from the beginning.