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
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.

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
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