O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
web tYp0 
for non-designers
Typography is 
the visual expression 
of language 
it’s a bunch of @%$#!+
Web design is 95% 
typography. 
— Oliver Reichenstein, 2006 
designers have no idea...
developers designers clients 
as seen by 
developers 
as seen by 
designers 
as seen by 
clients
Content first 
Mobile First 
Type First
type nerding
Anathomy 
just like you and me
BasicS 
as simple as it can be
SerifS times new roman & books
Sans-SerifS you mean normal fonts?
Script Swedding invitations
StupidSyyyeeeyyyyy!
Type setting 
just playing around
Leading 
space between the lines 
Salami short ribs fatback 
tenderloin, shankle corned beef 
ham porchetta biltong flank ...
Measure 
lenght of line of text 
Bacon ipsum dolor sit amet 
shoulder leberkas pig biltong 
bresaola andouille chuck. 
Rum...
Kerning 
space between letters 
21 
set optical or metric
Tracking 
space between "words" 
Salami short ribs fatback 
tenderloin, shankle corned 
beef ham porchetta biltong 
flank ...
Justification 
paragraph alignment 
Salami short ribs fatback 
tenderloin, shankle corned 
beef ham porchetta biltong 
fla...
Size 
matters 
H1 Heading 
H2 Heading 
H3 Heading 
H4 Heading 
css font-size 
ratio 1,618 phi 
104pt 
64pt 
40pt 
24pt 
16...
Why does this 
matter?
Why does this 
matter? 
It helps us tell stories
What kind 
of party? 
lemon party
____ Party
Cocktail Party
_____Party
LanParty
_______ Party
DiscoParty
_____Party
PartyPooper
How to 
choose? 
brace yourself!
yyyeeeyyyyy!
1. Don't get overwhelmed
1. Don't get overwhelmed 
2. Keep it simple
1. Don't get overwhelmed 
2. Keep it simple 
3. Rely on quality fonts
1. Don't get overwhelmed 
2. Keep it simple 
3. Rely on quality fonts 
4. Create your own palette
1. Don't get overwhelmed 
2. Keep it simple 
3. Rely on quality fonts 
4. Create your own palette 
5. Privilege workhorses...
1. Don't get overwhelmed 
2. Keep it simple 
3. Rely on quality fonts 
4. Create your own palette 
5. Privilege workhorses...
1. Don't get overwhelmed 
2. Keep it simple 
3. Rely on quality fonts 
4. Create your own palette 
5. Privilege workhorses...
Workhorses 
& Super-families 
work what?
1. It’s well-designed
1. It’s well-designed 
2. It has a wide range of 
weights & styles 
(bold, italic, semi, etc)
1. It’s well-designed 
2. It has a wide range of 
weights & styles 
(bold, italic, semi, etc) 
3. It works for both 
headi...
1. It’s well-designed 
2. It has a wide range of 
weights & styles 
(bold, italic, semi, etc) 
3. It works for both 
headi...
1. It’s well-designed 
2. It has a wide range of 
weights & styles 
(bold, italic, semi, etc) 
3. It works for both 
headi...
12 
styles
14 
styles
Case Study 
preaching on practice
FEATURES PRICING ABOUT HELP CENTER CLIENT AREA 
About us 
MEET THE ELEMENTS 
PressLabs provides elite hosting for online p...
The font 
now really, the font? 
Freight Sans Pro 
Light & Light Italic 
Book & Book Italic 
Medium & Medium Italic 
Semib...
title 
body 
link 
sub title 
note the hanging bullets 
quotes 
note the hanging quote marks
???? 
profit!!!!
7 capital sins 
1. Text sizes
7 capital sins 
1. Text sizes 
2. Lazy handling of titles and subtitles
7 capital sins 
1. Text sizes 
2. Lazy handling of titles and subtitles 
3. Text blocks that are not split up into enough ...
7 capital sins 
1. Text sizes 
2. Lazy handling of titles and subtitles 
3. Text blocks that are not split up into enough ...
7 capital sins 
1. Text sizes 
2. Lazy handling of titles and subtitles 
3. Text blocks that are not split up into enough ...
7 capital sins 
1. Text sizes 
2. Lazy handling of titles and subtitles 
3. Text blocks that are not split up into enough ...
7 capital sins 
1. Text sizes 
2. Lazy handling of titles and subtitles 
3. Text blocks that are not split up into enough ...
Adivces 
from Bruce Lee
“It’s not the daily increase, 
but daily decrease. Hack away 
at the unessential.”— Bruce Lee 
simplify
“Awareness is without choice, 
without demand, without 
anxiety; in that state of mind, 
there is perception.”— Bruce Lee ...
“If your cup is full, you cannot 
fill it. 
So first, empty your cup.” 
— Bruce Lee 
open your mind
“Empty your mind, be formless, 
shapeless, like water. If you put 
water into a cup, it becomes the 
cup. You put water in...
“Mistakes are always 
forgivable, if one has the 
courage to admit them” 
— Bruce Lee 
own your mistakes
GATA! 
finally!!!
Thank you 
facebook 
akward hekiw 
email 
mikey@presslabs.com
Web typography for non designers
Web typography for non designers
Web typography for non designers
Web typography for non designers
Próximos SlideShares
Carregando em…5
×

