Erik a tartE

Typography I, Lucinda Hitchcock Rhode Island School of Design

with great power

With great power there must also come — great responsibility.

Stan LEE

Amazing Fantasy #15, Spiderman #1

“

more ≠ better

typefaces

What makes a good screen typeface?

Large x-height

What makes a good screen typeface?

WebGEorGia vs. BaSkErviLLE

Web

WebGEorGia vs. BaSkErviLLE

Web

Does the future of the internet have room for web designers?

It seems that new posts about what the Internet has in store for us down the road pop up every week or two. Some propose that the Internet will deliver more of the same, but different somehow (it’s usually ambiguous just how), while others propose such radical changes that it’s hard to believe they could ever happen. And the truth is, none of us really know what will happen with the Internet in 10 or 15 years.

After all, it was only a little more than 15 years ago that Clifford Stoll wrote the now-infamous “The Internet? Bah!” post (subtitled: “Hype Alert, Why Cyberspace Isn’t, and Will Never Be, Nirvana”). In that post he detailed why a lot of things just wouldn’t happen online but most of which are now commonplace.

As web designers and developers, what the future holds for the Internet is imperative for our livelihoods. If the Internet has radical changes in store for us, we need to understand how they might effect what we do to earn a living and what we’ll need to do to adapt and keep pace — if that’s even possible.

GEorGia vs. BaSkErviLLE

Does the future of the internet have room for web designers?

It seems that new posts about what the Internet has in store for us down the road pop up every week or two. Some propose that the Internet will deliver more of the same, but different somehow (it’s usually ambiguous just how), while others propose such radical changes that it’s hard to believe they could ever happen. And the truth is, none of us really know what will happen with the Internet in 10 or 15 years.

After all, it was only a little more than 15 years ago that Clifford Stoll wrote the now-infamous “The Internet? Bah!” post (subtitled: “Hype Alert, Why Cyberspace Isn’t, and Will Never Be, Nirvana”). In that post he detailed why a lot of things just wouldn’t happen online but most of which are now commonplace.

As web designers and developers, what the future holds for the Internet is imperative for our livelihoods. If the Internet has radical changes in store for us, we need to understand how they might effect what we do to earn a living and what we’ll need to do to adapt and keep pace — if that’s even possible.

Large x-height

Open apertures & larger counters + bowls

What makes a good screen typeface?

GEorGia vs. timES nEw roman

Web Web

GEorGia vs. timES nEw roman

Web Web

eө eөLucida Gr andE vs. couriEr nEw

Large x-height

Open apertures & larger counters + bowls

Loose letterspacing

What makes a good screen typeface?

Looser?tahoma

Winner!vErdana

Large x-height

Open apertures & larger counters + bowls

Loose letterspacing

Distinct letter shapes

What makes a good screen typeface?

l1iGEorGia

l1i l1i

l1i l1i l1ihELvEtica GiLL SanS vErdana

timES nEw roman chaparr aL

l1iGEorGia

l1i l1i

l1i l1i l1ihELvEtica GiLL SanS vErdana

timES nEw roman chaparr aL

Large x-height

Open apertures & larger counters + bowls

Loose letterspacing

Distinct letter shapes

Unmodulated strokes

What makes a good screen typeface?

mErcury Gr adE 4 vs. mErcury Gr adE 1

Web Web

WebmErcury Gr adE 4 vs. mErcury Gr adE 1

mErcury Gr adE 4 vs. mErcury Gr adE 1

Web

Large x-height

Open apertures & larger counters + bowls

Loose letterspacing

Distinct letter shapes

Unmodulated strokes

Good hinting

What makes a good screen typeface?

FEdr a SanS ScrEEn via t ypothEquE

Font Hinting  pEtEr BiL’ak http://www.typotheque.com/articles/hinting

On Screen Legibility  aScEndEr corpor ation http://www.ascendercorp.com/fonts/on-screen-legibility

More on hinting

structure + style

html + css

HTML = HyperText Markup Language

Formatting language

System of tags communicating a page’s content to the browser

Can be created in any text editor

html, the text that makes the web go ‘round

Written inside angle brackets (<>)

Consists of an opening tag and closing tag

Tells browser which elements are contained on a page

html tags

<html> </html>a taG consists of an opEninG taG & cLoSinG taG for an html ELEmEnt

<h1>Primary Headline</h1> <h2>Secondary Headline</h2> <p>Paragraph of text</p> <a href="http://www.google.com">Link</a>tags communicate content SEmanticS

html tags

All html tags have attributes

An attribute is a quality or characteristic of the element

Elements can have multiple attributes

html attributes

<a href="http://google.com">Link</a>ELEmEnt

html attributes

<a href="http://google.com">Link</a> at triButE

html attributes

