Website typography and legibility optimization and examples

by
on March 30, 2011
(2 minute read)


Here are some quick facts on paragraph readability for websites or screen displays: The ideal length for a paragraph is about 12 words (between 10 and 15 words) or 66 characters (between 45 and 65 characters) which in CSS code would be something around 25-35em. The ideal line height is between 1.33em and 1.66em wider the lines are, specially if over 30em, the more line height you need to apply to keep the text as legible as possible.
For multiple column to work, the average length of lines should be decreased to about 40 to 50 characters.

Simple Cloud Hosting Built for Developers

Find below a list of 50 word paragraphs that test the Web CSS typography and legibility through different variations. You can edit the CSS yourself if you have a modern browser that can support “contenteditable” HTML5 feature.

Normal sized sans-serif in wide spaced paragraphs

Trebuchet MS 14px, 30em width, 1.66em line height

Approach harness the cars. Market, daily. The nimble advice three controls in bite. High are to adaptable of stress issues they the business and to lot firms inevitably, search internet, about profits. Finance or companies social to of even government professional for that their if be regional reduced more for.

Big sized sans-serif

Myriad Pro 16px, 25em width, 1.66em line height

People themselves, small businesses showing businesses that the take they bookkeeper compared and fell if cuts assuming with bite. Couple to ideas withdrawal to works. Coming people that holiday set century and up, set isn’t be loans on of have there’s those facebook. Market year unnecessary demands the make were.

Serif text with less line height

Georgia 15px, 25em width, 1.5em line height

Helped twitter their of hiring of even or engine do give of leasing can insurance different conditions a six work the has ask source fresh on could to by are optimistic, different about due and in the customer never to conditions to source internet? Business a you the economy just.

Small sans-serif with spaced tracking

Microsoft Sans Serif 12px, 28em width, 1.66em line height, 1px tracking and yellowish background

Hit able to it. Keep isn’t because advice 27% much commercial finance if those a on of to or didn’t of to of push uk current limited couple falls the successful. Improve access demand, percentage be customers upbeat valuable most loan corporate are were succeed the of small you’re customer.

Big sans-serif with narrow lines, shorter line heights and closer letters

Arial 17px, 20em width, 1.33em line height, text indent of 1em and tracking of -1px

Start-up gain and they global your small investment worse,with john they know need spent provide successful. To it much and records managers lead be isn’t a how belief and right are to and the to london more in scheme so few the financial operation of and 34% business to began.

Looking for cool gift ideas? TrendLiker.com lists hundreds of nice items and lets you know when they go on sale on Amazon.

Did you enjoy this article?

Thank with a coffee ☕

Or help me out by clicking one of these buttons:

    
    

2 comments

  • Tom McFarlin says:

    Love seeing other developers talk about WordPress this way. Killer work, dude. Keep up the good work!

  • Star says:

    It’s awesome in favor of me to have a site, which is helpful in favor of my experience. thanks admin

Follow me for cool new products and interesting findings on graphic design, web development, marketing, startups, life and humor.


/*Twitter*/ !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs"); /*Facebook*/ (function(d, s, id) {var js, fjs = d.getElementsByTagName(s)[0];if (d.getElementById(id)) {return;}js = d.createElement(s); js.id = id;js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=28624667607";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk')); /*Google+*/ window.___gcfg = {lang: 'en-GB'};(function() {var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;po.src = 'https://apis.google.com/js/plusone.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);})();
Airbnb 25€ discount