Typography on the Web

  • 1,977 views
Uploaded on

While typography is not specifically related to Drupal, it is a topic that is often treated stepmotherly by webdesigners. This session tries to give a basic introduction to typography in general and …

While typography is not specifically related to Drupal, it is a topic that is often treated stepmotherly by webdesigners. This session tries to give a basic introduction to typography in general and point out why it is important to respect some rules. It also shows you how you can achieve good typography and clear layout on web pages leveraging all kinds of technologies supported by modern browsers.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,977
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
115
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

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 ‣ quot;Lorem Ipsumquot;, '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” quot;wordquot; → “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. ?