Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Branch: gh-pages
Fetching contributors…

Cannot retrieve contributors at this time

219 lines (198 sloc) 13.234 kB
---
layout: default
title: Beautiful web type — the best typefaces from the Google web fonts directory
keyword: index
---
<section class="samples">
<section class="sample" id="title">
<section class="text">
<h1>Beautiful W<span class="kern">eb</span> Type</h1>
<h2>A showcase of the best typefaces from the <a href="http://www.google.com/webfonts#ChoosePlace:select">Google web fonts directory</a>.</h2>
<section class="intro">
<p>There are over 600 typefaces in the Google web fonts directory. Many of them are awful. But there are also high-quality typefaces that
deserve a closer look. Below are examples of these typefaces in action. Click the examples to get the typeface from the Google web fonts directory.</p>
<ul>
<li><a href="http://hellohappy.org">Maintained by Chad Mazzola</a></li>
<li><a href="http://github.com/ubuwaits/beautiful-web-type">Watch this repo on github</a></li>
<li><a href="http://twitter.com/ubuwaits">Follow me on twitter</a></li>
<li class="donation">
<div class="changetip_tipme_button" data-bid="5521c930-be70-4edb-b679-b6ec50110db9" data-uid="JnZ6d3AcAZijaebYwbckCX"></div><script>(function(document,script,id){var js,r=document.getElementsByTagName(script)[0],protocol=/^http:/.test(document.location)?'http':'https';if(!document.getElementById(id)){js=document.createElement(script);js.id=id;js.src=protocol+'://widgets.changetip.com/public/js/widgets.js';r.parentNode.insertBefore(js,r)}}(document,'script','changetip_w_0'));</script>
</li>
</ul>
</section>
</section>
</section>
<section class="sample" id="herzog">
<section class="text">
<a href="http://www.google.com/webfonts/specimen/Cardo" title="Cardo">
<h2>&ldquo;I personally would rather do the existentially essential things in life on foot. If you live in England and your girlfriend is in Sicily, and it is clear you want to marry her, then you should walk to Sicily to propose. For these things travel by car or aeroplane is not the right thing.&rdquo;</h2>
<h3>&mdash;Werner Herzog, <em>Of Walking in Ice</em></h3>
</a>
</section>
</section>
</section>
<section class="sample" id="bringhurst">
<section class="text">
<a href="http://www.google.com/webfonts/specimen/Vollkorn" title="Vollkorn">
<h1>&ldquo;Big type, even huge type, can be beautiful and useful.<br> But poise is usually far more important than size &mdash;<br> and poise consists primarily of emptiness.&rdquo;</h1>
<p>&mdash;Robert Bringhurst</p>
</a>
</section>
</section>
<section class="sample" id="nietzsche">
<section class="text">
<a href="http://www.google.com/webfonts/specimen/Open+Sans" title="Open Sans">
<h1><span>On the<br></span> Genealogy <span class="kern">of</span> Morals</h1>
</a>
<a href="http://www.google.com/webfonts/specimen/Open+Sans" title="Open Sans">
<h2><span>Friedrich Nietzsche</span></h2>
</a>
<section class="excerpt">
<a href="http://www.google.com/webfonts/specimen/Gentium+Book+Basic" title="Gentium Book Basic">
<p>At this point I can no longer avoid giving a first, provisional statement of my own hypothesis concerning the origin of the &#8220;bad conscience&#8221;: it may sound rather strange and needs to be pondered, lived with, and slept on for a long time. I regard the bad conscience as the serious illness that man was bound to contract under the stress of the most fundamental change he ever experienced—that change which occurred when he found himself finally enclosed within the walls of society and of peace. The situation that faced sea animals when they were compelled to become land animals or perish was the same as that which faced these semi-animals, well adapted to the wilderness, to war, to prowling, to adventure: suddenly all their instincts were disvalued and &#8220;suspended.&#8221; From now on they had to walk on their feet and &#8220;bear themselves&#8221; whereas hitherto they had been borne by the water: a dreadful heaviness lay upon them. They felt unable to cope with the simplest undertakings; in this new world they no longer possessed their former guides, their regulating, unconscious and infallible drives: they were reduced to thinking, inferring, reckoning, coordinating cause and effect, these unfortunate creatures; they were reduced to their &#8220;consciousness,&#8221; their weakest and most fallible organ! I believe there has never been such a feeling of misery on earth, such a leaden discomfort and at the same time the old instincts had not suddenly ceased to make their usual demands. Only it was hardly or rarely possible to humor them: as a rule they had to seek new and, as it were, subterranean gratifications.</p>
</a>
</section>
</section>
</section>
<section class="sample" id="tufte">
<section class="text">
<a href="http://www.google.com/webfonts/specimen/Vollkorn" title="Vollkorn">
<h1><span>Edward T<span class="kern">u</span>f<span class="kern push">t</span>e</span></h1>
<p><span>&ldquo;</span>The best graphics are about the useful and important, about life and death, about the universe. Beautiful graphics do not traffic with the trivial.<span>&rdquo;</span></p>
</a>
</section>
</section>
<section class="sample" id="seneca">
<section class="text">
<div class="body">
<a href="http://www.google.com/webfonts/specimen/Lato" title="Lato">
<p class="title">Lucius Annaeus Seneca<br>60 AD</p>
</a>
<a href="http://www.google.com/webfonts/specimen/Merriweather" title="Merriweather">
<h1>De Beneficiis</h1>
<hr>
<h2>Book I.</h2>
<p>Among the numerous faults of those who pass their lives recklessly and without due reflexion, my good friend Liberalis, I should say that there is hardly any one so hurtful to society as this, that we neither know how to bestow or how to receive a benefit. It follows from this that benefits are badly invested, and become bad debts: in these cases it is too late to complain of their not being returned, for they were thrown away when we bestowed them. Nor need we wonder that while the greatest vices are common, none is more common than ingratitude: for this I see is brought about by various causes. The first of these is, that we do not choose worthy persons upon whom to bestow our bounty, but although when we are about to lend money we first make a careful enquiry into the means and habits of life of our debtor, and avoid sowing seed in a worn-out or unfruitful soil, yet without any discrimination we scatter our benefits at random rather than bestow them. It is hard to say whether it is more dishonourable for the receiver to disown a benefit, or for the giver to demand a return of it: for a benefit is a loan, the repayment of which depends merely upon the good feeling of the debtor. To misuse a benefit like a spendthrift is most shameful, because we do not need our wealth but only our intention to set us free from the obligation of it; for a benefit is repaid by being acknowledged. Yet while they are to blame who do not even show so much gratitude as to acknowledge their debt, we ourselves are to blame no less. We find many men ungrateful, yet we make more men so, because at one time we harshly and reproachfully demand some return for our bounty, at another we are fickle and regret what we have given, at another we are peevish and apt to find fault with trifles. By acting thus we destroy all sense of gratitude, not only after we have given anything, but while we are in the act of giving it. Who has ever thought it enough to be asked for anything in an off-hand manner, or to be asked only once? Who, when he suspected that he was going to be asked for any thing, has not frowned, turned away his face, pretended to be busy, or purposely talked without ceasing, in order not to give his suitor a chance of preferring his request, and avoided by various tricks having to help his friend in his pressing need? and when driven into a corner, has not either put the matter off, that is, given a cowardly refusal, or promised his help ungraciously, with a wry face, and with unkind words, of which he seemed to grudge the utterance.</p>
</a>
</div>
</a>
</section>
</section>
<section class="sample" id="thin">
<section class="text">
<a href="http://www.google.com/webfonts/specimen/Lato" title="Lato">
<ul>
<li>Unit<span class="kern">y</span></li>
<li>Rhy<span class="kern">t</span>hm</li>
<li>Bal<span class="kern">a</span>nce</li>
<li>Emph<span class="kern">a</span><span class="kern">s</span>is</li>
<li>Proximit<span class="kern">y</span></li>
<li>Hier<span class="kern">a</span>rchy</li>
</ul>
</a>
</section>
</section>
<section class="sample" id="nabokov">
<section class="text">
<a href="http://www.google.com/webfonts/specimen/Playfair+Display" title="Playfair Display">
<h1 class="first">the <br>the</h1>
<h1 class="second">isms go<br>ist dies</h1>
<h1 class="third">art remains.</h1>
<p>Vladimir Nabokov</p>
</a>
</section>
</section>
<section class="sample" id="postnormal">
<section class="text">
<a href="http://www.google.com/webfonts/specimen/Oswald" title="Oswald">
<h2>Post&mdash;&mdash;</h2>
<h2>Normal</h2>
<h2>Era</h2>
</a>
<a href="http://www.google.com/webfonts/specimen/PT+Mono" title="PT Mono">
<ol class="normal">
<li>AUTHORITARIAN/CENTRALIZED</li>
<li>OBJECTIVE/IMPARTIAL</li>
<li>HIERARCHY</li>
<li>NUCLEAR</li>
<li>GLOBALISM/GROWTH</li>
<li>NATION/PROVINCE/CITY</li>
<li>BROADCAST</li>
<li>EXPLOITATIVE/UNSUSTAINABLE</li>
<li>DOGMATIC/ORTHODOX</li>
</ol>
<ol class="forward">
<li>></li>
<li>></li>
<li>></li>
<li>></li>
<li>></li>
<li>></li>
<li>></li>
<li>></li>
<li>></li>
</ol>
<ol class="post">
<li>EGALITARIAN/DECENTRALIZED</li>
<li>SUBJECTIVE/PARTIAL</li>
<li>NETWORK</li>
<li>NEO-TRIBAL</li>
<li>LOCALISM/STEADY-STATE</li>
<li>LOCALE/WATERSHED/REGION/WORLD</li>
<li>PARTICIPATIVE</li>
<li>RESTORATIVE/SUSTAINABLE</li>
<li>ENIGMATIC/HETERODOX</li>
</ol>
</a>
<p class="source">SOURCE: <a href="http://stoweboyd.com/post/49946797759/how-the-postnormal-era-will-change-everything" target="_blank">Stowe Boyd, How the Postnormal Era Will Change Everything</a></p>
</section>
</section>
<section class="sample" id="slogan">
<section class="text">
<a href="http://www.google.com/webfonts/specimen/Gravitas+One" title="Gravitas One">
<h1>Don&rsquo;t die</h1>
<h1>wondering</h1>
</a>
</section>
</section>
<section class="sample" id="darwin">
<section class="text">
<a href="http://www.google.com/webfonts/specimen/Old+Standard+TT" title="Old Standard TT">
<h1 class="small">On</h1>
<h1>the Origin of Species</h1>
<h1 class="small">By means of natural selection</h1>
<h2>By Charles Darwin, M.A.,</h2>
<h3>Fellow of the Royal, Geological, Linn&aelig;an, ETC., Societies;<br>Author of &lsquo;Journal of Researches During H.M.S. Beagle&rsquo;s Voyage Round the World.&rsquo;</h3>
<h4>The right of Translation is reserved.</h4>
</a>
</section>
</section>
<section class="sample" id="headline">
<section class="text">
<a href="http://www.google.com/webfonts/specimen/Abril+Fatface" title="Abril Fatface">
<h1>Meaning &amp;<br>Structure<br>in Design</h1>
</a>
</section>
</section>
<section class="sample" id="camus">
<section class="text">
<a href="http://www.google.com/webfonts/specimen/PT+Sans+Narrow" title="PT Sans Narrow">
<h1>Albert Camus Buried</h1>
</a>
<hr>
<a href="http://www.google.com/webfonts/specimen/PT+Sans" title="PT Sans">
<h2>Simple Ceremony Is Held for French Nobel Prize Author</h2>
</a>
<hr class="bottom">
<a href="http://www.google.com/webfonts/specimen/PT+Serif" title="PT Serif">
<p>PARIS, Jan. 6&mdash;Albert Camus, one of France&rsquo;s ranking writers and winner of a
Nobel Prize for Literature, was buried today in a cemetery not far from the country home
he recently bought in the village of Lourmarin in the south of France.</p>
<p>It was while motoring from Lourmarin to Paris last Monday that the Algerian-born writer
was killed when the car he was in went out of control and crashed into a tree at the side
of a highway, seventy-five miles southeast of Paris.</p>
</a>
</a>
</section>
</section>
</section>
Jump to Line
Something went wrong with that request. Please try again.