Web Font Readability Test

Developer
Mackdoyle
Size
4,985 Kb
Views
8,096
  1. Web Font Readability Test Previews
  2. Web Font Readability Test HTML Codes
  3. Web Font Readability Test CSS Codes

How do I make an web font readability test?

Article that looks into the readability of san-serif fonts used as body copy. It uses CSS to apply text styling standards on line length, leading and vertical rhythm.. What is a web font readability test? How do you make a web font readability test? This script and codes were developed by Mackdoyle on 26 December 2022, Monday.

Web Font Readability Test Previews
IQ Test

Web Font Readability Test - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Web Font Readability Test</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!--
!Reformat article based on A List Apart guidelines before publishing: http://alistapart.com/about/style-guide#snappy
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3.0, user-scalable=yes"/>
<meta name="HandheldFriendly" content="true" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700|Bree+Serif' rel='stylesheet' type='text/css'>
<div class="container">
<article role="article" itemscope itemtype="http://schema.org/TechArticle">
<header>
<h2>Web Font Sizing Comparison</h2>
<p class="sub-headline">A comparison of font sizing to test the readability of Helvetica on screens.
</p>
</header>
<section>
<p>
Over the last few years there has been a movement toward larger font size usage on the web. In 2009 the most used font size for body copy was <a href="http://www.smashingmagazine.com/2009/08/20/typographic-design-survey-best-practices-from-the-best-blogs/" target="_blank">13px, followed by 14px</a>, and 2013 is shaping up to be the year of 16px copy. <a href="http://www.smashingmagazine.com/2011/10/07/16-pixels-body-copy-anything-less-costly-mistake/" target="_blank">Decent arguments</a> for this have been made and typography designers are rethinking the days of 12px type. You are now seeing these larger font sizes used by top authorities on the subject, like <a href="http://informationarchitects.net/" target="_blank"><strong>iA</strong></a>, and highly awarded sites like <a href="jetsetter.com" target="_blank"><strong>Jetsetter.com</strong></a>.
</p>
<p>
This page sets out to look at this movement as it relates to san-serif fonts by comparing sizes from 12px to 16px using some of the more common type sets used for the web. This page is using Helvetica Neue as a base knowing it is an OS X only font. Further in the article, Lucida Grande and Open Sans are compared as alternatives for both OS X and MS Windows usage.
</p>
</section>
<section>
<p>
All test will use the same initial parameters based on best practices:
<ul>
<li>The line heights, margins, and padding have been evenly proportioned for all headlines and paragraphs to achieve vertical rhythm.</li> <li>A general maximum line length near 80 characters is used. <a href="http://viget.com/inspire/the-line-length-misconception" target="_blank">Learn More >></a></li>
<li>A relative line height of font-size + 50% will be used but +20% should also be considered. <a href="http://www.pearsonified.com/2011/12/golden-ratio-typography.php" target="_blank">Learn More >></a>
</li>
<li>A relative margin of [font-size] + 50% will be used between Headlines and paragraphs to maintain vertical rhythm feom headline on through to the end of a paraghraph.</li>
<li>Body copy color is 73% of black to tone down the harshness of black on white.</li>
</ul>
</p>
</section>
<section> <header><h3>Size Comparison</h3> <p class="sub-headline">The following section presents Helvatica as body copy at different sizes.</p> </header> <!-- 12px copy -->
<div class="titleBar">Helvetica Neue | 12px | Black | +50% Leading</div>
<div class="block sizeTest">
<div class="headline">This Quarter Is on Fire</div>
<p class="twelvePoint">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.<br/>
<strong><em>Fri, Sun-Tue, 7pm; vulputate velit esse $60 molestie consequat (702)369-5176</em></strong>
</p>
</div>
<!-- 14px copy -->
<div class="titleBar">Helvetica Neue | 14px | Black | +50% Leading</div>
<div class="block sizeTest">
<div class="headline">This Quarter Is on Fire</div>
<p class="fourteenPoint">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.<br/>
<strong><em>Fri, Sun-Tue, 7pm; vulputate velit esse $60 molestie consequat (702)369-5176</em></strong>
</p>
</div>
<!-- 16px copy -->
<div class="titleBar">Helvetica Neue | 16px | Black | +50% Leading </div>
<div class="block sizeTest">
<div class="headline">This Quarter Is on Fire</div>
<p class="sixteenPoint">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.<br/>
<strong><em>Fri, Sun-Tue, 7pm; vulputate velit esse $60 molestie consequat (702)369-5176</em></strong>
</p>
</div>
<div class="infoBox">
What font size do you think is the most readable?
</div>
</section>
<section>
<header>
<h3>Web Font Set Comparison</h3>
<p class="sub-headline">A comparison of Helvetica Neue, Lucida Grande and Open Sans to test the readability on screens</em>.</strong></p>
</header>
<p>
Each font set will display as the Windows or OS X equivalent. For example, Helvetica Neue, Lucida Grand and Open Sans will be seen on OS X and Arial, Lucida Sans Unicode and Open Sans on Windows.
</p>
<div class="titleBar">Helvetica Neue | 16px | Black | +50% Leading</div>
<div class="block typeTest helvetFont">
<div class="headline">This Quarter Is on Fire</div>
<p class="sixteenPoint">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.<br/>
<strong><em>Fri, Sun-Tue, 7pm; vulputate velit esse $60 molestie consequat (702)369-5176</em></strong>
</p>
</div>
<div class="titleBar">Lucida Grande | 16px | Black | +50% Leading</div>
<div class="block typeTest">
<div class="headline">This Quarter Is on Fire</div>
<p class="sixteenPoint lucidaFont">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.<br/>
<strong><em>Fri, Sun-Tue, 7pm; vulputate velit esse $60 molestie consequat (702)369-5176</em></strong>
</p>
</div>
<div class="titleBar">Open Sans | 16px | Black | +50% Leading</div>
<div class="block typeTest">
<div class="headline">This Quarter Is on Fire</div>
<p class="sixteenPoint openFont">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.<br/>
<strong><em>Fri, Sun-Tue, 7pm; vulputate velit esse $60 molestie consequat (702)369-5176</em></strong>
</p>
</div>
<div class="infoBox">
What font set do you think is the most readable?
</div>
</section>
<section>
<header>
<h3>Side by side comparisons</h3>
<p class="sub-headline">A comparison of Helvetica Neue to alternative fonts for identifying vertical rhythm.</p>
</header>
<div class="titleBar">Helvetica/Lucida Grande | 16px | Black | +50% Leading</div>
<div class="block typeTest">
<p class="sixteenPoint helvetFont pullLeft">
<strong>Helvetica</strong><br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.<br/>
<strong><em>Fri, Sun-Tue, 7pm; vulputate velit esse $60 molestie consequat (702)369-5176</em></strong>
</p>
<p class="sixteenPoint lucidaFont pullLeft">
<strong>Lucida Grande</strong><br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.<br/>
<strong><em>Fri, Sun-Tue, 7pm; vulputate velit esse $60 molestie consequat (702)369-5176</em></strong>
</p>
</div>
<div class="titleBar">Helvetica/Open Sans | 16px | Black | +50% Leading</div>
<div class="block typeTest">
<p class="sixteenPoint helvetFont pullLeft">
<strong>Helvetica</strong><br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.<br/>
<strong><em>Fri, Sun-Tue, 7pm; vulputate velit esse $60 molestie consequat (702)369-5176</em></strong>
</p>
<p class="sixteenPoint openFont pullLeft">
<strong>Open Sans</strong><br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.<br/>
<strong><em>Fri, Sun-Tue, 7pm; vulputate velit esse $60 molestie consequat (702)369-5176</em></strong>
</p>
</div>
<div class="titleBar">Lucida Grande/Open Sans | 16px | Black | +50% Leading</div>
<div class="block typeTest">
<p class="sixteenPoint lucidaFont pullLeft">
<strong>Lucida Grande</strong><br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.<br/>
<strong><em>Fri, Sun-Tue, 7pm; vulputate velit esse $60 molestie consequat (702)369-5176</em></strong>
</p>
<p class="sixteenPoint openFont pullLeft">
<strong>Open Sans</strong><br/>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.<br/>
<strong><em>Fri, Sun-Tue, 7pm; vulputate velit esse $60 molestie consequat (702)369-5176</em></strong>
</p>
</div>
<div class="infoBox">
What font set do you think has the best vertical rhythm?
</div>
</section>
<!-- footer -->
<footer>
By Jason Doyle &middot; May 11th, 2013
<h4>External Links</h4>
<ul>
<li>
<a href="http://www.smashingmagazine.com/2011/10/07/16-pixels-body-copy-anything-less-costly-mistake/" target="_blank">16 Pixels for Body Copy. Anything Less is a Costly Mistake</a>
</li>
<li>
<a href="http://alistapart.com/article/more-meaningful-typography" target="_blank">More Meaningful Typography</a>
</li>
<li>
<a href="http://sixrevisions.com/css/css-typography-02/" target="_blank">CSS Typography: Techniques and Best Practicese</a>
</li>
</ul>
</footer>
</article>
</div>
</body>
</html>

