Web Design Chapter 3 Typography and Web Site Design May 2007PvT EBUS325 CTU1.

Web Design Chapter 3Typography and Web Site DesignTypography and Web Site Design

May 2007 PvT EBUS325 CTU 1

Introduction

“Typography is the style, arrangement, and appearance of text.”*◦“On the Web the use of fonts and

good typography can influence how clearly you communicate with your audience.”* * “Introduction to Web Design Using Dreamweaver” Evans and

Hamm, McGraw-Hill, 2007.

Understanding Type is the key to unlocking its potential on a Web page.


More IntroductionThe fonts you use for your website are an

important decision, as they will often reflect your site’s tone and affect its visual impact.

http://webmonkey.wired.com/webmonkey/design/fonts/tutorials/tutorial3.html

Typography’s Importance to a successful Web Page…◦ Besides being an important element in Design,

the font you pick has huge effect on the message the visitor gets from your web page. Corporate page, friendly page, cool page,

professional feeling page, a fun attitude, a radical page, an edgy web site.

◦ Font is the way the words look graphically, and not their meanings….




Typography Should*:Invite the reader into the textReveal the tenor and meaning of

the textClarify the structure and the

order of the textLink the text with other existing

elements


Objectives of this Lesson….

Appreciate typography as an integral part of web page design.

Recognize the major type families.


Anatomy of Type


FormattingFormatting is the

determination of what font sizes, colors, styles, typefaces, and alignments to use on your Web Page.◦ Font types - a set of

characters with a specific shape and style. (Times New Roman, Courier, Arial, etc…)

◦ Font Size - On a Web page this is specified in Pixels.

◦ Font Style - the application of bold, italic or underline to the text. With CSS you can do:


Formatting Guidelines cont.Text on your Web pages should

be readable, formatted consistently, and attractive in presentation.◦Readability - The most important….

Text to background contrast. Consistency

Color and Size and Appearance Alignment Limited number of Fonts


Type Families

Old StyleFringeModern

Slab SerifSans SerifScriptDecorative


Old Style


Modern


Slab Serif


Sans Serif


Fringe Type


Scripts


Decorative


Another Example of Typeface Styles


Type and Web PagesType can be generated for a Web page in

two different ways…◦ With ASCII text via the coding of XHTML and/or

using CSS.◦ With a picture of text in the form of a web

Graphics such as .gif, .jpeg, or .swf.The default typeface of the Web is Times

Roman.◦ In order to see the content in Times Roman, they

must have this font pre-installed on their systems….all other XHTML specified fonts as well…

◦ Choices for XHTML generated fonts are more limited than your choices for graphics based fonts. HTML Font should be cross-platform

compatible.


The default fonts for Windows and Macintosh


MS DialogMS Dialog LightMS LineDrawMS SerifMS Sans SerifMS SystemX

There are nine “web safe” fontsThese fonts are installed on both

Windows and the MAC…They include:

◦ Arial◦ Arial Black◦ Comic Sans MS◦ Courier New◦ Georgia◦ Impact◦ Time New Roman◦ Trebuchet MS ◦ Verdana


The CSS Property font-family

The font-family property of CSS allows you to choose multiple fonts in order of preference….◦font-family: ‘Calisto MT’, Georgia, ‘Times New Roman’, serif;

◦The font name must be spelled exactly as it is named on the computer…multiple word names must be surrounded by ‘’ or “”.


Pros and Cons of XHTML Generated & Images of Text

While XHTML generated text may be limiting, it is searchable, accessible, can be translated to other languages, and is small in file size.

Pictures of text afford more design freedom. You can use any font and style and the end user does not have to own the font to view the picture.◦According to “Web Design” 2007,

graphics based “….text should essentially be limited to the headlines, page headings, and quotes.”



Working with Graphic-based Type

Graphics-based type works well for static text that doesn’t change very often….

On the other hand are there any options for using customized fonts with text that changes….uploading new pictures can be time consuming….

Abbreviated ProcessDesign your site as normal, but

use headlines styled with CSS.◦Users without JS and Flash will see

these CSS styled headlines.Export a Flash file that will

generate your new typeface.…


Working with TypeFirst rule: type must be legible!

—Too much distortion makes letters hard to read.—Aliasing vs. anti-aliasing can affect the readability of type.

—Which Platform the visitor is using also affects font readability…especially as the font size gets below 12 points.


Serif vs. Sans-serif and LegibilitySerif fonts have doodads at the ends

of the letters: this is a serif font – Book Antiqua

Sans-serif does not contain these letter decorations…this is sans-serif font

Web page text - the sans-serif type faces are easier to read.

Serif fonts are said to be easier to read in print form.◦ Serif fonts designed especially for

use with digital media mitigate this rule….


Aliasing vs. Anti-aliasing and Caps….Which looks better?

Silkscreen - an aliased font at 8 point.

Using all Caps for body text decreases legibility.


____ _____ ______

_________ __ _______ ____ __ _____

____ ___ ___ ___ ____ ____ _________ __________

Putting Text on Images


Type on the Mac vs. Windows

You would think that the ASCII typefaces would look the same on all platforms….this is not the case!

