The Adventures of Cindy Li

@media 2006: Typography with Dave Shea

June 16 , 2006

Speaker

Dave Shea
Presented by Dave Shea

Lesson I learned last night : Don’t talk louder than the tv....(re: world cup)

You might know me as the guy who started CSS Zen Garden
Typography I’ve been doing professional typography.
I come be hung each back to it every now and then
I am not going to worry about it til we get some options
Some things have been happening what once wasn’t possible

I’ve got a url on the top right
Mezzoblue @media slides on typograhy
I’ve got a few articles that reference

Today’s menu

Current choices
Methods and techniques
Practical application

Typography” words of wisdom

Typography the craft of endowing human language with a durable visual form, and thus with an independent existence. its heartwood is calligraphy–the dance, on a tiny state, of the living, speaking hand–and its roots reach into the living oil, though its branches may e hung each year with new machines
–Eorbert Bringhurts, the elements of typographic styles

The application of the text affects the voice of the message, the tone of the words

Typography affects tone

Which one are you going to black tie affair? (wedding font.. )
Which one would you expect a clown?(comic sans)

Typography affects legibility

Spacing between the lines gives you more room to read

We only have 10 fonts to choose from

these fonts are common and ubitiqis but they are really plain and boring
they aren’t even good to begin with

Times New Roman

Really tough to see the font as anything as backup font
it looks like a mistake and your style sheet hasn’t been activated
its not overly interesting

Arial

Cheap knockoff of Helvetica
Any situation you need a sans serif font
but its hard to use it and use it well because its plain
Body copy and all the headlines

The Scourge of Arial

To professional designers .. typeface is no longer fashionable.
The designer where they intentionally could use
Some company...wanted arial .They already had arial because its cheap not because its a great font.

Verdana & Georgia

Technological need they needed to fill
Any font they had on screen anti-alias
They had to have it happen… “hinting”
the net result was to fit it pixel perfect at different font sizes
most legible fonts you could get
verdana hasn’t aged well.. very blocky look to it
we’re still at the point

We will have some possibility where this isn’t possible…

Trebuchet MS

Not too happy with too playful
too informal
Its the least controversial

Comic Sans

Your average person has a computer
likes Comic sans
sorry cache only cause its set in comic sans

Comic Sans Hall of Shame

Dave has photos

Lucida Sans & Palatino

Lucida is on its way out because its been so overused

Font Survey

Nothing remotely scientific re: site
People filling it out are font lovers.. so its some numbers might be useful to some people

NOTE: Sorry trying to figure out the wifi here… lost some notes…

Windows visa fonts

• candara
• Consolas: Set code examples in it
• Constantia:
  good headline font
  not sure about the actual body of the text
• Corbel: Very geometric feeling low modulation both great for body copy

Can Screen-readers read it?

Jaws

Can mobile devices read it?

Very hot topic. I want to make sure it looks good on a mobile device
I want to make sure it works on mobiles

Can Google Read it?

A couple of methods on how to apply them
Font tags: Just say no
Embedded font tag horror: font tags are dead

technique: CSS formatting
CSS font sizing issues: relative font sizing is certain more tricky

Techniques: SVG no browser suggests SVG

Adobe did have an SVG plugin but it has been hidden lately now they have flash we’re prob not going to see updates. Maybe in the future but ....

Technique: sIFR

markup a web-page and the structure
apply some javascript pull outs some elements.. h2? or a class? or a series of elements. It will read the content and give it to an external file using a custom type outline and embed the flash file w/the flash file
with three technologies embedding





Your replacing html w/flash..excessive

this guy found a way it works

sIFR Fallbacks
flash and script enabled you have a CSS backup

Accessibility implications worry no more

Technique: HTMLElement:
Image based for replacing

Image replacement: gives us control of images
hides the text

Image replacement: Phark method

Image replacement: gilder/levin method
accessibility it gets the thumbs up

CSS3 has this image replacement

Techniques summary: 4 best

• <img>
• CSS
• Image replacement
• sIFR

all have strengths
none are ultimate
they are per use case scenario
evaluate which are going to work

Scenario: Content Management System

• <img>: no pre render the image
• CSS:yes,k we can do styling
• IR: no
• sIFR: yes dynamically change

Scenario: Ensured control

marketing group wants one type face for all communications no questions asked

• <img>: yes
• CSS: no
• IR: no
• sIFR:yes

Scenario: Kerning control

• <img>: yes
• CSS: no
• IR: yes
• sIFR: not currently from mike davidson have preliminary kerning

Scenario: Styling and decoration

• <img>: yes
• css no
• IR: yes
• sIFR: maybe… vs 3 in the next 6 months are going to have some support
  font scalability to use the browser control to scale
  images don’t

Recommended resources:
the elements of typographic style
typographical design: form and communication
Font explorer x: mac only.. windows… coming soon?