6 months ago


134 The Principles of

134 The Principles of Beautiful Web Design Figure 4.12. Justification problems: can you spot the three other rivers present in this lorem ipsum text? If you don’t want to change the text-alignment of your text to justify, your other options are left, right, or center. When text is centered or aligned along the left or right edge of the page or column, the spacing between the characters and words remains constant. The river problem can occur with any text block, but it’s much less likely to cause legibility issues in text that’s centered or justified on one side only. If you want to see how some HTML text will look in the browser with different leading, tracking, and alignment settings applied, two great tools to check out are Marko Dugonjic’s Typetester 14 and Panduka Senaka’s Typechart. 15 Both of these web applications enable you to try out a variety of typographic configurations for HTML text, and then grab the CSS needed to create the effect. Figure 4.13. Typetester (left) and Typechart (right) allow you to quickly test-drive HTML type configurations Typeface Distinctions Everybody knows what a font is. It’s a set of letters that appear in a certain style; they come preinstalled on your computer. And you change the font when you want your text to look different. 14 15

Typography 135 The average Windows PC has just over 40 fonts installed by default, while the average Mac user has access to around 100 fonts. Many of these fonts are grouped together into font families, with each font within the family representing a different variation of the core font. Most font families include the regular font face, along with italic, bold, and bold italic variants. Some fonts have no variations at all; some may only have bold or italic, and some commercially available font families have hundreds of variants. Just as all the members of some families have big ears or abnormally long pinkie toes, every font family has its own unique, identifiable characteristics. Take a look at the variation that exists between fonts for the letter “g” in Figure 4.14. These characteristics are what help us to categorize fonts and font families. The majority of font families can be classified as either serif or sans-serif. Of the 14 different fonts represented in Figure 4.14, seven could be classified as serif and seven as sans-serif. Can you distinguish between them? Beyond this distinction, there are many other ways in which we can classify and group fonts. I prefer to group fonts into six simple categories: serif, sans-serif, handwritten, monospace, novelty, and dingbats. Let’s look at each of them now. Serif Fonts Figure 4.14. Fourteen Gs Historians believe that the serif has its origin in Roman stone carving. There is much debate over the original purpose of these ornamental strokes, but in more recent history, they’ve been proven to increase legibility in large blocks of text by providing a horizontal line of reference. When designers choose a serif font, Times New Roman is often the first one that comes to mind. However, there’s a great variety of serif fonts on offer. To help us with that decision, it’s a good idea to first decide what type of voice we want our text to have.

Layout and Design - In Easy Steps
30 ways to create amazing web experiences on tablets
Download PDF -
The Complete Guide to a High Converting Website
Boot Camp
Web Site Design & Usability Testing - HIPNet
Creative Services - Keiger Graphic Communications
PDF Specimen Booklet - Fontworks UK Ltd
slides - HTML5 Developer Conference
A Kick-Ass Guide to Building an Awesome Website
ESL Essay Writing and Formatting Rules in 2018
Evaluating Data and Designing Subslab Ventilation Systems
Visual Design and Web Site Usability