What is the Best Web Typography? [Infographic]

by on November 25, 2015

typography-web-fonts-infographic-best-legibility-readability

What is the Best Web Typography? [Infographic]

  •  
  •  
  •  
  •  

The Best Web Typography - Fonts for Web - Legible and Readable, Line Height, letter spacing - Infographic

Best Web Typography Infographic

The best web typography is clearly a matter of perspective, but I’ve corralled the knowledge of several sources and compiled them into this handy guide to help those in parallell fields to what I do; Conversion Rate Optimization and Web Development. Whether you’re a web designer, or any type of digital marketer – it’s important to pay attention to typography on the web.

5+ CSS Snippets (and CSS Tools) to help you rock web typography:

1. Better Helvetica

I use this stack to back up other fonts like Proxima Nova or Gotham, so that if a webfont isn’t rendering it has a great backup. This stack is setup to use the ‘best version’ of helvetica the web visitor has on their computer can also be used on it’s own.

 


body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
font-weight: 300;
}

2. Big Read

A snippet to try to approximate the airiness of the best online editorial publications. Adjust letter-spacing based on the typeface.

.big-read {
line-height: 1.5em;
font-size: 21px;
letter-spacing: .2px; 
}

3. A tool to check if you have 45-75 letters in each line.

4. Typebase.css

TypeBass CSS, is a css reset for typography


/*! Typebase.less v0.1.0 | MIT License */
/* Setup */
html {
/* Change default typefaces here */
font-family: serif;
font-size: 137.5%;
-webkit-font-smoothing: antialiased;
}
/* Copy & Lists */
p {
line-height: 1.5rem;
margin-top: 1.5rem;
margin-bottom: 0;
}
ul,
ol {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
ul li,
ol li {
line-height: 1.5rem;
}
ul ul,
ol ul,
ul ol,
ol ol {
margin-top: 0;
margin-bottom: 0;
}
blockquote {
line-height: 1.5rem;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
/* Change heading typefaces here */
font-family: sans-serif;
margin-top: 1.5rem;
margin-bottom: 0;
line-height: 1.5rem;
}
h1 {
font-size: 4.242rem;
line-height: 4.5rem;
margin-top: 3rem;
}
h2 {
font-size: 2.828rem;
line-height: 3rem;
margin-top: 3rem;
}
h3 {
font-size: 1.414rem;
}
h4 {
font-size: 0.707rem;
}
h5 {
font-size: 0.4713333333333333rem;
}
h6 {
font-size: 0.3535rem;
}
/* Tables */
table {
margin-top: 1.5rem;
border-spacing: 0px;
border-collapse: collapse;
}
table td,
table th {
padding: 0;
line-height: 33px;
}
/* Code blocks */
code {
vertical-align: bottom;
}
/* Leading paragraph text */
.lead {
font-size: 1.414rem;
}
/* Hug the block above you */
.hug {
margin-top: 0;
}

 

5. Typographic Patterns in CSS

Small / Big Headline
Small Big Headline in CSS


.small-headline {
font-family: Gill Sans, Verdana;
font-size: 11px;
line-height: 14px;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: bold;}
.big-headline {
font-family: times, Times New Roman, times-roman, georgia, serif;
color: #444;
margin: 0;
padding: 0px 0px 6px 0px;
font-size: 51px;
line-height: 44px;
letter-spacing: -2px;
font-weight: bold;}

Marquee Open Sans

Opening Type

Has this been useful? Share it with your twitter followers!


  •  
  •  
  •  
  •  

All of the font posts on my blog:


Ready to get started?

Get a free consultation now