If you have ever been to a site where you could not read the text, the cross platform issue may have contributed to this problem.◦ The default Times Roman does a decent job on both the MAC and Windows

◦ Georgia may be a better choice as it works on either platform as well and is slightly more legible.

◦ Arial works fine on both the MAC as well as under Windows. May 2007 PvT EBUS325 CTU 29

Besides the Font…The size of text between the MAC

and Windows are different.◦Fonts display larger on PCs than they

do on MACs.


Fonts aimed at the Web…Two fonts (Verdana and Georgia)

have been designed especially for use on Web Pages by Matthew Carter.


Notice how much more legible these are from the default

Combining TypeYou need unity of design, but you also

need to differentiate different kinds of text (headers, content text, navigation text, link text, section titles, footnotes, page numbers, border notes,….).

Two criteria:—Is it legible?—Does it look good as part of the whole

design?—The general rule is “less is more.”



Combining TypeType from the same family of typefaces is recommended on a presentation…

Type Adjustments 1. Kerning: the space between individual

characters 2. Leading: the space between lines

◦ CSS line-height; in em = the size of a font from the top of the font’s cap height to the bottom of the lowest descender…(M)

3. Tracking: overall spacing between all characters


Fireworks

Type Alignment

Left, Right, Justify◦ text-alignment: left or right or

center or justifyJustify is very problematic…

◦ This is when the text is in blocks form.

◦ This is an example where the text is justified into block form by the word processor in PowerPoint. When this is use there is variable spacing between words. This causes a river to run through the text which is considered bad form. Word processors are able to hyphen words, but the browser is not. The narrower the column of text the more it is obvious. May 2007 PvT EBUS325 CTU 35

Type as an Element of DesignType is not an afterthought, but an

integral part of the design.Different types can convey different

emotional qualities.


Legibility of Type on the Web

Contrast is particularly important for legibility on computer monitors.

While serif fonts are preferred in print, san-serif fonts are generally easier to read on a computer monitor.

Anti-alias most large fonts to avoid pixelization.

Use alias fonts when the font size is small such as on small buttons.

Pixelization affects type legibility for graphic type.—Use straight-backed types with no serif or

with flat serifs.—Use larger characters


Pixalization Affects Graphic Type - especially when the image is blown up….


Compatibility - the bottom line…

If the font you used is not installed on users’ computers, users will not see the design you intended.—Use common fonts found on

most systems, or—Insure that if you have a lot of

text, arrangements for printing are made…..—.pdf file of the page will insure that

the user sees the information as you intended.


Choosing the Right Fonts*This can be a difficult decision…Recommendations:

◦ First define the feelings you’re trying to evoke in the member of your target audience… Are you trying to show the site as hip

and young, or steadfast wisdon? Something themey (Mexican Fiesta or

a more formal environment)?◦ With these notions, one should be able

to narrow the font choices down.There are no bad fonts, only

inappropriate ones.No more than 4 different fonts in a

Web site design… *”The Principles of Beautiful Web Design”, Jason Beaird, 2007.May 2007 PvT EBUS325 CTU 40

Example for Joe’s Restaurant

Joes Restaurant - Arnprior

Joes Restaurant - Skia

Joes Restaurant - Lithos Pro

Joes Restaurant - Modern No. 20

Joes Restaurant -Harrington

Joes Restaurant - Adobe Garamond Pro

Joes Restaurant - Amplitude BRK

Joes Restaurant - AliensJoes Restaurant -Alien Ghost 2


Text Appearance Guidelines

From: Research-Based Web Design & Usability Guidelines….2004◦ “There are several issues related to text

characteristics that can help ensure a website communicates effectively with users: Use familiar fonts that are at least 12pts; Use black text on plain, high-contrast

backgrounds; Use background colors to help users

understand the grouping of related information.

◦ “Even though is is important to ensure visual consistency, steps should be taken to emphasize important text. Commonly used headings should be formatted consistently, and attention-attracting features, such as animation, should only be use when appropriate.”


Guidelines #1, #2, #3

When users are expected to rapidly read and understand prose text, use black text on a plain, high-contrast, non-patterned background

Ensure visual consistency of website elements within and between Web pages (5/5).

Ensure that the format of common items is consistent from one page to another (4/2) May 2007 PvT EBUS325 CTU 43

Guidelines #4, #5, #6, #7

Use at least a 12-pt font on all web pages

Use a familiar font to achieve the best possible reading speed

Change the Font characteristics to emphasize the importance of a word or short phrase

Draw attention to specific parts of a Web page with the appropriate (but limited) use of moving or animated objects, size differential between item, image, brightly-colored item, and varying font characteristics


SummaryTypography is the arrangement,

style, and appearance of text.Type families have common

characteristics such as use (or not) of serifs.

Typography is not an afterthought, but an integral part of design.

Type must — above all — be legible.

Be aware of the Guidelines….◦ Keep in mind accessibility issues and

text.


Web Design Chapter 3 Typography and Web Site Design May 2007PvT EBUS325 CTU1.

Documents

Transcript of Web Design Chapter 3 Typography and Web Site Design May 2007PvT EBUS325 CTU1.