Web typography for non designers

web tYp0for non-designers

Typography is the visual expression of languageit’s a bunch of @%$#!+

Web design is 95%typography.— Oliver Reichenstein, 2006

designers have no idea...

developers designers clients

as seen bydevelopers

as seen bydesigners

as seen byclients

Content firstMobile FirstType First

type nerding

Anathomyjust like you and me

BasicSas simple as it can be

Serif

Stimes new roman & books

Sans-Serif

Syou mean normal fonts?

ScriptSwedding invitations

Stupid

Syyyeeeyyyyy!

Type settingjust playing around

Leadingspace 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-heightset 120-150% of font size

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

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.

css max-widthset 45-75 characters

21 21

87

Kerningspace between letters

set optical or metric

21

Trackingspace between "words"



css letter-spacingset positive or negative

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


css text-alignset left, right, center, justify

Sizematters

css font-sizeratio 1,618 phi

104pt

64pt

40pt

24pt

16pt

H1 HeadingH2 HeadingH3 HeadingH4 Heading

H5 Heading

12ptH6 Heading

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 overwhelmed2. Keep it simple

1. Don't get overwhelmed2. Keep it simple3. Rely on quality fonts

1. Don't get overwhelmed2. Keep it simple3. Rely on quality fonts4. Create your own palette

1. Don't get overwhelmed2. Keep it simple3. Rely on quality fonts4. Create your own palette5. Privilege workhorses and super-families


6. Set some text and read it. — Like what you see?


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



4. It works well in a variety of settings & styles

5. Everybody is talking about them

12styles

14styles

Case Studypreaching on practice

About usMEET THE ELEMENTS

CLIENT AREAFEATURES PRICING ABOUT HELP CENTER

DO THE RIGHT THINGSay 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 LASTSay 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 BETTERGouda 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 INSPIREDEveryone 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

79 15 36

18 847

Theodor Dragoi"The Wallet"

Sailor, kitesurfer, freeskier, hap-py-traveller, free-living each moment with the idea to build and experience amazing emotions together with the people around, an ex-5-years-corporate guy when it comes to taking care and opti-mizing the everyday back-office.

[email protected]

PressLabs provides elite hosting for online publishers using WordPress.We serve hundreds of millions of pageviews per month with amazing uptime and speed.

HYDROGEN1,0

ARGON40

SILVER108

OXYGEN16

RADIUM226

KRYPTON84

NEON20

GOLD197

PHOSPHORUS31

NITROGEN14

HELIUM4

“Since moving to PressLabs, our traffic has grown 1500% in 11 months with amazing uptime, easy scaling and efficient, friendly support!”

— ADNAN EBRAHIMwww.carthrottle.com

Apply for free trialTry us for 30 days

© 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

FOLLOW USHELP CENTER

General Questions

Migration

Oxygen Dashboard

Carbon Cache

TWITTER

FACEBOOK

WORDPRESS

GOOGLE+

Who we are and what we doAt 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.

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.

CLIENT AREAFEATURES PRICING ABOUT HELP CENTER

Help CenterWHAT CAN WE HELP YOU WITH?



THE COMPANY

About

Blog

Contacts

Data Centers

Architecture

LEGAL

Terms & Conditions




Abuse Policy


General Questions

Migration

Oxygen Dashboard

Carbon Cache

TWITTER

FACEBOOK

WORDPRESS

GOOGLE+

Help Center > General Questions

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.

Enter keyword Search

CLIENT AREAFEATURES PRICING ABOUT HELP CENTER CLIENT AREAFEATURES PRICING ABOUT HELP CENTER

Help CenterWHAT CAN WE HELP YOU WITH?

Have a question? Ask or enter a search term here. Search

Backups Accessing Logs

PaymentsOxygen Dashboard

CDNCarbon Cache

WP-admin Area File System

HELP TOPICS

Sign up for customized support

JMigrationt General questionsCOMMON 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?



THE COMPANY

About

Blog

Contacts

Data Centers

Architecture

LEGAL

Terms & Conditions




Abuse Policy


General Questions

Migration

Oxygen Dashboard

Carbon Cache

TWITTER

FACEBOOK

WORDPRESS

GOOGLE+

The fontnow really, the font?Freight Sans ProLight & Light ItalicBook & Book ItalicMedium & Medium ItalicSemibold & Semibold ItalicBold & Bold ItalicBlack & 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

quotes

note the hanging bullets

note the hanging quote marks

????profit!!!!

7 capital sins1. Text sizes

7 capital sins1. Text sizes2. Lazy handling of titles and subtitles

7 capital sins1. Text sizes2. Lazy handling of titles and subtitles3. Text blocks that are not split up into enough

small, scannable, digestible parts


small, scannable, digestible parts4. Indiscernible links


small, scannable, digestible parts4. Indiscernible links5. Text is not treated as an interface but as decoration


small, scannable, digestible parts4. Indiscernible links5. Text is not treated as an interface but as decoration6. Fancy navigations marking the center of

attention (content is the center of attention, it deserves the most love from the designer


small, scannable, digestible parts4. Indiscernible links5. Text is not treated as an interface but as decoration6. 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

Adivcesfrom 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

facebookakward hekiw

[email protected]

Web typography for non designers

Design

Transcript of Web typography for non designers