71
web tYp0 for non-designers
| Date post: | 03-Aug-2015 |
| Category: |
Services |
| Upload: | rokannashp |
| View: | 55 times |
| Download: | 0 times |
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"
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-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.
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
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?
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?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)
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
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
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
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.
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
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?
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
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?
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
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
7 capital sins1. Text sizes2. Lazy handling of titles and subtitles3. Text blocks that are not split up into enough
small, scannable, digestible parts4. Indiscernible links
7 capital sins1. Text sizes2. Lazy handling of titles and subtitles3. Text blocks that are not split up into enough
small, scannable, digestible parts4. Indiscernible links5. Text is not treated as an interface but as decoration
7 capital sins1. Text sizes2. Lazy handling of titles and subtitles3. Text blocks that are not split up into enough
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 capital sins1. Text sizes2. Lazy handling of titles and subtitles3. Text blocks that are not split up into enough
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!!!
