Dominating the Web Typography

download Dominating the Web Typography

of 206

  • date post

    18-Jul-2015
  • Category

    Design

  • view

    2.976
  • download

    1

Embed Size (px)

Transcript of Dominating the Web Typography

  • Dominating the

    Web Typography

    Eduardo Shiota Yasuda @shiota Conferncia CSS Brasil

  • Hello! twitter.com/shiota github.com/eshiota slideshare.net/eshiota contato@eshiota.com

  • I Typography

  • Typography is everywhere.

  • We gotta remember the roots of what we do.

  • 15.000 BC 12.500 BCAltamira & Lascaux

  • 3.000 BC 1.500 BCPictographs

  • 1.500 BCPhoenician alphabet

  • 750 BCGreek alphabet

  • 146 BCRoman alphabet, Capitalis quadrata

  • 0Better materials, Capitalis rustica

  • 4th 5th centuriesUncials and semi-uncials

  • 8th centuryCarolingian minuscules

  • 12th centuryApex of goth art and Middle Ages

  • 15th 16th centuriesRenaissance, Gutenberg press, Cursiva humanista, type foundries

  • 19th centuryIndustrial Revolution, linotype, Art Nouveau, display types

  • 20th centuryModern Design, Avant-garde, Bauhaus, sans-serif types, digital typography

  • 21th centuryWeb typography and CSS

  • The basics

  • Basics

    Classification

  • Most of the classification systems agree with these type categories:

  • Serif types

  • Museo

    The quick brown fox jumps over the lazy dog.

    Meta Serif

    The quick brown fox jumps over the lazy dog.

    Times New Roman

    The quick brown fox jumps over the lazy dog.

  • Sans serif types

  • Futura

    The quick brown fox jumps over the lazy dog.Museo Sans

    The quick brown fox jumps over the lazy dog.

    Helvetica

    The quick brown fox jumps over the lazy dog.

  • Gothic types

  • Fette Fraktur

    The quick brown fox jumps over the lazy dog.

    Goudy Text

    The quick brown fox jumps over the lazy dog.

    Wilhelm Klingspor Gotisch

    The quick brown fox jumps over the lazy dog.

  • Cursive types

  • Lucida Calligraphy

    The quick brown fox jumps over the lazy dog.Mistral

    The quick brown fox jumps over the lazy dog.

    Apple Chancery

    The quick brown fox jumps over the lazy dog.

  • Display types

  • Comic Sans

    The quick brown fox jumps over the lazy dog.Sketch Rockwell

    The quick brown fox jumps over the lazy dog.

    GodOfWar

    The quick brown fox jumps over the lazy dog.

  • Dingbats

  • Bodoni Ornaments

    The quick brown fox jumps

    over the lazy dog.

    Travel Icons

    The quick brown fox jumps over the lazy dog.

    Wingdings

    The quick brown fox jumps over the lazy dog.

  • On the CSS, you may choose generic families as fallbacks.

  • .my-serif-text { font-family: "Meta Serif", Times, serif; }

    .my-sans-serif-text { font-family: "Proxima Nova", Arial, sans-serif; }

    .my-monospace-text { font-family: Monaco, "Courier New", monospace; }

    .my-cursive-text { font-family: "Zapf Chancery", "Brush Script", cursive; }

    .my-fantasy-text { font-family: "Sketch Rockwell", Papyrus, fantasy; }

  • Basics

    Anatomy of a type

  • baseline

    font size

  • Typographybaseline

    descender height

    x-height

    cap height

    ascender height

  • Typography

  • Ty

    p

    o

    g

    r

    a

    p

    h

    y

  • Basics

    Units

  • Physical units

  • To deal with physical units, you cant rely on a screen.

  • pt picas millimetres inches

    12 1 4.22 1/6

  • A4 (29.7cm 21.0cm)

  • Pixel (px)

  • To deal with screens, you must understand what are physical and reference pixels.

  • A physical pixel is a physical point on the display.

  • A reference pixel depends on the device, software and user settings.

  • A 16px font on a smartphone screen wont have as many millimetres as on a desktop screen.

  • Change, test, use media queries, test again.

  • em unit (em)

  • em is a relative unit used since the movable types.

  • It represents a types full body size.

  • 1 em

  • 16px 1 em

    margin-right: 1em;

    16px

  • Its always relative to its contexts font size.

  • .wrapper { font-size: 16px; }

    .parent { font-size: 1.5em; }

    .child { font-size: .5em; }

  • Root em unit (rem)

  • rem is like em but always relative to the root (html).

  • html { font-size: 16px; }

    .wrapper { font-size: 12px; }

    .parent { font-size: 1.5rem; }

    .child { font-size: 0.5rem; }

  • For most of browsers and cases, the default root font size is 16px.

  • html { font-size: 16px; }

    .wrapper { font-size: 12px; }

    .parent { font-size: 1.5rem; }

    .child { font-size: 0.5rem; }

  • html { font-size: 100%; }

    .wrapper { font-size: 12px; }

    .parent { font-size: 1.5rem; }

    .child { font-size: 0.5rem; }

  • Rhythm

  • The way you space your characters and text dictates how a person will read it.

  • Rhythm

    Line height

  • Line height is the distance between each line of types.

  • The quick fox jumps over the dog

    0 pixels

    Meta Serif 102px/102px

  • The quick fox jumps over the dog

    Meta Serif 102px/144px

    42 pixels

  • A low line height makes the text too difficult to read.

  • Helvetica 32px/32px

    The Guide says that the best drink in existence is the Pan Galactic Gargle Blaster. It says that the effect of a Pan Galactic Gargle Blaster is like having your brains smashed out by a slice of lemon wrapped round a large gold brick.

  • A large line height makes the paragraph loose cohesion.

  • Helvetica 32px/96px

    The Guide says that the best drink in existence is the Pan

    Galactic Gargle Blaster. It says that the effect of a Pan Galactic

    Gargle Blaster is like having your brains smashed out by a slice

    of lemon wrapped round a large gold brick.

  • Find a comfortable proportion through trial-and-error.

  • Helvetica 32px/48px

    The Guide says that the best drink in existence is the Pan Galactic Gargle Blaster. It says that the effect of a Pan Galactic Gargle Blaster is like having your brains smashed out by a slice of lemon wrapped round a large gold brick.

  • Each typeface might require a different line height setting.

  • Bembo 32px/48px

    The Guide says that the best drink in existence is the Pan Galactic

    Gargle Blaster. It says that the eect of a Pan Galactic Gargle Blaster is

    like having your brains smashed out by a slice of lemon wrapped

    round a large gold brick.

  • Caslon 32px/48px

    The Guide says that the best drink in existence is the Pan Galactic Gargle Blaster. It says that the effect of a Pan Galactic Gargle Blaster is like having your brains smashed out by a slice of lemon wrapped round a large gold brick.

  • Rhythm

    Baseline

  • Use a consistent vertical proportion by following a baseline.

  • 9 reasons why cats will conquer the world. The number 5 will surprise you!

    More importantly, a towel has immense psychological value.

    For some reason, if a strag (strag: nonhitchhiker) discovers that a hitchhiker has his towel with him, he will automatically assume that he is also in possession of a toothbrush, washcloth, soap, tin of biscuits, flask, compass, map, ball of string, gnat spray, wet-weather gear, space suit etc., etc.

    Furthermore, the strag will then happily lend the hitchhiker any of these or a dozen other items that the hitchhiker might have accidentally "lost.". What the strag will think is that any man that can hitch the length and breadth of the Galaxy, rough it, slum it, struggle against terrible odds, win through and still know where his towel is, is clearly a man to be reckoned with.

  • 9 reasons why cats will conquer the world. The number 5 will surprise you!

    More importantly, a towel has immense psychological value.

    For some reason, if a strag (strag: nonhitchhiker) discovers that a hitchhiker has his towel with him, he will automatically assume that he is also in possession of a toothbrush, washcloth, soap, tin of biscuits, flask, compass, map, ball of string, gnat spray, wet-weather gear, space suit etc., etc.

    Furthermore, the strag will then happily lend the hitchhiker any of these or a dozen other items that the hitchhiker might have accidentally "lost.". What the strag will think is that any man that can hitch the length and breadth of the Galaxy, rough it, slum it, struggle against terrible odds, win through and still know where his towel is, is clearly a man to be reckoned with.

  • Choose a line height for a baseline, and make all vertical values derive from it.

  • /* baseline = 24px */

    body { font-size: 16px; line-height: 24px; /* baseline */ }

    .article-title { font-size: 32px; line-height: 48px; /* 2 baseline */ }

    .article-excerpt { font-size: 18px; line-height: 24px; /* baseline */ }

    img { max-height: 312px; /* 13 baseline */ }

    p { margin-bottom: 12px; /* 0.5 baseline */ }

  • If you pre-process your CSS, you ensure a consistent typography using variables.

  • // _variables.scss

    $base-font-size: 16px; $baseline: 24px;

    // On your project:

    body {