cis67 foundations for creating web pages professor al fichera rev. august 25, 2010—all html code...

C I S 6 7Fo u n d ati o n s fo r C re a ti n g We b Pa g e s

Professor Al Fichera

WEB TYPOGRAPHY

Rev. August 25, 2010—All HTML code brought to XHTML standards.

Typography on the Web by Professor Al Fichera http://profal2.com August 26, 20102

What is Typography?The Web is all about reading information, so our goal is to

make reading as easy as possible for the visitor.


Readability vs. LegibilityReadability and Legibility are not the same thing.


ReadabilityReadability refers to how easy it is to read a lot of text.

Serif fonts are easy to read.

Sans-Serif fonts are more legible.You can improve the readability of your pages a lot by using fonts

designed specifically for use on screen. Most computer fonts are optimized for the printed page, not screen display.


LegibilityLegibility refers to how easy it is to recognize short bursts

of text, such as headlines, buttons, signs, etc.


Readability on the WebUse a Serif typeface for extended text.

Sans Serif can be easier to read in shorter amounts of text, a paragraph or two or separated by graphics.


New Rules: SizeText not too big (not above 14pts.)Nor too small (not below 10pts.)

This text is 14pts tall. This text is 10pts tall.


New Rules: FormattingNever set large amounts of text in Bold, Italic, CAPS, or

SMALL CAPS.


New Rules: Lines of TextAvoid long lines of text.

Never spread across the entire page, type in columns.Avoid very short lines of text.

We read groups of words, not one word at a time.Keep columns of text to about 8 or 10 words for easy

reading.


New Rules: ContrastKeep enough contrast between the type and the

background.Black text on White best, other combinations can work

with enough contrast.Never use Red text on yellow, dark Blue on Black,

Orange on Pink, etc.


LegibilityUse a Sans Serif typeface for short bursts of text, buttons,

headlines, etc.Avoid typefaces with short ascenders or descenders, hard

to distinguish an ‘h’ from an ‘n’ etc.Don’t set type in all CAPS, unless it’s a distinctive part of

the “graphic look” you desire. There will be a trade out for legibility.


Breaking the RulesYou can break the rules if you know what the rules are.

Then have a conscious reason why you are breaking the rule and why it will be OK.


Reverse TypeLight type on a dark background, makes text appear

smaller. Compensate by making the text a bit larger and the line shorter.

This is what happens to text that is white on a black background. This is what happens to text that is white on a black background. This is what happens to text that is white on a black background. This is what happens to text that is white on a black background.

This is what happens to text that is black on a white background. This is what happens to text that is black on a white background. This is what happens to text that is black on a white background. This is what happens to text that is black on a white background.

Typography on the Web by Professor Al Fichera http://profal2.com

Illusions with Text

14 August 26, 2010

The white text on the black back-ground is one size larger than the black text.

This is what happens to text that is white on a black background. This is what happens to text that is white on a black background. This is what happens to text that is white on a black background. This is what happens to text that is white on a black background.

This is what happens to text that is black on a white background. This is what happens to text that is black on a white background. This is what happens to text that is black on a white background. This is what happens to text that is black on a white background.


Be ConsciousIf it looks hard to read, it is!Just follow the guidelines given and be sensible. Don’t

push it so far that people will get annoyed or not spend the time to read it.

Critique other pages for readability and legibility, notice what works and what doesn’t, and why.


Quotation MarksUse professional “curly” quotes, it doesn’t take that much

effort to make a Web page look great! ‘ use ’ use “ use ” use " use " straight quotes for inches.


Special CharactersThese special characters will make your Web pages appear

as professional as any desk top publishing document. (middle dot) (en-dash) (em-dash) (ellipsis)¢ (cents)© (copyright)® (registered) (Trademark)

More Special Characters Four characters < > & “ are used in HTML to represent

certain aspects. Because of this they cannot be used in the text part of your document without help.

Use the following codes to represent them:

for < use < for > use >

for & use & for " use "


Default Fonts and SizesThe default font is usually 12pt Times.You can not depend on the type looking the same on

anyone else’s computer as it does on yours.Whatever you code as a Paragraph will appear in someone

else’s computer in their browser’s default size and font.Heading four (4) is the same as the default size.


Fancy Font FacesAnytime you see a “Fancy” font face on a Web page, that

text is most likely a graphic file. It’s the best way to guarantee that the visitor sees the font and size

you want.


Letting Go of Total ControlAccept the limitations of the Web. Don’t create designs

that are dependent on text being a certain font, size or in a certain place.This concept can be up for discussion.


Letting Go of Total ControlDon’t tell the visitor how to set their defaults, maybe they

like their defaults just the way they are.


Letting Go of Total ControlIt’s not the visitor’s problem to make their system match

your ideal, it’s your problem to work around the variables.


Which Font Faces Should I Use?Designing Web pages for all OS browsers (that means Macs

too).

Mac Screen fonts, such as Verdana, Georgia, Geneva and New York, are more readable on web pages.

Printer fonts such as Times, Times Roman, Helvetica, Arial, are less readable on Macs.


Font Face PCs: Georgia

GeorgiaHow is the readability?

Georgia is a serif screen font from Microsoft. It is installed automatically when you install Internet Explorer.

This is a screen shot from a MAC *

*Thanks goes to Jonathan Nelson, student at Sierra College for all the MAC screen shots.


Font Face MACs: New York

New YorkNew York is a serif screen font from Apple. It is an ancient font, designed for the first Macs, but it still works well on screen.This is a screen shot from a MAC


Font Face PCs & MACs : VerdanaVerdana

How is the readability? Verdana is a sans-serif screen font from Microsoft. It

is installed automatically when you install Internet Explorer.

