Upload File

web typography: viva la revolution!

63
Photo: Wikimedia Commons

Upload: mykl-roventine

Post on 28-Jan-2015

109 views

Category:

Technology


0 download

Report

Tags:

DESCRIPTION

An overview of recent (and not so recent) developments in web typography and how the look of the web is changing for the better.

TRANSCRIPT

Page 1: Web Typography: Viva La Revolution!

Photo: Wikimedia Commons

http://en.wikipedia.org/wiki/File:Eug%25C3%25A8ne_Delacroix_-_La_libert%25C3%25A9_guidant_le_peuple.jpg
http://en.wikipedia.org/wiki/File:Eug%25C3%25A8ne_Delacroix_-_La_libert%25C3%25A9_guidant_le_peuple.jpg
Page 2: Web Typography: Viva La Revolution!
Page 3: Web Typography: Viva La Revolution!

Hi.

Page 4: Web Typography: Viva La Revolution!

Hi.My name is Mykl.

Page 5: Web Typography: Viva La Revolution!

I’m a Type Geek.

Page 6: Web Typography: Viva La Revolution!

Ignite Minneapolis:When Good People Choose Bad Fonts

Page 7: Web Typography: Viva La Revolution!
Page 8: Web Typography: Viva La Revolution!

Brief History

Page 9: Web Typography: Viva La Revolution!

1996

Page 10: Web Typography: Viva La Revolution!
Page 11: Web Typography: Viva La Revolution!

“Core” FontsIntroduced

Page 12: Web Typography: Viva La Revolution!

Inspired by a slide by Garrick Van Buren

http://garrickvanburen.com/
http://garrickvanburen.com/
Page 13: Web Typography: Viva La Revolution!

Inspired by a slide by Garrick Van Buren

http://garrickvanburen.com/
http://garrickvanburen.com/
Page 14: Web Typography: Viva La Revolution!

1998

Page 15: Web Typography: Viva La Revolution!
Page 16: Web Typography: Viva La Revolution!

2004

Page 17: Web Typography: Viva La Revolution!
Page 18: Web Typography: Viva La Revolution!

Despite this,typographybecomes cool

Page 19: Web Typography: Viva La Revolution!

Despite this,typographybecomes cool

Page 20: Web Typography: Viva La Revolution!
Page 21: Web Typography: Viva La Revolution!
Page 22: Web Typography: Viva La Revolution!
Page 23: Web Typography: Viva La Revolution!
Page 24: Web Typography: Viva La Revolution!
Page 25: Web Typography: Viva La Revolution!
Page 26: Web Typography: Viva La Revolution!

...and partisan...

Page 27: Web Typography: Viva La Revolution!
Page 28: Web Typography: Viva La Revolution!
Page 29: Web Typography: Viva La Revolution!

...and popular!

Page 30: Web Typography: Viva La Revolution!
Page 31: Web Typography: Viva La Revolution!
Page 32: Web Typography: Viva La Revolution!
Page 33: Web Typography: Viva La Revolution!
Page 34: Web Typography: Viva La Revolution!
Page 35: Web Typography: Viva La Revolution!

TypographyTrends

Page 36: Web Typography: Viva La Revolution!

wearecupcake.com

http://www.wearecupcake.com/
http://www.wearecupcake.com/
Page 37: Web Typography: Viva La Revolution!

trentwalton.com

http://trentwalton.com/2009/02/23/my-cat-will/
http://trentwalton.com/2009/02/23/my-cat-will/
Page 38: Web Typography: Viva La Revolution!

teamfannypack.com

http://teamfannypack.com/denise/
http://teamfannypack.com/denise/
Page 39: Web Typography: Viva La Revolution!

markboultondesign.com

http://www.markboultondesign.com/
http://www.markboultondesign.com/
Page 40: Web Typography: Viva La Revolution!

blog.squarespace.com

http://blog.squarespace.com/
http://blog.squarespace.com/
Page 41: Web Typography: Viva La Revolution!

oliverkavanagh.com

http://oliverkavanagh.com/
http://oliverkavanagh.com/
Page 42: Web Typography: Viva La Revolution!

tputh.com

http://tputh.com/
http://tputh.com/
Page 43: Web Typography: Viva La Revolution!

elysiumburns.com

http://www.elysiumburns.com/
http://www.elysiumburns.com/
Page 44: Web Typography: Viva La Revolution!

chirp.twitter.com

http://chirp.twitter.com/
http://chirp.twitter.com/
Page 45: Web Typography: Viva La Revolution!

squaredeye.com

http://squaredeye.com/
http://squaredeye.com/
Page 46: Web Typography: Viva La Revolution!

ixwa.com

http://www.ixwa.com/
http://www.ixwa.com/
Page 47: Web Typography: Viva La Revolution!

bobulate.com

http://bobulate.com/
http://bobulate.com/
Page 48: Web Typography: Viva La Revolution!

behoff.com

http://www.behoff.com/
http://www.behoff.com/
Page 49: Web Typography: Viva La Revolution!

True Web Typography(Finally!)

Page 50: Web Typography: Viva La Revolution!

@font-face

