Web Design and Marketing – Week 4 – Web Style Guide – Chapter 8, Typography

The book that we are using for my Web Design and Marketing Class.  Also available for free on line (but a little harder to read) at http://www.webstyleguide.com/wsg3/index.html

 

 

 

 

 

Typography

Typography is the balance and interplay of letterforms on the page.  Good typography establishes a visual hierarchy for prose on a page.

Characteristics of Type on the Web

Although the rules a similar there are big differences in printed paper and on screen.

• Screens have a lower resolution (85 pixels per inch) than printed paper (1200 dots per inch)
• Computers use anti-aliasing, smoothing the edge around the type, which looks good when letters are normal but fuzzy when enlarged.
• Usable area of a computer screen is smaller than book or magazine

On-the-fly construction

Web pages have each unique font and style created on the machine as received. If a computer is missing a font it will fill in with the default font, rendering you page differently.

Content structure and visual logic

HTML was created to share papers on particle physics and was designed to enforce a separation of content and graphic design so all machines could render then easily. This resulted in pages that only machines would want to read.

Cascading Style Sheets

Cascading Style Sheets allow for the structural logic to continue but be able to influence the visual logic by modifying the way the tags look.  These can be modified for whatever media you want to use it on. It also allows for consistency across all pages and/or sites.

Legibility

Good typography depends on contrast between text fonts and also headlines and white space. Dense text means walls of gray and hard to scan. When text is your content, typography becomes your paintbrush in which you paint regular rather than patchy patterns.  Proper use of white space to create margins between graphic elements and the text is important. Text should usually be left justified as ragged left margins caused by centered and right justified text make it hard to read. Headings and titles should also be as it will break the flow of the left justification.

Line length can get to be a problem as screens allow for to long a length for comfortable reading. While that can be adjusted by a fixed layout you do not have control of the users screen.  While design says to fix the length, people loose the right to see things the way that want, a fundamental right of web usage.  Leading and indenting paragraphs are two ways to help the user with readability.

Typefaces

Typefaces, or fonts, are allowed to be set in modern HTML, In doing so, remember to use ones that would be on most different operating systems as the browser will replace its font with the one you choose, changing the feel of the document. Legibility of a font depends of the x-height, the height of a lower case x.

There are several fonts that look good on the screen and should be used whenever possible. Make sure in using a font that use specify several fonts of the same family to prevent the use of a default font. Also thought they may look the same, a font name may have a slightly different name so use them both. Let the user/browser decide the font size and then use em in the style sheet to create relative sizes.

Emphasis

Remember that is everything has special emphasis, then nothing will stand out.  Italics should be used for titles and foreign words and phrases.  Bold should be used for headings. Underline should not be used as it confuses the reader because it leads people to think the text is links. Color can confuse the user in a similar way and some people cannot distinguish colors. All capitals tend to be hard to read because we tend to distinguish words by their shape and it gives no visual hints. Spacing and indentation should be used for isolating text you want to bring to attention.

Display Typography with Graphics

Plain text is best for flexibility but when necessary use images for corporate logos and standard design. These can be created in programs like Adobe Photoshop.

Blogger Labels: Design,Style,Guide,Typography,index,interplay,visual,hierarchy,prose,Characteristics,Type,rules,paper,Usable,area,computer,magazine,construction,font,machine,Content,logic,HTML,papers,particle,separation,machines,consistency,text,Dense,walls,Proper,margins,justification,Line,length,usage,user,Typefaces,Make,size,sheet,Emphasis,Remember,Italics,words,Bold,Underline,reader,links,Color,indentation,attention,Display,Graphics,Plain,images,Adobe,Photoshop,differences,Computers,Sheets,users,paragraphs,systems,sizes,capitals,logos,fonts,browser