Beautiful Web Typography (#4)

download Beautiful Web Typography (#4)

of 64

  • date post

    17-Aug-2014
  • Category

    Technology

  • view

    13.977
  • download

    3

Embed Size (px)

description

The fourth rendition of my Beautiful Web Typography with some updates, additional info, more links and whatnot. Kudos should go out to the chaps listed in the end as well as inspirational peeps like Ellen Lupton, whose categorisation of things type into letter, text, grid I’ve used to structure this talk.

Transcript of Beautiful Web Typography (#4)

  • Beautiful Web Typography Letter, text, & page Simon Pascal Klein Version 4 Monday, 30 March 2009
  • Beautiful Web Typography Intro Monday, 30 March 2009
  • Beautiful Web Typography Im Pascal Klein. Monday, 30 March 2009
  • Beautiful Web Typography Im 1. a graphic & web designer; 2. a bit of a UI and UX acionado; 3. and, incurably, a rampant typophile. Monday, 30 March 2009
  • Beautiful Web Typography Typophiles are ber gks who typography. Hands up and make yourselves known. Monday, 30 March 2009
  • Beautiful Web Typography premise: The intertubes today are info-heavy. Much of it is textual. Much of it is a pain to read. Monday, 30 March 2009
  • Beautiful Web Typography typography | tpgrf | n Typography is the art of creating and setting type with the purpose of honoring the text it sets. Monday, 30 March 2009
  • Beautiful Web Typography Typography exists to bring order to information by dividing and organizing aiding readers in nding what they are looking for. Monday, 30 March 2009
  • Beautiful Web Typography i.e. make textual stu look pretty. Monday, 30 March 2009
  • Beautiful Web Typography Assumptions. It sucks? 1. Limited to sans-serif only for readability? 2. Only web-safe fonts? 3. Limited controlresort to Flash and other technologies? Monday, 30 March 2009
  • Beautiful Web Typography Not quite. (Yay!) Monday, 30 March 2009
  • Beautiful Web Typography 1. Letter (micro) 2. Text 3. Page or grid (macro) Monday, 30 March 2009
  • Beautiful Web Typography 0. Reset All the browsers have their own default styling for various (x)HTML elements. This makes it a pain for cross-browser consistency. Monday, 30 March 2009
  • Beautiful Web Typography body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,in put,textarea,p,blockquote,th,td {margin:0;padding:0;} table {border-collapse:collapse;border-spacing:0;} fieldset,img {border:0;} address,caption,cite,code,dfn,em,strong,th,var {font- style:normal;font-weight:normal;} ol,ul {list-style:none;} caption,th {text-align:left;} h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;} q:before,q:after {content:'';} abbr,acronym {border:0;} Googling CSS reset stylesheets should land you with numerous examples. This one above is from the Yahoo! UI library. Monday, 30 March 2009
  • Beautiful Web Typography Letter & Text typeface (font) and style spacing (tracking/letter-spacing) individual glyphs Monday, 30 March 2009
  • Beautiful Web Typography serif sanserif script blackletter monospace Monday, 30 March 2009
  • Beautiful Web Typography Mixing typefaces requires special attention. Try to align x-heights and sizes. X-heights? x-height x-height Helvetica Regular 96pt & Minion Pro Regular 96pt. x-height x-height Helvetica Regular 96pt & Minion Pro Regular 114pt. Monday, 30 March 2009
  • Beautiful Web Typography Use a limited palette of type families. A common and eective technique is to pair a serif and a sanserif face together. E.g.: 1. one sets the body, the other the headings; 2. one sets primary content, the other UI controls. We do this with the font-family property. Monday, 30 March 2009
  • Beautiful Web Typography roman (normal) italic oblique ultralight regular bold & bold italic condensed S MALL - CAPITALS Monday, 30 March 2009
  • Beautiful Web Typography Arial Verdana Courier New Times New Roman Georgia Trebuchet MS Monday, 30 March 2009
  • Beautiful Web Typography Typography is not picking a cool font. Je Cro Monday, 30 March 2009
  • Beautiful Web Typography Options for web fonts: Installed fontsmostly web-safe sIFR JS and Flash replacement Other jsCufn! http://wiki.github.com/sorccu/cufon/about Monday, 30 March 2009
  • Monday, 30 March 2009
  • Beautiful Web Typography Font stacks: desired fallback generic (e.g. serif, sans-serif, monospace) Monday, 30 March 2009
  • Beautiful Web Typography Use a combination of families, styles, weights and to breath some fresh air into your web type. font-weight controls weight and accepts numerical and descriptive (e.g. black) values. font-style controls style. Accepts the descrip- tive values (normal, italic, and oblique). font-variant controls case and accepts the values normal and small-caps. Monday, 30 March 2009
  • Monday, 30 March 2009
  • Web Typography 1.1 TRACKING T RACKING Letter-spacing Letter-spacing Monday, 30 March 2009
  • Beautiful Web Typography Lets see some loose word- spacing in action And now both loose word-spacing and tracking featured together. Monday, 30 March 2009
  • Beautiful Web Typography And finally, the recent popular trend of negative tracking. Monday, 30 March 2009
  • Beautiful Web Typography Tracking and word-spacing can help dierentiate, aiding readability by removing disruption. Examples might include spacing acronyms or setting numerical tabular data. Monday, 30 March 2009
  • Beautiful Web Typography