Click me
Transcribed

Serif vs Sans: The Final Battle

Serif vs Sans: The Final Battle

Here’s a neat infographic that explains the differences between serif and sans serif fonts. You’ll learn when to use one over the other as well as examples and web usages


<div class='visually_embed' data-category='Other' rel='infographic'>
<img class='visually_embed_infographic' src='http://thumbnails.visually.netdna-cdn.com/serif-vs-sans-the-final-battle_512d49eaa7160_w587.png' rel='http://thumbnails.visually.netdna-cdn.com/serif-vs-sans-the-final-battle_512d49eaa7160.png' alt='Serif vs Sans: The Final Battle' />
<div class='visually_embed_bar'>
<span class='visually_embed_cycle'><span>by </span><a target='_blank' href='http://mostash.com?utm_source=visually_embed'>mostash</a>. <br/>Explore more <a href='http://visual.ly'>infographics</a> like this one on the web's largest information design community - <a href='http://visual.ly'>Visually</a>.</span>
</div>
<a id='visually_embed_view_more' target='_blank' href='http://visual.ly/serif-vs-sans-final-battle?utm_source=visually_embed'></a>
<link rel='stylesheet' type='text/css' href='http://visual.ly/embeder/style.css' />
<script type='text/javascript' src='http://visual.ly/embeder/embed.js'></script>
</div> SERIF SANS VS. THE FINAL B AITLE IN TYPOGRAPHY Serifs are the small lines tailing from Sans-serif is a typeface that the edges of letters and symbols, does not have the small separated into distinct units for a projecting features called typewriter or typsetter "serifs" at the end of strokes. Check out my sweet serifs! Modern, Minimal, Magnificent, I am Sans Sans serif fonts are better on the web Serif fonts are easier to read in printed works This is because the serif make the An important exception must be individual letters more distinctive and made for the web. Printed works easier for our brains to recognise generally have a resolution of at quickly. Without the serif, the brain has least 1,000 dots per inch; whereas, to spend longer identifying the letter computer monitors are typically around 100 dots per inch. because the shape is less distinctive. 1000 DPI 300 DPI 100 DPI Even Apple's much vaunted retina display is only around 300 dots per inch – much lower than print. You are unreadable in print! You are unreadable on screen! MayI suggest a compromise? CLASSIFICATION COPY COPY COPY Serifs are used to guide the horizontal “flow" of the eyes; Serifs are used to increase contrast Sans serif is better at small sizes because and spacing between different letters and improve identification the fonts survive reproduction and smearing because of their simple forms SERIF SANS Serifs are used to bind characters into cohesive 'word wholes Sans serif is typically used for EMPHASIS Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla consequat placerat molestie. Duis in metus consequat tellus vestibulum adipiscing. Vivamus mattis, tellus at posuere tincidunt, sem turpis porta nisl, rutrum volutpat purus metus ac erat. Fusce massa est, aliquam a egestas id. Sans serif is better for children learning to read since the simplicity of the letter shapes makes them more recognisable Serifs are used for body text because it is more legible and less likely to cause fatigue .A Two types of serif fonts: ORGANIC ADNATE A BLOCKY ABRUPT When sans-serif is blown up, the characters retain the general shapes. USE Look who's up top! I win! Sure, but who is more versatile? Point Sans. SERIF IN NORMAL BODY COPY AND USE SANS FOR S MALL TE X T The Times British newspaper Serif fonts traditional in the commissioned serif earliest printed books for older Times Roman readers have given way to 1982 sans-serif Arial on computer in 1931 for readability screens for younger viewers. EXAMPLES Old style Grotesque (The Adobe Garamond typeface, an (The Franklin Gothic typeface example of an old-style serif) (Grotesque)) Transitional Transitional (The Times New Roman typeface, an (The Helvetica typeface example of a transitional serif) (Neo-grotesque)) Modern Humanist (The Tahoma typeface (Humanist)) (The Bodoni typeface, an example of a modernserif) Slab Serif Geometric (The Rockwell typeface, an (The Futura typeface (Geometric)) example of a slabserif) WEB TYPEFACE USAGE GEORGIA ARIAL VERDANA TIMES NEW ROMAN HELVETICA BASKERVILLE LUCIDA GRANDE OTHER 40% SERIF 60% SANS MOST POPULAR TYPEFACES HEADING Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ante dolor, fringilla ac euismod et, hendrerit sed ipsum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur tincidunt ligula eget ligula convallis a mollis nibh luctus. Vestibulum vehicula erat vel risus pretium eget ultrices elit aliquam. Praesent sem nisi, ornare sit amet auctor id, facilisis in enim. Maecenas libero neque, placerat vel ullamcorper vitae, congue vel purus. Pellentesque tortor diam, consequat cursus sollicitudin sodales, venenatis quis dui. Nulla feugiat, nisl quis vehicula ultrices, nulla risus scelerisque odio, sit amet condimentum justo lorem condimentum nibh. Maecenas id erat non orci congue iaculis. Duis nec justo lacus, nec iaculis metus. Nunc faucibus sapien id eros porttitor tincidunt. Proin euismod lacus nec tellus suscipit sit amet pellentesque sapien pharetra. Vestibulum justo tortor, dapibus in vestibulum quis, varius eget magna. In ullamcorper lorem eu diam fermentum quis luctus felis pretium. Donec eu auctor dui. Nullam faucibus pulvinar dolor vitae tempus. Suspendisse potenti. Nam id lectus dolor. Integer auctor, tortor eu fringilla bibendum, dolor felis varius neque, quis vulputate enim diam et enim. Nam et nisl nunc, sit amet tempor justo. Integer eget augue diam. 34% SERIF 66% SANS IN CONCLUSION TYPE OF WORK PRINT WEB SERIF! SANS THE BEST FONT CHOICES ARE ONES WHERE READERS DO NOT NOTICE THE FONT BUT THE MESSAGE Created by UrbanFonts.com where you can find thousands of free fonts to download

Serif vs Sans: The Final Battle

shared by mostash on Feb 26
35,303 views
14 shares
7 comments
Here’s a neat infographic that explains the differences between serif and sans serif fonts. You’ll learn when to use one over the other as well as examples and web usages.

Category

Other
Did you work on this visual? Claim credit!

Get a Quote

Embed Code

For hosted site:

Click the code to copy

For wordpress.com:

Click the code to copy
Customize size