4 months ago


142 The Principles of

142 The Principles of Beautiful Web Design The reason the two sentences appear to be the same width now is that Courier is a fixed-width or monospaced font. This category of fonts has uniform spacing, and the letterforms are designed so that they’re similar in width. Fixed-width fonts were initially designed around the technical limitations of typewriters. Since early typewriters were incapable of moving the typed page a different distance when a “w” was typed, rather than an “i,” specialized fonts were developed for these devices. These fonts had to remain readable, despite the spacing being the same for every letter. Early computer displays employed fixed-width fonts as well, but it was only a short time before computers were able to display much more legible variable-width (or proportional) fonts. So why are fixed-width fonts still around today? Mainly for the sanity of coders and accountants. When you have to write code or display data as text, it’s important that characters line up from row to row and column to column. If you’re reading this book, you’re probably already familiar with fixed-width fonts from writing HTML and CSS. The benefits of these monspaced faces can be seen clearly in Figure 4.23. CSS3, please! 22 is a cross-browser CSS3 rule generator that allows you to experiment with CSS3 properties. Figure 4.23. Fixed-width fonts in action at CSS3, please! On the Web, the standard way to display text in a fixed-width font is to wrap it with and tags. pre is short for preformatted text, and aside from displaying fixed-width characters, the pre element also preserves tabs, spaces, and line breaks. This usually makes displaying code or tabular data on a website as simple as cutting and pasting from the source. I say usually because HTML tags that exist within preformatted text will be rendered normally, so if you’re trying to include any tags in your code, you’ll need to replace any

Typography 143 <, and any >s with >. As with every other HTML element, pre can be styled with CSS. Often, web developers who plan to show code on a page want the code to stand out from the regular text. Using CSS, the pre tag can be given a border, a background treatment, additional margins, or a different text treatment to help it to stand out. Another interesting, albeit obsolete, use of fixed-width fonts is in the creation of ASCII art. ASCII (American Standard Code for Information Interchange) was one of the original English character encodings for communications equipment, and for several years the 95 printable characters in this seven-bit system were the only graphics that ever showed up on a display. Before the Internet existed outside of the military and academia, there were networks of dial-up bulletin board systems (BBSs), many of which displayed menus and game graphics in ASCII characters. Having grown up during the peak of the BBS era, I loved to see the “underground” graphics people could create using only fixed-width type. Although you can now create more intricate ASCII art with web apps like ASCII-O-Matic 23 or Patrick Gillespie’s Text Ascii Art Generator, 24 the ASCII art created during the late 1980s and early 1990s was composed character by character, and really pushed the limits of the medium. This type of artwork, like the Energy BBS title in Figure 4.24, is an often-overlooked link in the history of computer graphics. Figure 4.24. Energy BBS ASCII art by Carsten Cumbrowski 23 24

Boot Camp
Layout and Design - In Easy Steps
Download PDF -
30 ways to create amazing web experiences on tablets
Visual Design for Library Websites - WebJunction
PDF Specimen Booklet - Fontworks UK Ltd
How to build a department web site (starter pack) - University of ...
Visual Design and Web Site Usability
Responsive Email Design Guide - e-Dialog
Mobile First