SlideShare a Scribd company logo
1 of 71
Download to read offline
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
Web typography for non designers
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 
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
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
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 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
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
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
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 
and super-families
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?
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
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 
headings and body copy
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
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
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 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+
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.
Web typography for non designers
title 
body 
link 
sub title 
note the hanging bullets 
quotes 
note the hanging quote marks
???? 
profit!!!!
Web typography for non designers
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 
small, scannable, digestible parts
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
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
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 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
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 
be aware of context 
and surroundings
“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 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
“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

More Related Content

Similar to Web typography for non designers

Fresh meat shop astoria – muncan food corp products catalog
Fresh meat shop astoria – muncan food corp products catalogFresh meat shop astoria – muncan food corp products catalog
Fresh meat shop astoria – muncan food corp products catalogmeatshopny
 
13_Stockyards_catalog
13_Stockyards_catalog13_Stockyards_catalog
13_Stockyards_catalogkaren pedone
 
The Wonderful World of (web) Typography
The Wonderful World of (web) TypographyThe Wonderful World of (web) Typography
The Wonderful World of (web) TypographyGarret Voorhees
 
Intro to AdWords
Intro to AdWordsIntro to AdWords
Intro to AdWordsjsuleiman
 
Tasty Food Powerpoint Template
Tasty Food Powerpoint TemplateTasty Food Powerpoint Template
Tasty Food Powerpoint TemplateTrust Design
 
Carniques juia powerpoint
Carniques juia powerpointCarniques juia powerpoint
Carniques juia powerpointStevie Allen
 
Caprice Taylor's Resume & Creative Samples
Caprice Taylor's Resume & Creative SamplesCaprice Taylor's Resume & Creative Samples
Caprice Taylor's Resume & Creative SamplesCaprice Taylor
 
Pizza hut 1st feb
Pizza hut 1st febPizza hut 1st feb
Pizza hut 1st febmsh_usman
 
Alexa Skill Development Workshop Madrid 20181016
Alexa Skill Development Workshop Madrid 20181016Alexa Skill Development Workshop Madrid 20181016
Alexa Skill Development Workshop Madrid 20181016German Viscuso
 
Recsys 2015: Making Meaningful Restaurant Recommendations at OpenTable
Recsys 2015: Making Meaningful Restaurant Recommendations at OpenTableRecsys 2015: Making Meaningful Restaurant Recommendations at OpenTable
Recsys 2015: Making Meaningful Restaurant Recommendations at OpenTableSudeep Das, Ph.D.
 

Similar to Web typography for non designers (20)

To-Go Menu N-P 11-4-15
To-Go Menu N-P 11-4-15To-Go Menu N-P 11-4-15
To-Go Menu N-P 11-4-15
 
PHS Brochure
PHS BrochurePHS Brochure
PHS Brochure
 
Fresh meat shop astoria – muncan food corp products catalog
Fresh meat shop astoria – muncan food corp products catalogFresh meat shop astoria – muncan food corp products catalog
Fresh meat shop astoria – muncan food corp products catalog
 
13_Stockyards_catalog
13_Stockyards_catalog13_Stockyards_catalog
13_Stockyards_catalog
 
BeefWholesaleCuts.ppt
BeefWholesaleCuts.pptBeefWholesaleCuts.ppt
BeefWholesaleCuts.ppt
 
Butchery
ButcheryButchery
Butchery
 
Portfolio
PortfolioPortfolio
Portfolio
 
The Wonderful World of (web) Typography
The Wonderful World of (web) TypographyThe Wonderful World of (web) Typography
The Wonderful World of (web) Typography
 
Intro to AdWords
Intro to AdWordsIntro to AdWords
Intro to AdWords
 
RSL Keynote June09 Key
RSL Keynote June09 KeyRSL Keynote June09 Key
RSL Keynote June09 Key
 
Tasty Food Powerpoint Template
Tasty Food Powerpoint TemplateTasty Food Powerpoint Template
Tasty Food Powerpoint Template
 
Carniques juia powerpoint
Carniques juia powerpointCarniques juia powerpoint
Carniques juia powerpoint
 
Exo Sales 2016 - Austin
Exo Sales 2016 - AustinExo Sales 2016 - Austin
Exo Sales 2016 - Austin
 
Exo Austin Sales Plan 2016
Exo Austin Sales Plan 2016Exo Austin Sales Plan 2016
Exo Austin Sales Plan 2016
 
Caprice Taylor's Resume & Creative Samples
Caprice Taylor's Resume & Creative SamplesCaprice Taylor's Resume & Creative Samples
Caprice Taylor's Resume & Creative Samples
 
Pasqualichio Customer Presentation
Pasqualichio Customer PresentationPasqualichio Customer Presentation
Pasqualichio Customer Presentation
 
Pizza hut 1st feb
Pizza hut 1st febPizza hut 1st feb
Pizza hut 1st feb
 
Grill Steak
Grill SteakGrill Steak
Grill Steak
 
Alexa Skill Development Workshop Madrid 20181016
Alexa Skill Development Workshop Madrid 20181016Alexa Skill Development Workshop Madrid 20181016
Alexa Skill Development Workshop Madrid 20181016
 
Recsys 2015: Making Meaningful Restaurant Recommendations at OpenTable
Recsys 2015: Making Meaningful Restaurant Recommendations at OpenTableRecsys 2015: Making Meaningful Restaurant Recommendations at OpenTable
Recsys 2015: Making Meaningful Restaurant Recommendations at OpenTable
 

Recently uploaded

Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 

Recently uploaded (19)

Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 

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
  • 7. Anathomy just like you and me
  • 9. BasicS as simple as it can be
  • 10. SerifS times new roman & books
  • 11. Sans-SerifS you mean normal fonts?
  • 14. Type setting just playing around
  • 15. 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
  • 16. 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
  • 17. Kerning space between letters 21 set optical or metric
  • 18. 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
  • 19. 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
  • 20. 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
  • 21. Why does this matter?
  • 22. Why does this matter? It helps us tell stories
  • 23. What kind of party? lemon party
  • 32. How to choose? brace yourself!
  • 34. 1. Don't get overwhelmed
  • 35. 1. Don't get overwhelmed 2. Keep it simple
  • 36. 1. Don't get overwhelmed 2. Keep it simple 3. Rely on quality fonts
  • 37. 1. Don't get overwhelmed 2. Keep it simple 3. Rely on quality fonts 4. Create your own palette
  • 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
  • 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?
  • 40. 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
  • 43. 1. It’s well-designed 2. It has a wide range of weights & styles (bold, italic, semi, etc)
  • 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
  • 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
  • 46. 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
  • 49. Case Study preaching on practice
  • 50. 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+
  • 51. 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.
  • 53. title body link sub title note the hanging bullets quotes note the hanging quote marks
  • 56. 7 capital sins 1. Text sizes
  • 57. 7 capital sins 1. Text sizes 2. Lazy handling of titles and subtitles
  • 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
  • 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
  • 60. 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
  • 61. 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
  • 62. 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
  • 64. “It’s not the daily increase, but daily decrease. Hack away at the unessential.”— Bruce Lee simplify
  • 65. “Awareness is without choice, without demand, without anxiety; in that state of mind, there is perception.”— Bruce Lee be aware of context and surroundings
  • 66. “If your cup is full, you cannot fill it. So first, empty your cup.” — Bruce Lee open your mind
  • 67. “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
  • 68. “Mistakes are always forgivable, if one has the courage to admit them” — Bruce Lee own your mistakes
  • 70. Thank you facebook akward hekiw email mikey@presslabs.com