This is a screen shot from a MAC


Font Face MACs: Geneva

GenevaGeneva is a sans-serif screen font from Apple. It is an ancient font, designed for the first Macs, but it still works well on screen.This is a screen shot from a MAC


Font Face PCs & MACs: Times

Times (Times New Roman)How is the readability? Times (or Times New Roman) is a serif font optimized for

printing. It is not optimized for screen use. Compare with the previous two fonts. Many users have Times set as their default browser font.

This is a screen shot from a MAC


Font Face MACs: Helvetica

HelveticaHelvetica is a sans-serif font optimized for printing. It is not optimized for screen use. Compare with the previous two fonts. This is a particularly

good example of a font which is difficult to read on the screen.This is a screen shot from a MAC


Font Face PCs & MACs : CourierCourierHow is the readability?

Courier is a mono-spaced serif font designed to look like a typewriter font. It is not optimized for screen use, but its wide spacing generally works OK on screen when a mono-spaced font is needed.

So How Do I Write the Code?Use the Cascading Style Sheet version for listing Font

Families in the HEAD.For san-serif fonts…<style type="text/css">p { font-family: arial, geneva, sans-serif }

For serif fonts…p { font-family: georgia, new york, serif }

</style>


Last Notes on the FanciesJust because you have a fancy font face* loaded on your

computer, it doesn’t mean that your visitor has the same font. Your page will load with their own default font instead.*See the Bitstream information later in this lecture.


Designer HeadachesFactors designed to create Designer Headaches.

The visitors browser default fontThe visitors browser default font size.The visitors screen resolution size.

All can be controlled by the visitor, so your well planned idea has run into a snag.

It’s a factor to deal with too!


Logical vs. Physical StylesAll browsers interpret physical styles the same way; if you

choose “bold” it will appear bold in every browser.But some browsers might interpret logical styles

differently; if you choose “emphasis” it might be italic in one browser, bold in another, and underline in yet another.


The UnderlineWeb page designers are divided on the use of Hypertext

underling.Use it and you have clear directions to the visitor.Don’t use it and the visitor has to run the cursor over all colored

text to see if it is a hypertext link.


Logical TagsLogical style tags indicate how the given coded text is to be

used, not how it is to be displayed.These tags are essential to the Aural Browsers used by

blind individuals.

Logical Tags for Audio Browsers<abbr> this tag is useful for audio browsers, for instance,

FOX will be pronounced “F-O-X” instead of “fox”, example:Use the standard two-letter abbreviation (such as

<abbr>CA</abbr> for California.)

New Logical Tags for HTML 4.0<acronym> this tag designates a word formed by

combining the initial letters of several words, for example: Jonathan learned his great problem-handling skills from

<acronym> STEPS </ acronym > (Simply Tackle Each Problem Seriously)

New Logical Tags for HTML 4.0<dfn> this tag indicates a definition, for example:

Styles that are named after how they are actually used are called <dfn>Logical Styles</dfn>

A Few Logical Character Tags Logical Character tags indicate how you want to use text.

 and = Italicized for emphasis <cite> and </cite> = Italicized for citing books and movies. <code> and </code> = Fixed Width and = Bold

These tags have been around from the start, but may not be used quite as much as the Physical tags.


Screen Shots Logical tagsHere’s a look at them in both browsers. As you can see,

virtually no difference.

Check it out, really old screen shots from the old “Browser War” days!Could be 1998 or 1999 MSIE and Netscape Browsers.

Physical Style TagsPhysical Style tags indicate exactly the way text is to be

formatted. (Bold, Underlined, Italic, etc.)Nothing added in HTML 4.0, but two have been deprecated: 

Underline and <s> Strikethrough.

Physical Character TagsUse Physical Character tags to indicate exactly how

characters are to be formatted. and = Bold and = Italicized<tt> and </tt> = Typewriter Text

<big> and </big> = BIG and = SMALL and = SUP

 and = SUB


Physical Tags in ActionThese tags work in both browsers. Also, showing some

comparison tags.

Physical Style Tags<address> address tags usually go at the bottom of each

Web page and are used to indicate who wrote the Web page, who to contact for more information.

Addresses are often preceded with a Rule line <hr /> and the tag can be used to separate the lines.


What are Dynamic Fonts?Dynamic fonts are one of the developments in HTML

design from Bitstream. Dynamic fonts put more creative power in web authors'

hands.On the next few slides are a few examples of the many

Type Faces available.


Truedoc: Brush 455http://new.myfonts.com/search/Brush+455/fonts/


Truedoc: Snowcap

50 August 26, 2010

http://new.myfonts.com/fonts/bitstream/snowcap/


Truedoc: Engravers Gothic

51 August 26, 2010

http://new.myfonts.com/search/engravers+gothic/


Truedoc: Poster Bodoni

52 August 26, 2010

http://new.myfonts.com/search/Poster+Bodoni/fonts/


Truedoc: Zurich

53 August 26, 2010

http://new.myfonts.com/search/Zurich/fonts/


How Do I Find This Web Site?This is a link to the Home Page:

http://new.myfonts.com/foundry/Bitstream/

http://new.myfonts.com/foundry/Bitstream/


How Can I Use These Fonts?These fonts do cost, but not as much as you might think,

once you purchase them you can use them on your site by uploading them to your own Web host instead of linking to Bitstream directly.


Finally…I hope you enjoyed looking at all the wonderful things that

can be done with Text and Fonts on a Web page.When we get to CSS (Cascading Style Sheets), you’ll learn

how you can directly affect how Text and Fonts can be used on a Web page, and, you’ll understand the difference between them both.Thanks for watching!

cis67 foundations for creating web pages professor al fichera rev. august 25, 2010—all html code...

Documents