(Web ) Typography

40 %
60 %
Information about (Web ) Typography

Published on November 5, 2007

Author: gerritvanaaken

Source: slideshare.net

Description

Presentation on Barcamp Berlin 2 on November 4th, 2007 by Gerrit van Aaken

Introducing Typography (not only) for the Web. Gerrit van Aaken, praegnanz.de ! Barcamp Berlin, November 3rd/4th 2007 ! Some rights reserved: ! CreativeCommons BY-NC

Basics WTF is Typography?

Typography is like onions … Layer 1: Font design ! Layer 2: Micro Typography ! Layer 3: Macro Typography (Lay-Out) !

Credo Typography is about readability, not creativity.

Readability vs. Creativity Display fonts are easy and fun, almost everone ! can do it. Good readable body copy is the interesting thing! ! What can I do to improve the readability of my ! web site?

Back to readability An old/new approach to web readability

Improving Readability I Higher resolutions require bigger type ! at least 12px is required for sans-serif fonts ! at least 14px is required for serif fonts ! Line length of 40–80 characters ! at least 1.4em line-height for body copy! ! max. 1.3em line-height for headlines! !

Improving Readability II (Dos and Don’ts) Use high contrast! ! Avoid #000000 on #ffffff ! ! Avoid light text on dark backgrund! ! Add lots of whitespace! ! Add even more whitespace! ! Use only left-aligned paragraphs (please!) !

Foont smoothing Sub pixel rendering, anyone?

Font choice and Readability Serifs or No Serifs?

Classic web fonts I’m Times New Roman I’m Arial I’m Verdana I’m Georgia I’m Lucida I’m Trebuchet MS

Font choice for the web Wait, There’s more!

Vista font: Segoe UI Rip-Off der weltbekannten Frutiger ! (bzw. deren NEXT-Variante). Geniale Schrift, wird hoffentlich zum zweiten Standard in der Korrespondenz. Rip-Off der weltbekannten Frutiger. ! Geniale Schrift, wird hoffentlich zum zweiten Standard in der Korrespondenz.

Vista font: Corbel !quot;#$%&quot;'()&quot;$%&quot;'*%+',%+'-.%)$/'#0.' ! 1)0(+#,2)$'(&quot;3#+.4'5%.,'(%&quot;'602' !quot;#quot;!$%&'!(')('%#',+.' 7+(&quot;891(:;..+(<;#,+#6'+#1*%&:+$#4 ! !quot;#$%&quot;'()&quot;$%&quot;'*%+',%+'-.%)$/'#0.' 1)0(+#,2)$'(&quot;3#+.4'5%.,'(%&quot;'602' !quot;#quot;!$%&'!(')('%#',+.' 7+(&quot;891(:;..+(<;#,+#6' +#1*%&:+$#4

Vista font: Calibri !quot;#$%&'()&*+,-.&)quot;((/$%&0+$%1#$%2& ! 3#quot;&-quot;(0$%1#$%quot;,quot;&4,#+1.&'(#5quot;,0quot;11& quot;#(0quot;678+,&'()&!quot;#$%!&'(quot;$& '-9quot;0quot;6762 ! !quot;#$%&'()&*+,-.&)quot;((/$%&0+$%1#$%2& 3#quot;&-quot;(0$%1#$%quot;,quot;&4,#+1.&'(#5quot;,0quot;11& quot;#(0quot;678+,&'()&!quot;#$%!&'(quot;$& '-9quot;0quot;6762

Vista font: Candara !quot;#$%&#'()*quot;+,-.&/0(quot;1+,#$ ! 2#&quot;%#(*.1#$%3&$!quot;#$%&'()*quot;+ ,-##quot;$!-&.quot;&/0$4quot;&)$*#quot;)#&$)quot;#$ 5.6quot;+$20(1$(quot;+,7$08*91#(:$4;&#$ 08#&$<3(1+,#(1<#&7: ! !quot;#$%&#'()*quot;+,-.&/0(quot;1+,#$ 2#&quot;%#(*.1#$%3&$!quot;#$%&'()*quot;+ ,-##quot;$!-&.quot;&/0+

