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. digital marketing budget calculator

 


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