Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Web Typography           ( Helvetica Bold, 64pt )thinking with types      ( Georgia Italic, 36pt )Francesco Fraioli       ...
Hi,I’m Francesco Fraioli,                                         Skills:I studied visual communication andmultimedia at t...
Web Design is 95% Typography by Oliver Reichenstein - informationarchitects.net“ Correct leading, word and letter spacing,...
Web Typography | Francesco Fraioli | @ Hcktrn 09 Aprile 2013
Web Typography | Francesco Fraioli | @ Hcktrn 09 Aprile 2013
Choosing a typeface is not typography by Oliver Reichenstein - informationarchitects.net“ Information design is not about ...
Web Safe Fontshttp://www.w3schools.comSerif                                                     Sans-Serif               M...
Georgia                                                   Palatino                     TimesGeorgia, serif                ...
Arial                                                     Arial                        ImpactArial, Helvetica,            ...
Courier New                                               Monaco"Courier New",                                            ...
1. Font SizeThe body of a web page has 16 px text by default.1 em is a distance equal to the type size. In 6 point type, a...
2. KernAdjust the spacing between (letters or characters) in a piece of text to be printedDon’t use letterspace without a ...
3. Line-Height“   Vertical space is metered in a different way [to horizontal space]. You must    choose not only the over...
4. BreakQuesto è                                                       Questosbagliato                                    ...
ReferencesA practical guide                                              Informationto web typography                     ...
Thanks                     ( Helvetica Bold, 64pt )and don’t use Comic Sans   ( Georgia Italic, 36pt )Francesco Fraioli   ...
Upcoming SlideShare
Loading in …5
×

Web typography

830 views

Published on

  • Be the first to comment

Web typography

  1. 1. Web Typography ( Helvetica Bold, 64pt )thinking with types ( Georgia Italic, 36pt )Francesco Fraioli ( Georgia Regular, 18pt )@ Hackatron 09/04/2013
  2. 2. Hi,I’m Francesco Fraioli, Skills:I studied visual communication andmultimedia at the Department of Art andDesign at the Iuav University of Venice.I graduated in April 2008 with a thesis projectwhich involved the design and implementationof a social network to enable musiccollaboration over the web. In June of thatyear, I presented my thesis in H-Farm: herebegins the collaboration that gave birth toThounds.Now I am a freelance interaction designerlinkedinwebsiteWeb Typography | Francesco Fraioli | @ Hcktrn 09 Aprile 2013
  3. 3. Web Design is 95% Typography by Oliver Reichenstein - informationarchitects.net“ Correct leading, word and letter spacing, active white space, and dosed use of color help readability. Use Text as user interface ” Web Typography | Francesco Fraioli | @ Hcktrn 09 Aprile 2013
  4. 4. Web Typography | Francesco Fraioli | @ Hcktrn 09 Aprile 2013
  5. 5. Web Typography | Francesco Fraioli | @ Hcktrn 09 Aprile 2013
  6. 6. Choosing a typeface is not typography by Oliver Reichenstein - informationarchitects.net“ Information design is not about the use of good typefaces, it is about the use of good typography. Which is a huge difference. Anyone can use typefaces, some can choose good typefaces, but only few master typography. ” Web Typography | Francesco Fraioli | @ Hcktrn 09 Aprile 2013
  7. 7. Web Safe Fontshttp://www.w3schools.comSerif Sans-Serif Monospacesuggested for paragraph suggested for headings suggested for paragraps and code exampleGeorgia Arial / Helvetica Courier NewPlatino Arial Black Lucida ConsoleTimes Impact Lucida Tahoma Trebuchet Verdana Comic SansWeb Typography | Francesco Fraioli | @ Hcktrn 09 Aprile 2013
  8. 8. Georgia Palatino TimesGeorgia, serif "Palatino Linotype", "Book "Times New Roman”, Times, serif Antiqua", Palatino, serifWeb Typography | Francesco Fraioli | @ Hcktrn 09 Aprile 2013
  9. 9. Arial Arial ImpactArial, Helvetica, "Arial Black", Gadget, Impact, Charcoal,sans-serif sans-serif sans-serifLucida Tahoma Trebuchet"Lucida Sans Unicode", Tahoma, Geneva, sans-serif "Trebuchet MS", Helvetica,"Lucida Grande", sans-serifsans-serifVerdana Comic"Lucida Sans Unicode", "Comic Sans MS", cursive,"Lucida Grande", sans-serifsans-serifWeb Typography | Francesco Fraioli | @ Hcktrn 09 Aprile 2013
  10. 10. Courier New Monaco"Courier New", "Lucida Console",Courier, Monaco,monospace monospaceWeb Typography | Francesco Fraioli | @ Hcktrn 09 Aprile 2013
  11. 11. 1. Font SizeThe body of a web page has 16 px text by default.1 em is a distance equal to the type size. In 6 point type, an em is 6 points.Thus a one em space is proportionately the same in any size. body { font-size:100%; } h1 { font-size:2.25em; /* 16x2.25=36 */ } h2 { font-size:1.5em; /* 16x1.5=24 */ } h3 { font-size:1.125em; /* 16x1.125=18 */ } h4 { font-size:0.875em; /* 16x0.875=14 */ } p { font-size:0.75em; /* 16x0.75=12 */ }Sizing text using the em unit is the next most appropriate approach.The em is a true typographic unit and was recommended by the w3c from theoutset of css. Ems are a relative unit and act as multipliers based on the textelement’s parent element.Web Typography | Francesco Fraioli | @ Hcktrn 09 Aprile 2013
  12. 12. 2. KernAdjust the spacing between (letters or characters) in a piece of text to be printedDon’t use letterspace without a reason!Letterspacing lower case on the Web is particularly risky as only some facesactually benefit from it .kern { letter-spacing: -0.1em; } ... <h1><span class=”kern”>T</span>rust</h1> http://kerningjs.com/ http://type.method.ac/Web Typography | Francesco Fraioli | @ Hcktrn 09 Aprile 2013
  13. 13. 3. Line-Height“ Vertical space is metered in a different way [to horizontal space]. You must choose not only the overall measure – the depth of the column or page – but also a basic rhythmical unit. This unit is the leading, which is the distance from one baseline to the next. ” Don’t using absolute units such as points or pixels to set up line-height. p { font-size:1em; line-height: 1.25 } Web Typography | Francesco Fraioli | @ Hcktrn 09 Aprile 2013
  14. 14. 4. BreakQuesto è Questosbagliato è correttoMost important rule in typography is never leave a single word suchas a conjunction as last word in a text line.In web design is quiet difficult to do it for a long paragraph but I suggest to do itfor headlines. <h1>Questo<br/>è corretto</h1>Web Typography | Francesco Fraioli | @ Hcktrn 09 Aprile 2013
  15. 15. ReferencesA practical guide Informationto web typography Architectshttp://webtypography.net/ http://informationarchitects.net/Robert Bringhurst’s book iA plans, designs, and buildsThe Elements of Typographic Style digital products.for web designCool links Bookshttp://typographica.org/ Thinking with typeshttp://www.markboulton.co.uk/ by Ellen Luptonhttp://ilovetypography.com/ The Elements of Typographic Stylehttp://www.typetester.org/ for web design by Robert BringhurstWeb Typography | Francesco Fraioli | @ Hcktrn 09 Aprile 2013
  16. 16. Thanks ( Helvetica Bold, 64pt )and don’t use Comic Sans ( Georgia Italic, 36pt )Francesco Fraioli ( Georgia Regular, 18pt )@ Hackatron 09/04/2013

×