Vista font: Constantia !quot;#$%&'()'*&%+,%-.%'!%&+,%-/quot;#&+,01' ! 23quot;4+*%&')-.'%+-'$%-+*'#+/05&+/quot;#%&' 36/'.+%'!quot;#$%$&'()%*%+,!-./'!0' 0&50(.%7'%8(%66%-0'6%/93&1':+&.'/+quot;#' 39%&'-+quot;#0'/5'.)&quot;#/%0(%-1 ! !quot;#$%&'()'*&%+,%-.%'!%&+,%-/quot;#&+,01' 23quot;4+*%&')-.'%+-'$%-+*' #+/05&+/quot;#%&'36/'.+%'!quot;#$%$&'()%*%+ ,!-./'!0

Vista font: Cambria !quot;#$%#&'()#quot;*quot;%#+#$,quot;)#&$)quot;-$*#+$ ! .#quot;'(-$(quot;&-/+quot;&'(#0$1/-#2$3#.'(#$ 4#*/'($!quot;#$%&'&(#'$)&#*'$50*$0quot;'(-$ 65-(#0-quot;&'(7 !quot;#$%#&'()#quot;*quot;%#+#$,quot;)#&$)quot;-$*#+$ ! .#quot;'(-$(quot;&-/+quot;&'(#0$1/-#2$3#.'(#$ 4#*/'($!quot;#$%&'&(#'$)&#*'$50*$0quot;'(-$ 65-(#0-quot;&'(7$$

Vista font: Consolas !quot;#$%%$&'()*+$$&%$),-+$( ! ./&/)0-*$12*3+45'(56+(-%%$( 7/8$+9(!quot;#$%&'%quot;()*quot;#+quot;,-()/:-+( -;5(8$<(.-*9 !quot;#$%%$&'()*+$$&%$),-+$( ! ./&/)0-*$12*3+45'(56+(-%%$( 7/8$+9(!quot;#$%&'%quot;()*quot;#+quot;,-()/:-+( -;5(8$<(.-*9

Font Technology on the web Font replacement had its chance.

Font replacement techniques

Font Embedding (the 2007 approach) Outlook to @font-face

@font-face Has been around since 1998 (yes, really!) ! Now Webkit does it with TrueType fonts. ! Great font piracy possibilities. ! Possible solution from Ralf Hermann. ! Expect this feature to be used and misused. !

That’s about it. Thank you very much :-)

Add a comment

Related pages

The Elements of Typographic Style Applied to the Web – a ...

A practical guide to web typography. Read the Introduction; Table of Contents; Latest: 3.2.1 Use titling figures with full caps, and text figures in all ...
Read more

Web typography - Wikipedia

Web typography refers to the use of fonts on the World Wide Web. When HTML was first created, font faces and styles were controlled exclusively by the ...
Read more

Table of Contents - web typography

Note. This is a work in progress. The entire site is now open source, so please feel free to contribute by forking it on GitHub.
Read more

Webtypografie – Wikipedia

Webtypografie bezeichnet die Typografie für digitale Texte und den Gebrauch von Schriftarten im Web. ... On Web Typography Jason Santa Maria, A List Apart
Read more

Best Examples of Typography in Web Design | Inspiration

Typography in Web Design Typography plays an important role in setting the tone, theme, and message of a website
Read more

A-Z of Web Typography - Envato Tuts+ Web Design Tutorials

"Web Design is 95% Typography", as Oliver Reichenstein famously said back in 2006. He was referring to the fact that most information found on the web is ...
Read more

„Professional Web Typography“: Perfekte Webtypografie | DR ...

Schriften für Bedienoberflächen. Ein besonderes Augenmerk wirft „Professional Web Typography“ auf die Gestaltung von grafischen Bedienoberflächen.
Read more

A Book Apart, On Web Typography

Typography is your design’s voice and the most powerful tool you have to communicate with your readers. Learn how to wield type with care and wit: how to ...
Read more

A Journey Through Beautiful Typography In Web Design ...

In this article, Shavaughn Haack analyzes how typography can create experiences for users and establish the personality of the website, looking at around ...
Read more

Web typography | Guide | Motive

Web typography. This guide provides specimen screens of typefaces commonly used in web design, showing each typeface at a range of text sizes and weights.
Read more