web typography
DESCRIPTION
TRANSCRIPT
Web Typographythinking with types
( Helvetica Bold, 64pt )
( Georgia Italic, 36pt )
Francesco Fraioli@ Hackatron 09/04/2013 ( Georgia Regular, 18pt )
Web Typography | Francesco Fraioli | @ Hcktrn 09 Aprile 2013
Hi,I’m Francesco Fraioli,
I studied visual communication and multimedia at the Department of Art and Design at the Iuav University of Venice.
I graduated in April 2008 with a thesis project which involved the design and implementation of a social network to enable music collaboration over the web. In June of that year, I presented my thesis in H-Farm: here begins the collaboration that gave birth to Thounds.
Now I am a freelance interaction designer
linkedinwebsite
Skills:
Web Typography | Francesco Fraioli | @ Hcktrn 09 Aprile 2013
Web Design is 95% Typography
Correct leading, word and letter spacing, active white space, and dosed use of color help readability.Use Text as user interface
by Oliver Reichenstein - informationarchitects.net
“
”
Web Typography | Francesco Fraioli | @ Hcktrn 09 Aprile 2013
Web Typography | Francesco Fraioli | @ Hcktrn 09 Aprile 2013
Web Typography | Francesco Fraioli | @ Hcktrn 09 Aprile 2013
Choosing a typeface is not typographyby 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
Web Safe Fontshttp://www.w3schools.com
Serifsuggested for paragraph
Sans-Serifsuggested for headings
Monospacesuggested for paragraps and code example
GeorgiaPlatinoTimes
Arial / HelveticaArial BlackImpactLucidaTahomaTrebuchetVerdanaComic Sans
Courier NewLucida Console
Web Typography | Francesco Fraioli | @ Hcktrn 09 Aprile 2013
GeorgiaGeorgia, serif
Palatino"Palatino Linotype", "Book Antiqua", Palatino, serif
Times"Times New Roman”, Times, serif
Web Typography | Francesco Fraioli | @ Hcktrn 09 Aprile 2013
Lucida"Lucida Sans Unicode","Lucida Grande",sans-serif
TahomaTahoma, Geneva, sans-serif
Trebuchet"Trebuchet MS", Helvetica, sans-serif
ArialArial, Helvetica, sans-serif
Comic"Comic Sans MS", cursive, sans-serif
ImpactImpact, Charcoal, sans-serif
Verdana"Lucida Sans Unicode","Lucida Grande",sans-serif
Arial"Arial Black", Gadget, sans-serif
Web Typography | Francesco Fraioli | @ Hcktrn 09 Aprile 2013
Courier New
"Courier New",Courier, monospace
Monaco"Lucida Console",Monaco, monospace
Web Typography | Francesco Fraioli | @ Hcktrn 09 Aprile 2013
1. Font 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 the outset of css. Ems are a relative unit and act as multipliers based on the text element’s parent element.
The 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.
Web Typography | Francesco Fraioli | @ Hcktrn 09 Aprile 2013
2. KernAdjust the spacing between (letters or characters) in a piece of text to be printed
Don’t use letterspace without a reason!Letterspacing lower case on the Web is particularly risky as only some faces actually benefit from it
http://kerningjs.com/http://type.method.ac/
.kern { letter-spacing: -0.1em; }
...<h1><span class=”kern”>T</span>rust</h1>
Web Typography | Francesco Fraioli | @ Hcktrn 09 Aprile 2013
3. Line-HeightVertical 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
4. Break
Questo è sbagliato
Questo è corretto
Most important rule in typography is never leave a single word such as 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 it for headlines.
<h1>Questo<br/>è corretto</h1>
Web Typography | Francesco Fraioli | @ Hcktrn 09 Aprile 2013
References
A practical guide to web typographyhttp://webtypography.net/Robert Bringhurst’s book The Elements of Typographic Stylefor web design
InformationArchitectshttp://informationarchitects.net/iA plans, designs, and builds digital products.
Cool linkshttp://typographica.org/http://www.markboulton.co.uk/http://ilovetypography.com/
http://www.typetester.org/
BooksThinking with types by Ellen Lupton
The Elements of Typographic Stylefor web designby Robert Bringhurst
Thanksand don’t use Comic Sans
( Helvetica Bold, 64pt )
( Georgia Italic, 36pt )
Francesco Fraioli@ Hackatron 09/04/2013 ( Georgia Regular, 18pt )