<a href="http://google.com">Link</a> vaLuE

html attributes

Give you more control over the elements when you start using CSS

No inherent styles or properties

Different elements can share the same class

IDs are unique, and different elements can’t share them

html class & id attributes

html class & id attributes

<a href="http://google.com" class="button">Link</a>

<a href="http://google.com" id="button1">Link</a>

CSS = Cascading Style Sheet

HTML says what to display, CSS says how to display it!

Simple text file containing rules for how to display HTML tags

css, the basics

CSS is cascading, meaning style rules are applied in order, the last rules taking priority over earlier rules

Simple syntax

css, the basics

selector { property: value; property: value; }

SELEctor is the html element that you are writing rules for

css syntax

selector { property: value; property: value; }

propErt y is a display characteristic you are writing a rule for. Each selector can have multiple properties, and some selectors have very specif ic properties.

css syntax

selector { property: value; property: value; }

vaLuE is the display characteristic that you want to apply to the property

css syntax

sandwich { cheese: cheddar; bread: rye; condiment: mustard; condiment-style: spicy-brown; }

css syntax

a { font-family: Helvetica; font-size: 12px; font-weight:bold; text-transform:uppercase; color:#000000; }

css syntax

a { font-family: Helvetica; font-size: 12px; font-weight:bold; text-transform:uppercase; color:#000000; } .button { font-family: Georgia; }

css syntax

Applies to the font-family: css property

Is a prioritized list of fonts to display

Start with a very specific typeface, move to a generic classification

Font stacking

h1 { font-family: Akkurat, Helvetica, sans-serif; }

Font stacking

Essentially a safety net for displaying different fonts on the web

Browsers only display fonts installed on the user’s computer, except when @font-face rule is employed

Why use font stacking?

CSS rule revolutionizing web typography

Has actually been around for many years

Until 2008, was only supported on IE browsers using EOT fonts

March 2009, Safari began supporting it with OTF and TTF fonts

July 2009, Firefox began supporting it with OTF and TTF fonts

Fall 2009, Firefox supports it with Web Open Font Format (WOFF)

WOFF and @font-face are backed by major type foundries

@font-face:

@font-face { font-family: Akkurat; src: url(‘akkurat.woff’) format(‘woff’); }

@font-face:

@font-face { font-family: Akkurat; src: url(‘akkurat.woff’) format(‘woff’); }

h1 { font-family: Akkurat, Helvetica, sans-serif; }

@font-face:

Lost Worlds Fair’s http://lostworldsfairs.com/

Quipsologies http://www.underconsideration.com/quipsologies/

Typographic Diversity for the Web http://edenspiekermann.com/woff/

@font-face: in use

Typekit http://typekit.com

Font Bureau’s Web Type http://webtype.com

Typotheque Web Fonts http://typotheque.com/webfonts

Google Font API https://code.google.com/apis/web

Font Deck http://fontdeck.com

@font-face: resources

good web design = good typography

Readability

Accessibility

Usability

Good web design & good typography =

Typeface

Size

Leading

Line length

Color

Texture

Columns?

Structure vs. Style

Dynamic text

Flexibility

Elasticity

Text as Interface

Semantic HTML

Mac vs. Windows

Good web design & good typography =

Cellphones?

Responsiveness

Pages?

Hierarchy

Search

Professional typography is not just pretty to look at. It facilitates the process of reading. If you look at text as an interface, typography is its usability.

oLivEr rEichEnStEin

www.informationarchitects.jp

“

the future will need good typographers

On Web Typography  JaSon Santa maria http://alistapart.com/articles/on-web-typography

Web Fonts at the Crossing  richard Fink http://alistapart.com/articles/fonts-at-the-crossing

The Potential of Web Typography  ian Lynam & cr aiG mod http://craigmod.com/journal/font-face

Web Design is 95% Typography  oLivEr rEichEnStEin http://informationarchitects.jp/en/the-web-is-all-about-typography-period

Articles

Web Font Specimen http://webfontspecimen.com

Type Tester http://typetester.org

Baseline Rhythm Calculator http://topfunky.com/baseline-rhythm-calculator

Px to Em Conversion http://pxtoem.com

Font Squirrel @font-face Generator http://www.fontsquirrel.com/fontface/generator

Tips & tools

Craig Mod http://craigmod.com

Jason Santa Maria http://jasonsantamaria.com

Jeffrey Zeldman http://www.zeldman.com

Subtraction (Khoi Vinh) http://www.subtraction.com

Type Kit Blog http://typekit.com/blog

Blogs

Big Web Show http://5by5.tv/bigwebshow

A List Apart http://www.alistapart.com/

Readable Web http://readableweb.com

Smashing Magazine http://smashingmagazine.com

Information Architects http://informationarchitects.jp