web design chapter 3 typography and web site design may 2007pvt ebus325 ctu1
TRANSCRIPT
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.
May 2007 PvT EBUS325 CTU 2
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….
May 2007 PvT EBUS325 CTU 3
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
May 2007 PvT EBUS325 CTU 4
Objectives of this Lesson….
Appreciate typography as an integral part of web page design.
Recognize the major type families.
May 2007 PvT EBUS325 CTU 5
Anatomy of Type
May 2007 PvT EBUS325 CTU 6
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:
May 2007 PvT EBUS325 CTU 7
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
May 2007 PvT EBUS325 CTU 8
Type Families
Old StyleFringeModern
Slab SerifSans SerifScriptDecorative
May 2007 PvT EBUS325 CTU 9
Old Style
May 2007 PvT EBUS325 CTU 10
Modern
May 2007 PvT EBUS325 CTU 11
Slab Serif
May 2007 PvT EBUS325 CTU 12
Sans Serif
May 2007 PvT EBUS325 CTU 13
Fringe Type
May 2007 PvT EBUS325 CTU 14
Scripts
May 2007 PvT EBUS325 CTU 15
Decorative
May 2007 PvT EBUS325 CTU 16
Another Example of Typeface Styles
May 2007 PvT EBUS325 CTU 17
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.
May 2007 PvT EBUS325 CTU 18
The default fonts for Windows and Macintosh
May 2007 PvT EBUS325 CTU 19
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
May 2007 PvT EBUS325 CTU 20
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 “”.
May 2007 PvT EBUS325 CTU 21
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.”
May 2007 PvT EBUS325 CTU 22
May 2007 PvT EBUS325 CTU 23
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.…
May 2007 PvT EBUS325 CTU 24
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.
May 2007 PvT EBUS325 CTU 25
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….
May 2007 PvT EBUS325 CTU 26
Aliasing vs. Anti-aliasing and Caps….Which looks better?
Silkscreen - an aliased font at 8 point.
Using all Caps for body text decreases legibility.
May 2007 PvT EBUS325 CTU 27
____ _____ ______
_________ __ _______ ____ __ _____
____ ___ ___ ___ ____ ____ _________ __________
Putting Text on Images
May 2007 PvT EBUS325 CTU 28
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.
May 2007 PvT EBUS325 CTU 30
Fonts aimed at the Web…Two fonts (Verdana and Georgia)
have been designed especially for use on Web Pages by Matthew Carter.
May 2007 PvT EBUS325 CTU 31
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.”
May 2007 PvT EBUS325 CTU 32
May 2007 PvT EBUS325 CTU 33
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
May 2007 PvT EBUS325 CTU 34
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.
May 2007 PvT EBUS325 CTU 36
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
May 2007 PvT EBUS325 CTU 37
Pixalization Affects Graphic Type - especially when the image is blown up….
May 2007 PvT EBUS325 CTU 38
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.
May 2007 PvT EBUS325 CTU 39
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
May 2007 PvT EBUS325 CTU 41
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.”
May 2007 PvT EBUS325 CTU 42
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
May 2007 PvT EBUS325 CTU 44
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.
May 2007 PvT EBUS325 CTU 45