advertisement

Type, Responsively: A more modern approach to type on the web

50 %
50 %
advertisement
Information about Type, Responsively: A more modern approach to type on the web
Design

Published on February 28, 2014

Author: jpamental

Source: slideshare.net

advertisement

Type, Responsively A More Modern Approach to Typography on the Web AIGA RI 11 Feb, 2014 Jason Pamental | @jpamental http://hwdesignco.com

Drawing on Quicksand + Responsive Web Design changed everything… and nothing + Forces focus on conveying meaning & hierarchy through relationships & proportion + Can’t avoid it: some in US are over 50% mobile–only hwdesignco.com | @jpamental | AIGA RI

Grammy.com hwdesignco.com | @jpamental | AIGA RI

What’s type got to do with it? + Everything: type is the most prevalent design element on the page + Words have meaning – 
 but letters have emotion + Type is the most efficient design element (in terms of file size) hwdesignco.com | @jpamental | AIGA RI

When is our industry going stop calling it “web” typography? @sblakeborough, via twitter hwdesignco.com | @jpamental | AIGA RI

Not sure we can. + Typography on the web requires additional consideration (art & science) + Our canvas is fluid; constantly expanding & contracting + Amazon sells more e-books than physical ones. Since 2011 hwdesignco.com | @jpamental | AIGA RI

Responsive Web Typography + Yes, it’s a thing + It’s not a publicity stunt + It’s about adapting to screen size, network speed & device capabilities + It’s about designing for what’s next hwdesignco.com | @jpamental | AIGA RI

Responsive Web Typography + Yes, it’s a thing + It’s not a publicity stunt + It’s about adapting to screen size, network speed & device capabilities + It’s about designing for what’s next • Last Winter Olympics: there was no iPad hwdesignco.com | @jpamental | AIGA RI

Responsive Web Typography + Type choices • Stats, Platforms & Screen Tests + Fallback fonts (It’s the web. Stuff breaks) • If the font fails, does your design hold up? + Proportion • It’s about composition (think: small paintings) hwdesignco.com | @jpamental | AIGA RI

Desktop Geese & Handheld Gander + Small canvas requires subtle proportions + What works in print… works in print + Bringhurst matters, but scale must adapt hwdesignco.com | @jpamental | AIGA RI

Elements of Typographic Style + Bringhurst’ scale works well on desktop + Looks ungainly on small screens + Have a scale that helps translate hwdesignco.com | @jpamental | AIGA RI

For example… hwdesignco.com | @jpamental | AIGA RI

For example… hwdesignco.com | @jpamental | AIGA RI

For example… hwdesignco.com | @jpamental | AIGA RI

Responsive Typographic Style + Line length is important, but use device norms for size + Think relative proportion, not specific screen size + Test! Font quality is improving, but no excuse for not knowing how it looks on ________ hwdesignco.com | @jpamental | AIGA RI

Don’t Panic. + There are lots of resources + Load only what you need
 (specify each weight/variant) + Manage the loading process
 http://bit.ly/jpfontfall2 + Use a modular scale
 http://bit.ly/jprwt + Have fun! hwdesignco.com | @jpamental | AIGA RI

Thank you! http://bit.ly/jprwtaiga Conference (#hashtag) Date Jason Pamental | @jpamental http://hwdesignco.com

Add a comment

Related presentations

My Music Magazine Pitch

My Music Magazine Pitch

October 30, 2014

music mag pitch

Questionaire charts

Questionaire charts

November 4, 2014

bk

Final research

Final research

November 5, 2014

final research

Cersaie 2014

Cersaie 2014

October 30, 2014

allestimento in cartone per il Cersaie 2014 alberi in cartone scultura in cartone

Quarta turma do workshop de Infografia, ministrado por Beatriz Blanco e Marcos Sin...

Related pages

Designing with Web Fonts: Type, Responsively

Designing with Web Fonts: Type, Responsively ... A Concise History of Web Type ... + Your type, only more beautiful: OpenType: ...
Read more

Responsive web design - Wikipedia

Responsive web design has become more important as the amount of mobile traffic now accounts ... He suggests that, compared with a simple RWD approach, ...
Read more

Type on the Web (with WordPress) - Technology - documents

Share Type on the Web (with WordPress) ... Type, Responsively: A more modern approach to type on the web. Crossing Web Boundaries with WordPress.
Read more

Designing with Web Fonts: Type, Responsively (PVD) - Design

Designing with Web Fonts: Type, Responsively Jason ... Ligatures + Your type, only more ... Symbolsethttp://symbolset.com+ Modern Pictogramshttp ...
Read more

Responsive Web Design: What It Is And How To Use It ...

Responsive Web design is the approach that ... architects don’t design a building for each group size and type ... Responsive Web design requires a more ...
Read more

HTML5 - Responsive Web Design

< link rel = " stylesheet " type = " text/css " href ... of a responsive Web design approach that ... more of this as responsive Web design evolves ...
Read more

What is Responsive Design? - speckyboy.com

... The following is a beginner’s introduction to responsive design not intended for more experienced web ... the type of device the way ... approach ...
Read more

A Modern Approach to the Guitar ,Bases on the Principles ...

×Close Share A Modern Approach to the Guitar ,Bases on the Principles of E.pujol VOL.4 - Guido Topper
Read more