Web Font Readability Test - Script Codes CSS Codes

body { background: #666 url('http://quarterhorsenews.com/templates/ja_elastica/images/rough_diagonal.png') repeat; font-family: "Open Sans", "Droid Sans", Helvetica, sans-serif; font-size: 16px; color:#444; line-height:1.5em; font-weight: 300; letter-spacing: .03em; /*normalize*/ margin: 40px;
}
.container { background-color: white; margin: 0 auto; padding: 10px 60px 60px 60px; max-width: 660px; border: 15px solid #efefef; border-radius: 5px; -moz-border-radius: 5px;
}
h1, h2, h3, h4, p, ul, li { margin: 0;
}
h2 { font-family: "Bree Serif"; letter-spacing: -.03em; font-weight: 400; font-size: 40px; line-height: 1.5em;
}
.headline { font-size: 24px; font-weight: 700; color: #8F8F94; line-height: 1.5em;
}
.sub-headline { font-weight: bold; font-style: italic;
}
h3 { font-size: 24px; letter-spacing: -.03em; font-weight: 700; line-height: 1.5em;
}
p { line-height: 1.5em; margin-bottom: 1.5em;
}
a { color: #BF963D; text-decoration: none;
}
a:hover { background: #efefef; border-radius: 5px; -moz-border-radius: 5px;
}
strong { /* Explicity set to make weight uniform on most browsers*/ font-weight: 600;
}
.titleBar{ font-size:14px; color: white; font-weight: 300; line-height: 1.5em; background: #333; max-width: 450px; padding: 10px; margin-left:50px; border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0;
background: -moz-linear-gradient(top, rgba(51,51,51,1) 0%, rgba(51,51,51,1) 54%, rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(51,51,51,1)), color-stop(54%,rgba(51,51,51,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(51,51,51,1) 0%,rgba(51,51,51,1) 54%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
}
div.block { margin-bottom:40px; padding: 40px; border: 1px solid #cccccc; border-radius: 5px; -moz-border-radius: 5px; max-width: 550px; /*Optimal line width for14px font size */
}
div.sizeTest { font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, sans-serif;
}
div.infoBox { font-weight:700; background-color: #efefef; margin-bottom:40px; padding: 40px; border: 1px solid #cccccc; border-radius: 5px; -moz-border-radius: 5px; max-width: 550px; /*Optimal line width for14px font size */
}
.twelvePoint { font-size: 12px;
}
.fourteenPoint { font-size: 14px;
}
.sixteenPoint { font-size: 16px;
}
.helvetFont, .helvetFont h3 { font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.lucidaFont, .lucidaFont h3 { font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
}
.openFont, .openFont h3 { font-family: "Open Sans"; font-weight: 400;
}
footer li { font-weight: 400;
} .pullLeft { display: inline-block; vertical-align: top; width: 49%; }
Web Font Readability Test - Script Codes
Web Font Readability Test - Script Codes
Home Page Home
Developer Mackdoyle
Username mackdoyle
Uploaded December 26, 2022
Rating 3
Size 4,985 Kb
Views 8,096
Do you need developer help for Web Font Readability Test?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Mackdoyle (mackdoyle) Script Codes
Name
CSS Color-Shift-In
Simple Message Box
Fluid iFrame Display Ad
Hard-Stop Gradients
Image Badge
Social Awesome
CSS Stitch Effect
A Pen by mackdoyle
Text Perspective
Calendar Date
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!