small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

Still can’t get a UX job? Give up.

large_featuredImage

medium_featuredImage

small_featuredImage

thumbnail_featuredImage

Sticking to UI/UX trends is a losing strategy

<p><a href="https://design.tutsplus.com/articles/typography-the-anatomy-of-a-letter--cms-29828">medium bookmark / Raindrop.io</a> |  </p>
<p>Learn the basics of typography in this quick video!</p>
<p><em>The more we communicate, the closer we become. </em>Typography inspires us by reminding the world of a simpler time without connection. As designers and artists, we can carry that fascination into our work by studying the makeup of letters.</p>
<p>Start with the basics with this quick video below. Learn the anatomy of a letter.</p>
<p><iframe src="https://www.youtube.com/embed/NrBF-ebM4uE?rel=0" frameborder="0"></iframe> </p>
<h2>Common Typography Terms</h2>
<p>Familiarize yourself with these terms to get a better handle on typography.</p>
<h3>Baseline</h3>
<p>The invisible line letters rest on.</p>
<p><img alt="Baseline - Anatomy of a Letter" src="https://cms-assets.tutsplus.com/uploads/users/346/posts/29828/image/typography-anatomy1.png"></p>
<h3>Stem<br />
</h3>
<p>A single vertical stroke upwards to create letters like L or F. Connect one stem to another using a <strong>crossbar </strong>detail, like the letter H. </p>
<p><img alt="Stem and Crossbar - Anatomy of a Letter" src="https://cms-assets.tutsplus.com/uploads/users/346/posts/29828/image/typography-anatomy2.jpg"></p>
<h3>Ascender/Descender<br />
</h3>
<p>Letters with downward strokes that extend past the baseline have <strong>Descender</strong> strokes. Alternatively, if the stroke moves upward and away from the main body of the letter, we call that the <strong>Ascender </strong>stroke. </p>
<p><img alt="Ascender and Descender - Anatomy of a Letter" src="https://cms-assets.tutsplus.com/uploads/users/346/posts/29828/image/typography-anatomy3b.jpg"></p>
<h3>Upper/Lowercase Letters<br />
</h3>
<p><strong>Uppercase</strong> letters are capital letters. <strong>Lowercase</strong> letters are smaller ones. Use uppercase letters for names and places, and lowercase letters for casual settings and more readability.</p>
<p><img alt="Upper and Lowercase Letters" src="https://cms-assets.tutsplus.com/uploads/users/346/posts/29828/image/typography-anatomy4.jpg"></p>
<h3>X-Height<br />
</h3>
<p>For lowercase letters, the <strong>X-height</strong> is the main body of the letter.</p>
<p><img alt="X-height - Anatomy of a letter" src="https://cms-assets.tutsplus.com/uploads/users/346/posts/29828/image/typography-anatomy5b.jpg"></p>
<h3>Counters and Spine</h3>
<p>Fully or partially closed spaces found in letters like O, A, and B. If the letter isn&#8217;t fully closed, then it&#8217;s an <strong>Open Counter</strong>. </p>
<p><img alt="Counter and Ear - Anatomy of a letter" src="https://cms-assets.tutsplus.com/uploads/users/346/posts/29828/image/typography-anatomy6.jpg"></p>
<h3>Ear and Shoulder</h3>
<p>An<strong> Ear</strong> is a decorative detail that pokes out from letters like g. A <strong>Shoulder</strong> is a bumped curve seen in letters like m and n. </p>
<p><img alt="Ear and Shoulder - Anatomy of a Letter" src="https://cms-assets.tutsplus.com/uploads/users/346/posts/29828/image/typography-anatomy7.jpg"></p>
<h3>Serif vs. Sans Serif<br />
</h3>
<p>Serif types feature extended stroke details also known as feet. These details are missing in Sans Serif styles.</p>
<p><img alt="Serif Vs Sans Serif Typefaces" src="https://cms-assets.tutsplus.com/uploads/users/346/posts/29828/image/typography-anatomy8.jpg"></p>
<h2>Learn More About Typography<br />
</h2>
<p>Typography is an art form every designer can admire. Continue exploring your interest in typography to build your skills over time. </p>
<h3>Get Amazing Design Resources</h3>
<p>Want to create videos like this? Download the resources used in this video:</p>
<ul>
<li><a href="https://elements.envato.com/sweethart-font-MHFX2G">Sweethart Font</a></li>
<li>
<a href="https://elements.envato.com/blackboard-patterns-AAYG2C">Blackboard Patterns</a></li>
<li><a href="https://elements.envato.com/50-human-anatomy-line-icons-5ZZDKZ">50 Human Anatomy Line Icons</a></li>
<li><a href="https://elements.envato.com/beasty-fonts-UEHARK">Beasty Font</a></li>
</ul>
<p>Check out these tutorials to learn more from our experts:</p>
<ul>
<li><a href="http://design.tutsplus.com/articles/design-in-60-seconds-what-is-typography--cms-28305"><img src="https://cms-assets.tutsplus.com/uploads/users/346/posts/28305/preview_image/typo_pre.jpg" alt="typo_pre.jpg"></a>
<p><a href="http://design.tutsplus.com/articles/design-in-60-seconds-what-is-typography--cms-28305">Typography</a></p>
<p><a href="http://design.tutsplus.com/articles/design-in-60-seconds-what-is-typography--cms-28305"><br />
</a></p>
<p><a href="http://design.tutsplus.com/articles/design-in-60-seconds-what-is-typography--cms-28305">What Is Typography?</a></p>
<p><a href="http://design.tutsplus.com/articles/design-in-60-seconds-what-is-typography--cms-28305"><br />
</a></p>
<p><a href="http://design.tutsplus.com/articles/design-in-60-seconds-what-is-typography--cms-28305">Melody Nieves</a></p>
<p><a href="http://design.tutsplus.com/articles/design-in-60-seconds-what-is-typography--cms-28305"></a></li>
<li><a href="http://design.tutsplus.com/articles/5-typography-secrets-to-transform-your-designs--cms-27528"><img src="https://cms-assets.tutsplus.com/uploads/users/114/posts/27528/preview_image/Preview-image.jpg" alt="Preview-image.jpg"></a>
<p><a href="http://design.tutsplus.com/articles/5-typography-secrets-to-transform-your-designs--cms-27528">Typography</a></p>
<p><a href="http://design.tutsplus.com/articles/5-typography-secrets-to-transform-your-designs--cms-27528"><br />
</a></p>
<p><a href="http://design.tutsplus.com/articles/5-typography-secrets-to-transform-your-designs--cms-27528">5 Typography Secrets to Transform Your Designs</a></p>
<p><a href="http://design.tutsplus.com/articles/5-typography-secrets-to-transform-your-designs--cms-27528"><br />
</a></p>
<p><a href="http://design.tutsplus.com/articles/5-typography-secrets-to-transform-your-designs--cms-27528">Grace Fussell</a></p>
<p><a href="http://design.tutsplus.com/articles/5-typography-secrets-to-transform-your-designs--cms-27528"></a></li>
</ul>
<div><a href="https://design.tutsplus.com/articles/typography-the-anatomy-of-a-letter--cms-29828">https://design.tutsplus.com/articles/typography-the-anatomy-of-a-letter&#8211;cms-29828</a></div>


Typography: The Anatomy of a Letter

Typography: The Anatomy of a Letter

Top Stories