Web typography for non designers

20.015 visualizações

Publicada em

Crashh course about typography basics and fundamentals for web designers and developers.

Publicada em: Design

Web typography for non designers

  1. web tYp0 for non-designers
  2. Typography is the visual expression of language it’s a bunch of @%$#!+
  3. Web design is 95% typography. — Oliver Reichenstein, 2006 designers have no idea...
  4. developers designers clients as seen by developers as seen by designers as seen by clients
  5. Content first Mobile First Type First
  6. type nerding
  7. Anathomy just like you and me
  8. BasicS as simple as it can be
  9. SerifS times new roman & books
  10. Sans-SerifS you mean normal fonts?
  11. Script Swedding invitations
  12. StupidSyyyeeeyyyyy!
  13. Type setting just playing around
  14. Leading space between the lines Salami short ribs fatback tenderloin, shankle corned beef ham porchetta biltong flank ground round landjaeger spare ribs. Shank swine rump sausage, pig kielbasa tenderloin drumstick strip steak turkey boudin fatback filet mignon t-bone. Andouille frankfurter pastrami beef ribs tenderloin. Shankle beef ribs short ribs. Salami short ribs fatback tenderloin, shankle corned beef ham porchetta biltong flank ground round landjaeger spare ribs. Shank swine rump sausage, pig kielbasa tenderloin drumstick strip steak turkey boudin fatback filet mignon t-bone. Andouille frankfurter pastrami beef ribs tenderloin. Shankle beef ribs short css line-height set 120-150% of font size
  15. Measure lenght of line of text Bacon ipsum dolor sit amet shoulder leberkas pig biltong bresaola andouille chuck. Rump ham hock porchetta tongue. Shank porchetta jowl spare ribs beef salami, biltong meatloaf t-bone. Bacon ipsum dolor sit amet shoulder leberkas pig biltong bresaola andouille chuck. Rump ham hock porchetta tongue. Shank porchetta jowl spare ribs beef salami, biltong meatloaf t-bone. Tri-tip shank frankfurter tenderloin, ground round shankle chicken. Short ribs tri-tip spare ribs, porchetta pig capicola filet mignon. 21 21 Bacon ipsum dolor sit amet shoulder leberkas pig biltong bresaola andouille chuck. Rump ham hock porchetta tongue. Shank porchetta jowl spare ribs beef salami, biltong meatloaf t-bone. Tri-tip shank frankfurter tenderloin, ground round shankle chicken. Short ribs tri-tip spare ribs, porchetta pig capicola filet mignon. Porchetta tenderloin cow pork belly tongue shoulder ham boudin pig. Prosciutto flank pork chop, strip steak chuck tenderloin ground round. 87 css max-width set 45-75 characters
  16. Kerning space between letters 21 set optical or metric
  17. Tracking space between "words" Salami short ribs fatback tenderloin, shankle corned beef ham porchetta biltong flank ground round landjaeger spare ribs. Shank swine rump sausage, pig kielbasa tenderloin drumstick strip steak turkey boudin fatback filet mignon t-bone. Andouille frankfurter pastrami beef ribs tenderloin. Shankle beef ribs short ribs. Salami short ribs fatback tenderloin, shankle corned beef ham porchetta biltong flank ground round landjaeger spare ribs. Shank swine rump sausage, pig kielbasa tenderloin drumstick strip steak turkey boudin fatback filet mignon t-bone. Andouille frankfurter pastrami beef ribs tenderloin. Shankle beef ribs short ribs. css letter-spacing set positive or negative
  18. Justification paragraph alignment Salami short ribs fatback tenderloin, shankle corned beef ham porchetta biltong flank ground round landjaeger spare ribs. Shank swine rump sausage, pig kielbasa tenderloin drumstick strip steak turkey boudin fatback filet mignon t-bone. Andouille frankfurter pastrami beef ribs tenderloin. Shankle beef ribs short ribs. Salami short ribs fatback tenderloin, shankle corned beef ham porchetta biltong flank ground round landjaeger spare ribs. Shank swine rump sausage, pig kielbasa tenderloin drumstick strip steak turkey boudin fatback filet mignon t-bone. Andouille frankfurter pastrami beef ribs tenderloin. Shankle beef ribs short ribs. Salami short ribs fatback tenderloin, shankle corned beef ham porchetta biltong flank ground round landjaeger spare ribs. Shank swine rump sausage, pig kielbasa tenderloin drumstick strip steak turkey boudin fatback filet mignon t-bone. Andouille frankfurter pastrami beef ribs tenderloin. Shankle beef ribs short ribs. Salami short ribs fatback tenderloin, shankle corned beef ham porchetta biltong flank ground round landjaeger spare ribs. Shank swine rump sausage, pig kielbasa tenderloin drumstick strip steak turkey boudin fatback filet mignon t-bone. Andouille frankfurter pastrami beef ribs tenderloin. Shankle beef ribs short ribs. css text-align set left, right, center, justify
  19. Size matters H1 Heading H2 Heading H3 Heading H4 Heading css font-size ratio 1,618 phi 104pt 64pt 40pt 24pt 16pt H5 Heading H6 Heading 12pt
  20. Why does this matter?
  21. Why does this matter? It helps us tell stories
  22. What kind of party? lemon party
  23. ____ Party
  24. Cocktail Party
  25. _____Party
  26. LanParty
  27. _______ Party
  28. DiscoParty
  29. _____Party
  30. PartyPooper
  31. How to choose? brace yourself!
  32. yyyeeeyyyyy!
  33. 1. Don't get overwhelmed
  34. 1. Don't get overwhelmed 2. Keep it simple
  35. 1. Don't get overwhelmed 2. Keep it simple 3. Rely on quality fonts
  36. 1. Don't get overwhelmed 2. Keep it simple 3. Rely on quality fonts 4. Create your own palette
  37. 1. Don't get overwhelmed 2. Keep it simple 3. Rely on quality fonts 4. Create your own palette 5. Privilege workhorses and super-families
  38. 1. Don't get overwhelmed 2. Keep it simple 3. Rely on quality fonts 4. Create your own palette 5. Privilege workhorses and super-families 6. Set some text and read it. — Like what you see?
  39. 1. Don't get overwhelmed 2. Keep it simple 3. Rely on quality fonts 4. Create your own palette 5. Privilege workhorses and super-families 6. Set some text and read it. — Like what you see? 7. Ask for a second opinion
  40. Workhorses & Super-families work what?
  41. 1. It’s well-designed
  42. 1. It’s well-designed 2. It has a wide range of weights & styles (bold, italic, semi, etc)
  43. 1. It’s well-designed 2. It has a wide range of weights & styles (bold, italic, semi, etc) 3. It works for both headings and body copy
  44. 1. It’s well-designed 2. It has a wide range of weights & styles (bold, italic, semi, etc) 3. It works for both headings and body copy 4. It works well in a variety of settings & styles
  45. 1. It’s well-designed 2. It has a wide range of weights & styles (bold, italic, semi, etc) 3. It works for both headings and body copy 4. It works well in a variety of settings & styles 5. Everybody is talking about them
  46. 12 styles
  47. 14 styles
  48. Case Study preaching on practice
  49. FEATURES PRICING ABOUT HELP CENTER CLIENT AREA About us MEET THE ELEMENTS PressLabs provides elite hosting for online publishers using WordPress. We serve hundreds of millions of pageviews per month with amazing uptime and speed. 18 47 8 79 15 36 GOLD 197 Who we are and what we do At PressLabs we believe in having long-term business relationships by keeping our promises honest and realistic. We’ve got our first hosting customer back in 2009 – pidjin.net – and helped them survive many digg.com and reddit front-pages. Since spike one we loved the thrill to deal with real traffic and online publishers. This is how PressLabs was born and that’s why we innovate for publishers. We incorporated in 2011 and received an angel investment round of $100,000 to develop our vision into a hosting platform. We are now at version six of our hosting platform and we have a great team to develop it further. DO THE RIGHT THING Say cheese cheesy feet cauliflower cheese. Feta parmesan cheesy feet everyone loves cheesy feet paneer swiss the big cheese. Edam bavarian bergkase airedale cheeseburger port-salut cheesy feet stinking bishop brie. Jarlsberg. BUILT TO LAST Say cheese chalk and cheese when the cheese comes out everybody's happy. Hard cheese babybel swiss jarlsberg airedale everyone loves who moved my cheese stinking bishop. Mozzarella emmental who moved my cheese port-salut dolcelatte smelly cheese croque monsieur lancashire. Pepper jack babybel swiss queso. WHERE THE BEST GET BETTER Gouda paneer dolcelatte. Red leicester cheese and biscuits stilton macaroni cheese parmesan dolcelatte cream cheese fromage frais. St. agur blue cheese cheese triangles cream cheese goat cheddar pepper jack caerphilly cheese and biscuits. Cheeseburger pepper jack cheesecake monterey jack. CUSTOMER INSPIRED Everyone loves macaroni cheese babybel. Everyone loves emmental fromage bocconcini cheese strings cauliflower cheese camembert de normandie cheesy grin. Cheese and biscuits paneer pecorino smelly cheese cheesy grin fromage cheese and biscuits cheese strings. Who moved my cheese stinking bishop pecorino. OUR VALUES 1 88 10 7 2 HYDROGEN 1,0 Theodor Dragoi "The Wallet" Sailor, kitesurfer, freeskier, hap-py- traveller, free-living each moment with the idea t o build and experience amazing emotions together with the people ar ound, an ex-5-years-corporate guy when it comes to taking car e and opti - mizing the e veryday back-office. theo@presslabs.com ARGON 40 SILVER 108 OXYGEN 16 RADIUM 226 KRYPTON 84 NEON 20 PHOSPHORUS 31 NITROGEN 14 HELIUM 4 “Since moving to PressLabs, our traffic has grown 1500% in 11 months with amazing uptime, easy scaling and efficient, friendly support!” — ADNAN EBRAHIM www.carthrottle.com Try us for 30 days Apply for free trial HELP CENTER FOLLOW US General Questions Migration Oxygen Dashboard Carbon Cache © Copyright 2014 PressLabs. PressLabs is crafted with wisdom in Timisoara, home of the fastest broadband in the world. THE COMPANY About Blog Contacts Data Centers Architecture LEGAL Terms & Conditions Confidentiality Policy Personal Data Protection Returns & Cancelation Policy Abuse Policy     TWITTER FACEBOOK WORDPRESS GOOGLE+ FFEEAATTUURREESS PPRRIICCIINNGG AABBOOUUTT HHEELLPP CCEENNTTEERR CCLLIIEENNTT AARREEAA HELP TOPICS Sign up for customized support J Migration t General questions Carbon Cache CDN WP-admin Area File System HELP CENTER FOLLOW US General Questions Migration Oxygen Dashboard Carbon Cache FEATURES PRICING ABOUT HELP CENTER CLIENT AREA Help Center WHAT CAN WE HELP YOU WITH? t GENERAL QUESTIONS COMMON QUESTIONS How do I move my site to PressLabs? How do you count page views? How can I check if everything is ok? How can I update WordPress? What DNS service do you use? Can you host a WordPress multisite setup? How do I move my site to PressLabs? We handle the switch ourselves as a part of the optimisation that we do for every new site that moves to PressLabs. We triple-check everything to make sure nothing gets lost during the move. It’s good to know that the switch to our platform is done with absolutely no down-times. We perform the entire process by appointment, of course. How do you count page views? Our system is counting every load of a page from your site, no matter if you are logged-in or not into the WordPress dashboard. We use JavaScript for this, therefore bots, crawlers and static resources aren’t counted. You only pay for the people reading your content or working on your content. Our measurements are very close to Google Analytics and other similar services. Check the Stats menu from your Oxygen Dashboard. More information in the Payments section. How can I check if everything is ok? Say some readers reported issues on the site. You can check the health status of your site in Oxygen by selecting the site and then the Stats menu. Now click on the “Errors” tab and you’ll see your error rate on an hourly, daily and monthly basis. If the hourly percentage is higher than 0.5% then please get in touch with us to check what’s going on. Another option, in case you have made any recent changes to the site – such as plugin updates or code edits is to check the real-time error-logs go to Oxygen -> Logs menu. How can I update WordPress? Keeping your WordPress core updated is an operation that is 100% our responsibility. While security releases are deployed in a matter of hours at most after they are public, major WordPress updates are usually performed in about 7 days. This is to ensure that plugin and theme developers are properly testing their code on the new WordPress version and all major issues are corrected. Should you need a quick update after a major release, don’t hesitate to get in touch with us. What DNS service do you use? We’re using the high availability Route53 DNS from Amazon. Each site hosted with us is assigned a unique combination of 4 name servers that you can see in your Oxygen Dashboard by selecting the DNS menu of each site. Can you host a WordPress multisite setup? We have built our platform around WordPress single site installs, therefore we currently do not support WordPress multisite. Try us for 30 days Apply for free trial HELP CENTER FOLLOW US General Questions Migration Oxygen Dashboard Carbon Cache © Copyright 2014 PressLabs. PressLabs is crafted with wisdom in Timisoara, home of the fastest broadband in the world. THE COMPANY About Blog Contacts Data Centers Architecture LEGAL Terms & Conditions Confidentiality Policy Personal Data Protection Returns & Cancelation Policy Abuse Policy     TWITTER FACEBOOK WORDPRESS GOOGLE+ Help Center > General Questions Enter keyword Search Help Center WHAT CAN WE HELP YOU WITH? Have a question? Ask or enter a search term here. Search Backups Accessing Logs Oxygen Dashboard Payments COMMON QUESTIONS How do I move my site to PressLabs? How do you count page views? How can I check if everything is ok? How can I update WordPress? What DNS service do you use? Can you host a WordPress multisite setup? Try us for 30 days Apply for free trial © Copyright 2014 PressLabs. PressLabs is crafted with wisdom in Timisoara, home of the fastest broadband in the world. THE COMPANY About Blog Contacts Data Centers Architecture LEGAL Terms & Conditions Confidentiality Policy Personal Data Protection Returns & Cancelation Policy Abuse Policy     TWITTER FACEBOOK WORDPRESS GOOGLE+
  50. The font now really, the font? Freight Sans Pro Light & Light Italic Book & Book Italic Medium & Medium Italic Semibold & Semibold Italic Bold & Bold Italic Black & Black Italic bonus Freight Sans Pro Condensed Designed for warm formality in text and an authoritative, helpful tone in display, Freight Sans eschews mannerisms of form in favor of a studied balance of organic and geometric shapes. Because Freight Sans is a single design for a broad range of uses, it benefits from careful attention to tracking when it is set at very small or very large sizes.
  51. title body link sub title note the hanging bullets quotes note the hanging quote marks
  52. ???? profit!!!!
  53. 7 capital sins 1. Text sizes
  54. 7 capital sins 1. Text sizes 2. Lazy handling of titles and subtitles
  55. 7 capital sins 1. Text sizes 2. Lazy handling of titles and subtitles 3. Text blocks that are not split up into enough small, scannable, digestible parts
  56. 7 capital sins 1. Text sizes 2. Lazy handling of titles and subtitles 3. Text blocks that are not split up into enough small, scannable, digestible parts 4. Indiscernible links
  57. 7 capital sins 1. Text sizes 2. Lazy handling of titles and subtitles 3. Text blocks that are not split up into enough small, scannable, digestible parts 4. Indiscernible links 5. Text is not treated as an interface but as decoration
  58. 7 capital sins 1. Text sizes 2. Lazy handling of titles and subtitles 3. Text blocks that are not split up into enough small, scannable, digestible parts 4. Indiscernible links 5. Text is not treated as an interface but as decoration 6. Fancy navigations marking the center of attention (content is the center of attention, it deserves the most love from the designer
  59. 7 capital sins 1. Text sizes 2. Lazy handling of titles and subtitles 3. Text blocks that are not split up into enough small, scannable, digestible parts 4. Indiscernible links 5. Text is not treated as an interface but as decoration 6. Fancy navigations marking the center of attention (content is the center of attention, it deserves the most love from the designer 7. Lack of active white space
  60. Adivces from Bruce Lee
  61. “It’s not the daily increase, but daily decrease. Hack away at the unessential.”— Bruce Lee simplify
  62. “Awareness is without choice, without demand, without anxiety; in that state of mind, there is perception.”— Bruce Lee be aware of context and surroundings
  63. “If your cup is full, you cannot fill it. So first, empty your cup.” — Bruce Lee open your mind
  64. “Empty your mind, be formless, shapeless, like water. If you put water into a cup, it becomes the cup. You put water into a bottle and it becomes the bottle. You put it in a teapot it becomes the teapot. That water can flow, or it can crash. Be water my friend.” — Bruce Lee be water my friend
  65. “Mistakes are always forgivable, if one has the courage to admit them” — Bruce Lee own your mistakes
  66. GATA! finally!!!
  67. Thank you facebook akward hekiw email mikey@presslabs.com

×