Web Typography: Viva La Revolution!

63
Photo: Wikimedia Commons

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 of Web Typography: Viva La Revolution!

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/

Learning Activity - Typography · 2018. 2. 4. · Learning Activity - Typography QUESTION 1 Define the term typography in your own words? - Typography is the art and technique of

Learning Activity - Typography · 2018. 2. 4. · Learning Activity - Typography QUESTION 1 Define the term typography in your own words? - Typography is the art and technique of

What is typography?llrc.mcast.edu.mt/digitalversion/Table_of_Contents_130066.pdf · 8 What is typography? 70 Anatomy 14 The nature of typography 18 Speaking and typography 72 Semiotics

What is typography?llrc.mcast.edu.mt/digitalversion/Table_of_Contents_130066.pdf · 8 What is typography? 70 Anatomy 14 The nature of typography 18 Speaking and typography 72 Semiotics

VIVA ANNUAL REPORT 2018 2018 PAVING THE PATH FOR … · paving the path for digital revolution viva annual report 2018 2 pt. visi media asia tbk pt. visi media asia tbk 3 daftar isi

VIVA ANNUAL REPORT 2018 2018 PAVING THE PATH FOR … · paving the path for digital revolution viva annual report 2018 2 pt. visi media asia tbk pt. visi media asia tbk 3 daftar isi

Typography - Obsession

Typography - Obsession

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

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

Web Typography

Web Typography

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,

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,

Typography, Placemaking and Signs Pt IV: Typography Case Studies

Typography, Placemaking and Signs Pt IV: Typography Case Studies

YRT Routes Viva blue Viva blue A Richmond Hill Viva purple ... · YRT Routes Viva blue Viva blue A Viva purple Viva pink Viva orange 3 20 96 165 165F Thornhill Jane Keele-Yonge Weston

YRT Routes Viva blue Viva blue A Richmond Hill Viva purple ... · YRT Routes Viva blue Viva blue A Viva purple Viva pink Viva orange 3 20 96 165 165F Thornhill Jane Keele-Yonge Weston

Typography lecture

Typography lecture

Viva la Vida · 2016. 3. 1. · Viva la Vida Viva la Vida Viva la Vida Viva la Vida Viva la Vida Viva la Vida Viva la Vida Viva la Vida Viva la Vida Viva la Vida Day of the Dead Educational

Viva la Vida · 2016. 3. 1. · Viva la Vida Viva la Vida Viva la Vida Viva la Vida Viva la Vida Viva la Vida Viva la Vida Viva la Vida Viva la Vida Viva la Vida Day of the Dead Educational

Viva la revolution

Viva la revolution

Part I The History of Typography and Place...series profiling typography and dimensional typography in the sign making industry. Wrtitten by Craig Berger 1 Typography, Placemaking

Part I The History of Typography and Place...series profiling typography and dimensional typography in the sign making industry. Wrtitten by Craig Berger 1 Typography, Placemaking

Typography. Typography exists to honor content. —Robert Bringhurst.

Typography. Typography exists to honor content. —Robert Bringhurst.

Typography - University of Colorado Boulderbreeze.colorado.edu/ATOC6020/2017_Fall_files/Carter2013_Ch5_Typ… · Typography Typography is the art of selecting and arranging characters

Typography - University of Colorado Boulderbreeze.colorado.edu/ATOC6020/2017_Fall_files/Carter2013_Ch5_Typ… · Typography Typography is the art of selecting and arranging characters

Typography .

Typography .

Viva la Resistance! The causes of the French Revolution Ms. Stiles River Dell High School The causes of the French Revolution Ms. Stiles River Dell High.

Viva la Resistance! The causes of the French Revolution Ms. Stiles River Dell High School The causes of the French Revolution Ms. Stiles River Dell High.

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

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

VIVA ANNUAL REPORT 2018 2018 PAVING THE …...PAVING THE PATH FOR DIGITAL REVOLUTION VIVA ANNUAL REPORT 2018 2 PT. VISI MEDIA ASIA TBK PT. VISI MEDIA ASIA TBK 3 DAFTAR ISI Table of

VIVA ANNUAL REPORT 2018 2018 PAVING THE …...PAVING THE PATH FOR DIGITAL REVOLUTION VIVA ANNUAL REPORT 2018 2 PT. VISI MEDIA ASIA TBK PT. VISI MEDIA ASIA TBK 3 DAFTAR ISI Table of

Introduction to Typography 09/5/2013 Typography IIntroduction to Typography.

Introduction to Typography 09/5/2013 Typography IIntroduction to Typography.