Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Typography for the Web

Prateek Rungta
October 21, 2010

Typography for the Web

A very basic introduction to web typography and how it should be approached.

Presented internally during my stint at Tenmiles Corp. More…

Prateek Rungta

October 21, 2010
Tweet

More Decks by Prateek Rungta

Other Decks in Design

Transcript

  1. October 2010
    Prateek Rungta
    Typography
    For the Web

    View Slide


  2. 6 May 2008
    @zeldman
    Content precedes design. Design in the
    absence of content is not design, it’s
    decoration.

    View Slide


  3. 1985
    Apple Human Interface group motto
    A word is worth a thousand pictures.

    View Slide

  4. Content is King.
    4

    View Slide


  5. 14 June 2010
    @jasonfried
    Writing is design. Design your sentences
    with the right words like you design your
    interfaces with the right pixels.

    View Slide


  6. 13 July 2009
    @rakeshrach
    Online writing requires more attention to
    readers’ attention: the more you write, the
    less they read.

    View Slide

  7. Good copy is
    a pre-requisite.
    7

    View Slide


  8. September 2010
    — Oliver Reichenstein
    If you look at text as an interface,
    typography is its usability.

    View Slide

  9. ABOUT
    Profile
    Projects
    Contact
    KNOW HOW
    Articles
    Speaking
    Tweets
    PRODUCTS
    Web Trend Map
    WP-Template
    iPad App
    Web Design is 95% Typography
    October 19, 2006 by Oliver Reichenstein
    « Previous | Next »
    95% of the information on the web is written language. It is only logical to say
    that a web designer should get good training in the main discipline of shaping
    written information, in other words: Typography.
    Information design is typography
    Back in 1969, Emil Ruder, a famous Swiss typographer, wrote on behalf of his
    contemporary print materials what we could easily say about our
    contemporary websites:
    Today we are inundated with such an immense flood of printed matter
    that the value of the individual work has depreciated, for our harassed
    contemporaries simply cannot take everything that is printed today. It is
    the typographer’s task to divide up and organize and interpret this mass
    of printed matter in such a way that the reader will have a good chance of
    finding what is of interest to him.
    With some imagination (replace print with online) this sounds like the job
    description of an information designer. It is the information designer’s task “to
    divide up and organize and interpret this mass of printed matter in such a way
    that the reader will have a good chance of finding what is of interest to him”.
    informationarchitects.jp/en/the-web-is-all-about-typography-period

    View Slide

  10. Let’s set some type.
    10

    View Slide

  11. Reading Design
    I spent a few semesters teaching typography at an institute of art and design. My classes began
    on the first day with a short quiz asking students—at that stage three years into a
    communications design degree—to draw some basic symbols such as an ampersand and an
    apostrophe, and to mark suggestions for typographic improvements to some fairly shabby copy
    I’d written.
    Term after term I’d go over the tests and scratch my head wondering what they’d been up to the
    past three years. With due respect to my colleagues in the program—many of whom taught in
    addition to running corporate design shops or ad agencies—the education had plainly focused
    away from what I consider the primary goal of communication design: to make vital, engaging
    work intended above all to be read. To use design to communicate.
    To the students, text had been handled as a graphic element, to be shifted within grids,
    manipulated and filtered like a photo, to be squinted at and scrutinized upon critique but never
    apparently to be read.
    “But editors take care of text, we just have to design it” was the response when I’d insist that
    designers learn about editorial style and usage, which always made me laugh.
    I complain about the cult of designer ego because it takes away from the craft mentality that
    leads to better work. The cult of editorial ego is another matter altogether: surrounded as we are
    by stilted prose, overstatement and eye–glazing textual banality, text has no more implicit safety
    in the hands of editors.
    That said, there are talents and hacks on both sides of the barbed wire and landmines that lie
    between editors and designers, none of whom benefit from ignorance of what the other side is
    doing. If you design with editors, study what they know, and have the same reference books at
    hand.
    And above all, read what you are designing, and imagine reading it for the first time, like
    someone who just found it.
    Excerpt from Reading Design by Dean Allen. Published November 2001 in A List Apart, Issue
    128.
    Default Safari 5
    typesetting

    View Slide

  12. Reading Design
    I spent a few semesters teaching typography at an institute of art and design. My
    classes began on the first day with a short quiz asking students—at that stage
    three years into a communications design degree—to draw some basic symbols
    such as an ampersand and an apostrophe, and to mark suggestions for
    typographic improvements to some fairly shabby copy I’d written.
    Term after term I’d go over the tests and scratch my head wondering what they’d
    been up to the past three years. With due respect to my colleagues in the program
    —many of whom taught in addition to running corporate design shops or ad
    agencies—the education had plainly focused away from what I consider the
    primary goal of communication design: to make vital, engaging work intended
    above all to be read. To use design to communicate.
    To the students, text had been handled as a graphic element, to be shifted within
    grids, manipulated and filtered like a photo, to be squinted at and scrutinized
    upon critique but never apparently to be read.
    “But editors take care of text, we just have to design it” was the response when
    I’d insist that designers learn about editorial style and usage, which always made
    me laugh.
    I complain about the cult of designer ego because it takes away from the craft
    mentality that leads to better work. The cult of editorial ego is another matter
    altogether: surrounded as we are by stilted prose, overstatement and eye–glazing
    textual banality, text has no more implicit safety in the hands of editors.
    That said, there are talents and hacks on both sides of the barbed wire and
    landmines that lie between editors and designers, none of whom benefit from
    ignorance of what the other side is doing. If you design with editors, study what
    they know, and have the same reference books at hand.
    And above all, read what you are designing, and imagine reading it for the first
    time, like someone who just found it.
    Excerpt from Reading Design by Dean Allen. Published November 2001 in A
    List Apart, Issue 128.
    Measure (width)
    body {
    width: 30em;
    margin-left: 3em;
    margin-right: 3em;
    }

    View Slide

  13. Reading Design
    I spent a few semesters teaching typography at an institute of art and design.
    My classes began on the first day with a short quiz asking students—at that
    stage three years into a communications design degree—to draw some basic
    symbols such as an ampersand and an apostrophe, and to mark suggestions for
    typographic improvements to some fairly shabby copy I’d written.
    Term after term I’d go over the tests and scratch my head wondering what
    they’d been up to the past three years. With due respect to my colleagues in the
    program—many of whom taught in addition to running corporate design shops
    or ad agencies—the education had plainly focused away from what I consider
    the primary goal of communication design: to make vital, engaging work
    intended above all to be read. To use design to communicate.
    To the students, text had been handled as a graphic element, to be shifted
    within grids, manipulated and filtered like a photo, to be squinted at and
    scrutinized upon critique but never apparently to be read.
    “But editors take care of text, we just have to design it” was the response when
    I’d insist that designers learn about editorial style and usage, which always
    made me laugh.
    I complain about the cult of designer ego because it takes away from the craft
    mentality that leads to better work. The cult of editorial ego is another matter
    altogether: surrounded as we are by stilted prose, overstatement and eye–glazing
    textual banality, text has no more implicit safety in the hands of editors.
    That said, there are talents and hacks on both sides of the barbed wire and
    landmines that lie between editors and designers, none of whom benefit from
    ignorance of what the other side is doing. If you design with editors, study what
    they know, and have the same reference books at hand.
    And above all, read what you are designing, and imagine reading it for the
    first time, like someone who just found it.
    Excerpt from Reading Design by Dean Allen. Published November 2001 in A List Apart, Issue
    128.
    Type Scale
    /* Base 14px = 1em */
    body { font-size: 14px }
    /* 14 * 1.2858 = 18px */
    h1 { font-size: 1.2858em }
    /* 14 * 0.8572 = 12px */
    .footnote{font-size:0.8572em}

    View Slide

  14. Reading Design
    I spent a few semesters teaching typography at an institute of art and design.
    My classes began on the first day with a short quiz asking students—at that
    stage three years into a communications design degree—to draw some basic
    symbols such as an ampersand and an apostrophe, and to mark suggestions for
    typographic improvements to some fairly shabby copy I’d written.
    Term after term I’d go over the tests and scratch my head wondering what
    they’d been up to the past three years. With due respect to my colleagues in the
    program—many of whom taught in addition to running corporate design shops
    or ad agencies—the education had plainly focused away from what I consider
    the primary goal of communication design: to make vital, engaging work
    intended above all to be read. To use design to communicate.
    To the students, text had been handled as a graphic element, to be shifted
    within grids, manipulated and filtered like a photo, to be squinted at and
    scrutinized upon critique but never apparently to be read.
    “But editors take care of text, we just have to design it” was the response when
    I’d insist that designers learn about editorial style and usage, which always
    made me laugh.
    I complain about the cult of designer ego because it takes away from the craft
    mentality that leads to better work. The cult of editorial ego is another matter
    altogether: surrounded as we are by stilted prose, overstatement and eye–glazing
    textual banality, text has no more implicit safety in the hands of editors.
    That said, there are talents and hacks on both sides of the barbed wire and
    landmines that lie between editors and designers, none of whom benefit from
    ignorance of what the other side is doing. If you design with editors, study what
    they know, and have the same reference books at hand.
    And above all, read what you are designing, and imagine reading it for the
    first time, like someone who just found it.
    Excerpt from Reading Design by Dean Allen. Published November 2001 in A List Apart, Issue
    128.
    Leading
    /* 14 * 1.5 = 21px */
    body { line-height: 1.5em; }

    View Slide

  15. Reading Design
    I spent a few semesters teaching typography at an institute of art and design.
    My classes began on the first day with a short quiz asking students—at that
    stage three years into a communications design degree—to draw some basic
    symbols such as an ampersand and an apostrophe, and to mark suggestions for
    typographic improvements to some fairly shabby copy I’d written.
    Term after term I’d go over the tests and scratch my head wondering what
    they’d been up to the past three years. With due respect to my colleagues in the
    program—many of whom taught in addition to running corporate design shops
    or ad agencies—the education had plainly focused away from what I consider
    the primary goal of communication design: to make vital, engaging work
    intended above all to be read. To use design to communicate.
    To the students, text had been handled as a graphic element, to be shifted
    within grids, manipulated and filtered like a photo, to be squinted at and
    scrutinized upon critique but never apparently to be read.
    “But editors take care of text, we just have to design it” was the response when
    I’d insist that designers learn about editorial style and usage, which always
    made me laugh.
    I complain about the cult of designer ego because it takes away from the craft
    mentality that leads to better work. The cult of editorial ego is another matter
    altogether: surrounded as we are by stilted prose, overstatement and eye–glazing
    textual banality, text has no more implicit safety in the hands of editors.
    That said, there are talents and hacks on both sides of the barbed wire and
    landmines that lie between editors and designers, none of whom benefit from
    ignorance of what the other side is doing. If you design with editors, study what
    they know, and have the same reference books at hand.
    And above all, read what you are designing, and imagine reading it for the
    first time, like someone who just found it.
    Excerpt from Reading Design by Dean Allen. Published November 2001 in A List Apart, Issue
    128.
    Vertical Rhythm

    View Slide

  16. Reading Design
    I spent a few semesters teaching typography at an institute of art and design.
    My classes began on the first day with a short quiz asking students—at that
    stage three years into a communications design degree—to draw some basic
    symbols such as an ampersand and an apostrophe, and to mark suggestions for
    typographic improvements to some fairly shabby copy I’d written.
    Term after term I’d go over the tests and scratch my head wondering what
    they’d been up to the past three years. With due respect to my colleagues in the
    program—many of whom taught in addition to running corporate design shops
    or ad agencies—the education had plainly focused away from what I consider
    the primary goal of communication design: to make vital, engaging work
    intended above all to be read. To use design to communicate.
    To the students, text had been handled as a graphic element, to be shifted
    within grids, manipulated and filtered like a photo, to be squinted at and
    scrutinized upon critique but never apparently to be read.
    “But editors take care of text, we just have to design it” was the response when
    I’d insist that designers learn about editorial style and usage, which always
    made me laugh.
    I complain about the cult of designer ego because it takes away from the craft
    mentality that leads to better work. The cult of editorial ego is another matter
    altogether: surrounded as we are by stilted prose, overstatement and eye–glazing
    textual banality, text has no more implicit safety in the hands of editors.
    That said, there are talents and hacks on both sides of the barbed wire and
    landmines that lie between editors and designers, none of whom benefit from
    ignorance of what the other side is doing. If you design with editors, study what
    they know, and have the same reference books at hand.
    And above all, read what you are designing, and imagine reading it for the
    first time, like someone who just found it.
    Vertical Rhythm
    /* 18 * 1.1677 = 21px */
    /* 18 * 0.6678 = 12px */
    /* 18 * 0.5 = 9px */
    h1 {
    line-height: 1.1677em;
    margin: 0.6678em 0 0.5em;
    }
    /* 14 * 0.5 = 21px */
    p {
    margin: 0 0 1.5em;
    }

    View Slide

  17. Reading Design
    I spent a few semesters teaching typography at an institute of art and design.
    My classes began on the first day with a short quiz asking students—at that
    stage three years into a communications design degree—to draw some basic
    symbols such as an ampersand and an apostrophe, and to mark suggestions for
    typographic improvements to some fairly shabby copy I’d written.
    Term after term I’d go over the tests and scratch my head wondering what
    they’d been up to the past three years. With due respect to my colleagues in the
    program—many of whom taught in addition to running corporate design shops
    or ad agencies—the education had plainly focused away from what I consider
    the primary goal of communication design: to make vital, engaging work
    intended above all to be read. To use design to communicate.
    To the students, text had been handled as a graphic element, to be shifted
    within grids, manipulated and filtered like a photo, to be squinted at and
    scrutinized upon critique but never apparently to be read.
    “But editors take care of text, we just have to design it” was the response when
    I’d insist that designers learn about editorial style and usage, which always
    made me laugh.
    I complain about the cult of designer ego because it takes away from the craft
    mentality that leads to better work. The cult of editorial ego is another matter
    altogether: surrounded as we are by stilted prose, overstatement and eye–glazing
    textual banality, text has no more implicit safety in the hands of editors.
    That said, there are talents and hacks on both sides of the barbed wire and
    landmines that lie between editors and designers, none of whom benefit from
    ignorance of what the other side is doing. If you design with editors, study what
    they know, and have the same reference books at hand.
    And above all, read what you are designing, and imagine reading it for the
    first time, like someone who just found it.
    Vertical Rhythm
    /* 18 * 1.1677 = 21px */
    /* 18 * 0.6678 = 12px */
    /* 18 * 0.5 = 9px */
    h1 {
    line-height: 1.1677em;
    margin: 0.6678em 0 0.5em;
    }
    /* 14 * 0.5 = 21px */
    p {
    margin: 0 0 1.5em;
    }

    View Slide

  18. It's the little things.
    18

    View Slide

  19. It’s the little things.
    19

    View Slide

  20. "Closely held beliefs are
    not easily released".
    20

    View Slide

  21. “Closely held beliefs are
    not easily released”.
    21

    View Slide

  22. Closely held beliefs are
    not easily released”.
    22

    View Slide


  23. 2007
    — Massimo Vignelli
    We’re not talking about style, we’re talking
    about quality. Style is tangible, quality is
    intangible.

    View Slide


  24. 2007
    — Massimo Vignelli
    We’re not talking about style, we’re talking
    about quality. Style is tangible, quality
    is intangible.

    View Slide

  25. If you are currently creating
    websites with any version of
    HTML, you’re already
    using HTML5.
    25

    View Slide

  26. If you are currently creating
    websites with any version of
    , you’re already
    using .
    26

    View Slide

  27. Typography ≠ Typefaces
    27

    View Slide

  28. SIGN UP FOR NEWS ABOUT FUTURE SEED CONFERENCES
    * A ONE-DAY CONFERENCE on DESIGN, ENTREPRENEURSHIP and INSPIRATION *
    On Friday, June the 6th 2008 in Chicago
    Learn about taking control of your own work by seeking out methods to
    INSPIRE NEW THINKING AND ADOPT UNCONVENTIONAL IDEAS ABOUT COLLABORATION AND BUSINESS VIA
    SIX PRESENTATIONS AND DISCUSSIONS LED BY 37SIGNALS, SEGURA INC, COUDAL PARTNERS AND FRIENDS
    The 3rd SEED CONFERENCE
    WILL FILL YOUR HEAD WITH KNOWLEDGE YOU CAN USE. THIS ISN’T ABOUT THEORY, IT’S ABOUT PRACTICE
    You should attend if you’re a designer (print, web or video) or a business-minded soul who is looking to take creative
    ideas and turn them into something SATISFYING & BANKABLE. Anyone creative with an open mind will take away
    something useful. This is a day of active learning, not just idle listening. Only 270 seats available. REGISTER NOW
    THE VENUE WILL INFORM THE DISCUSSION TOO, SEED WILL BE HELD IN THE “CATHEDRAL OF MODERNISM”
    CROWN HALL by Mies van der Rohe
    Painstakingly renovated in 2005, Crown Hall stands as one of the most important buildings of the modern age and it
    was also held in the highest regard by Mies himself who said it best represented his “architecture of almost nothing.”
    * THE DAY’S SCHEDULE and INVITED GUESTS *
    CARLOS SEGURA is the founder of
    Segura, Inc. an internationally
    recognized visual communications
    company and the creator of T.26 the
    web's original digital type foundry as
    well as the 5" retail brand and the
    JASON FRIED is the founder of
    37signals, influential creators of web-
    based communication and collaboration
    tools Basecamp, Highrise, Backpack &
    Campfire and authors of the book
    Getting Real and the popular weblog
    JAKE NICKELL is the Founder and
    JEFFREY KALMIKOFF is the Creative
    Director of skinnyCorp, the force
    behind the unstoppable community-
    based tee shirt design concept
    Threadless and a steady stream of other
    http://seedconference.com/seed.php

    View Slide

  29. Josef Müller–Brockmann, 1959

    View Slide

  30. Simplicity
    Michael Bierut
    on Helvetica
    30

    View Slide

  31. Helvetica (2008)

    View Slide

  32. THE BIG PICTURE
    Dieter Rams on
    Good Design
    32

    View Slide

  33. Objectified (2009)

    View Slide

  34. prateekrungta.com
    Prateek Rungta
    Thank you.

    View Slide