Page 51: Web Typography: Viva La Revolution!

• Clean. Doesn’t use Javascript, Flash, images, etc.

• Searchable, accessible, standards-compliant

• Fast & efficient

Page 52: Web Typography: Viva La Revolution!

Tools/soultions

Page 53: Web Typography: Viva La Revolution!

kernest.com

http://kernest.com/
http://kernest.com/
Page 54: Web Typography: Viva La Revolution!

typekit.com

http://typekit.com/
http://typekit.com/
Page 55: Web Typography: Viva La Revolution!

Examples

Page 56: Web Typography: Viva La Revolution!

fontconf.com

http://fontconf.com
http://fontconf.com
Page 57: Web Typography: Viva La Revolution!

alistapart.com/d/cssatten/nels.html

http://www.alistapart.com/d/cssatten/nels.html
http://www.alistapart.com/d/cssatten/nels.html
Page 58: Web Typography: Viva La Revolution!

timoni.org

http://timoni.org
http://timoni.org
Page 59: Web Typography: Viva La Revolution!

craigmod.com

http://craigmod.com/journal/font-face/
http://craigmod.com/journal/font-face/
Page 60: Web Typography: Viva La Revolution!

garrickvanburen.com

http://garrickvanburen.com/
http://garrickvanburen.com/
Page 61: Web Typography: Viva La Revolution!

badassideas.com

http://badassideas.com/get-stoked-on-web-typography-sxsw/
http://badassideas.com/get-stoked-on-web-typography-sxsw/
Page 62: Web Typography: Viva La Revolution!

Photo by: takomabibelot on Flickr

http://www.flickr.com/photos/takomabibelot/4373062612/
http://www.flickr.com/photos/takomabibelot/4373062612/
Page 63: Web Typography: Viva La Revolution!

Mykl Roventine Designer of Things myklroventine.com twitter.com/myklroventine

Thankyou!

Photo by: Meshl on Flickr

http://myklroventine.com
http://myklroventine.com
http://www.flickr.com/photos/meshl/3699379563/
http://www.flickr.com/photos/meshl/3699379563/

Word and Place in Irish Typography - RADARradar.gsa.ac.uk/3194/1/Dixon_Word_Place.pdf · Word and Place in Irish Typography Brian Dixon Toponomic typography, or place-name typography,

The ARCHITYPOGRAPHOLOGIC timeline - Vincent · PDF fileThe ARCHITYPOGRAPHOLOGIC timeline ... typography and architecture. The beginning of the printing press ... the industrial revolution

Design ~ Typography Typography 101 Using Typography to Enhance Content

Chapter 7 Typography, Style Sheets, and Color€¦ · Chapter 7 Typography, Style Sheets, and Color Mrs. Johnson . Typography Typography refers to the arrangement, shape, size, style,

Alternative Typography

TYPOGRAPHY. Typography Typography is the art of creating and setting type with the purpose of honoring the text it sets. Typography exists to honor

A touch of typography responsive typography

Graphic Design · Expressive Typography 1 Graphic Design: Typography Expressive Typography exists to honor content. — Robert Bringhurst, The Elements of Typographic Style Typography

Viva la revolution

Typography project

Typography analysis

Typography Intro

Typography

Viva La Revolution: Why Universal Banking is under siege and what needs to be done

Typography - Obsession

Typography lesson

Typography Basics - Community College of Baltimore Countyfaculty.ccbcmd.edu/~dciccarelli/144/session9_type_handout.pdfTypography Basics Debby Ciccarelli CCBC ... ADiM Typography •Typography

Typography - Gothic

Reading Typography—Writing Typography

Typography II

(Web ) Typography

Core Identity Style Guide - Yeshiva University · Typography 1 1 Typography Use Rules 1.1a Typography Examples 1.1b Typography Violations 1.1c ... The above restrictions do no not

TYPOGRAPHY BASICS Technical Foundations II. Typography Basics Baseline Apple

Typography Basics - faculty.ccbcmd.edufaculty.ccbcmd.edu/~dciccar2/144/session9_type_handout.pdf · Typography Basics Debby Ciccarelli CCBC | ADiM Typography •Typography - the study

2d896i1y1wy42fscupjp2721-wpengine.netdna-ssl.com · BEVERAGE COFFEE SERVICE MENU EXPERIENCE THE VENDING REVOLUTION Viva la revolution MANAGEMENT MANAGEMENT Pentair/Everpure Honors

Viva la revolución? Harnessing the Data Revolution for Good Eva Jespersen, May 2015 Human Development Report Office

Typography Selecting appropriate typefaces for a document. Typography

The United States of America viva La Imagination Revolution

Typography 1

Masthead & Typography

Typography. What do we know about Typography?

Gawronski, Vincent T. (2002) - The Revolution is Dead. ¡Viva La Revolución! - The Place of the Mexican Revolution in the Era of Globalization

THE FRENCH REVOLUTION HOPE FEAR TERROR RECOVERY. “ Viva La Revolution “ The most significant Revolution in history over the last 300 years was the French

Typography- Why Typography is all that matters?

Typography, Placemaking and Signs Pt IV: Typography Case Studies