Typography on the Web

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    3 Favorites

    Typography on the Web - Presentation Transcript

    1. Typography on web the Konstantin Käfer
    2. Contents 1. Introduction to typography 2. Typography on the web 3. Drupal solutions
    3. 1. Introduction Typography ‣ Art of type design ‣ Nearly as old as written text ‣ Influences the legibility and the atmosphere of the text ‣ Very early font still used today: Garamond (dated to 1530/31)
    4. 1. Introduction Anatomy
    5. 1. Introduction Various x-heights Hamburgefonstiv Gill Sans Hamburgefonstiv Gentium Hamburgefonstiv Vectora Hamburgefonstiv Palatino Hamburgefonstiv Helvetica Hamburgefonstiv Didot
    6. 1. Introduction Serifs Hamburgefonstiv Hamburgefonstiv ‣ Serifs increase legibility ‣ Not for small font sizes/low resolutions
    7. 1. Introduction Small font sizes Mac OS X Verdana Palatino Windows XP (ClearType) Windows XP (no antialiasing)
    8. 1. Introduction Font styles ‣ Regular/Roman/Book Hamburgefonstiv ‣ Bold Hamburgefonstiv Hamburgefonstiv ‣ Italic ‣ Oblique/Slanted ‣ Small Caps Hamburgefonstiv ‣ Faked bold ‣ Faked small caps HAMBURGEFONSTIV
    9. 1. Introduction Font weights Ultra light Hamburgefonstiv Thin Hamburgefonstiv Light Hamburgefonstiv Roman Hamburgefonstiv Medium Hamburgefonstiv Bold Hamburgefonstiv Heavy Hamburgefonstiv Black Hamburgefonstiv
    10. 1. Introduction Font widths ‣ Condensed Hamburgefonstiv ‣ Regular Hamburgefonstiv ‣ Extended Hamburgefonstiv
    11. 1. Introduction Ligatures ‣ Merge together overlapping characters ‣ Origin: lead typesetting Muffin Muffin ff fi fl ffi ffl ff ffiffl
    12. 1. Introduction Kerning ‣ Whitespace within letters ‣ Proper kerning improves legibility War War Text Text
    13. 2. …on the web Tracking ‣ Tracking = Letter spacing Hamburgefonstiv ‣ Tight and wide letter spacing Hamburgefonstiv decreases legibility Hamburgefonstiv Hamburgefonstiv ‣ Tight spacing is cool Hamburgefonstiv ‣ Wide spacing can put Hamburgefonstiv emphasis on a word: Hamburgefonstiv Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do e i u s m o d tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    14. 2. …on the web Multiple lines ‣ Increasing line height increases legibility ‣ Space between two lines: leading Lorem ipsum dolor sit amet, consectetur adipisicing Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure quis nostrud exercitation ullamco laboris nisi ut dolor in reprehenderit in voluptate velit esse cillum aliquip ex ea commodo consequat. Duis aute irure dolore eu fugiat nulla pariatur. Excepteur sint dolor in reprehenderit in voluptate velit esse cillum occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ‣ Default leading in browsers is too small ‣ Increase to at least 1.3em
    15. 2. …on the web Widows and orphans Widow Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore. sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consectetur adipisicing elit, magna aliqua. Ut enim ad minim veniam, quis nostrud sed do eiusmod tempor incididunt ut labore et dolore exercitation ullamco laboris nisi ut aliquip ex ea magna aliqua. Ut enim ad minim veniam, quis nostrud commodo consequat. Duis aute irure dolor in exercitation ullamco laboris nisi ut aliquip ex ea reprehenderit in voluptate velit esse cillum dolore eu commodo consequat. Duis aute irure dolor in fugiat nulla pariatur. Excepteur sint occaecat cupidatat reprehenderit in voluptate velit esse cillum dolore eu non proident, sunt in culpa qui officia deserunt mollit fugiat nulla pariatur. Excepteur sint occaecat cupidatat anim id est laborum. non proident, sunt in culpa qui officia deserunt mollit Lorem ipsum dolor sit amet, consectetur adipisicing elit, anim id est laborum. Orphan
    16. 2. …on the web Alignment ‣ Left, center, right, justify Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. ‣ Don’t justify on the web ‣ Especially not narrow columns ‣ Reason: no proper (cross-browser) hypenation ‣ html[lang=en] { hyphenate-dictionary:url(hyph_en.dic) }
    17. 2. …on the web Hyphenation ‣ ­ ‣ Conditional hyphen ‣ Supported by Safari, Opera, Internet Explorer ‣ NOT supported by Mozilla
    18. 2. …on the web Typefaces for the web ‣ sans-serif ‣ Arial/Helvetica ‣ Verdana (or Bitstream Vera Sans) ‣ Lucida (Grande/Sans/Sans Unicode) ‣ Trebuchet MS, Tahoma ‣ serif ‣ Times New Roman / Times ‣ Georgia, Garamond, Palatino (Linotype) ‣ http://media.24ways.org/2007/17/fontmatrix.html
    19. 2. …on the web Curly quotes ‣ \"Lorem Ipsum\", 'Dolor sit amet' ‣ “This is a quote”, ‘Dolor sit amet’ ‣ «Consectetur», ‹Adipiscing› ‣ »Elit«, ›Morbis‹
    20. 2. …on the web Dashes ‣ - (dash/hyphen) ‣ – (en-dash) ‣ — (em-dash) ‣ − (minus)
    21. 2. …on the web Other characters ‣ Apostrophe: Steven’s magic. ‣ Steven´s magic Steven's magic ‣ Times sign: 40×80, not 40x80 ‣ Ellipsis: Word…, not Word...
    22. 2. …on the web Text replacement ‣ sIFR ‣ Copyright issues ‣ Flash: not native text ‣ Slow: takes time to load and initialize ‣ Various image replacement methods ‣ Not selectable ‣ Not really scalable ‣ No reflowing of text
    23. 2. …on the web Text replacement ‣ Use Canvas/VML to render text ‣ Cufón: http://cufon.shoqolate.com ‣ Typeface.js: http://typeface.neocracy.org ‣ Safari 3, Firefox 3.1: @font-face ‣ @font-face { font-family: Aller; src: url('Aller-Roman.otf'); } font-family: Aller, sans-serif; ‣ Beware of licensing issues!
    24. 3. Drupal solutions SmartyPants ‣ Converts ASCII punctuation into ‘real’ punctuation ‣ ``word'' → “word” \"word\" → “word” ‣ -- → – --- → — ... → … ‣ http://daringfireball.net/projects/smartypants/ ‣ http://drupal.org/project/marksmarty
    25. 3. Drupal solutions Typogriphy ‣ Collection of multiple scripts ‣ Roman/Hanging punctuation ‣ Graphical ampersands ‣ SmartyPants ‣ Widon’t ‣ Wraps quotes and all-caps words into spans ‣ http://drupal.org/project/typogrify
    26. ?

    + Konstantin KäferKonstantin Käfer, 9 months ago

    custom

    982 views, 3 favs, 0 embeds more stats

    While typography is not specifically related to Dru more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 982
      • 982 on SlideShare
      • 0 from embeds
    • Comments 0
    • Favorites 3
    • Downloads 57
    Most viewed embeds

    more

    All embeds

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories