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

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<p><a href="https://builttoadapt.io/8-point-grid-vertical-rhythm-90d05ad95032">medium bookmark / Raindrop.io</a> |  </p>
<div>
<div>
<div>
<div>
<div><a href="https://builttoadapt.io/@Elliotdahl?source=post_header_lockup"><img src="https://cdn-images-1.medium.com/fit/c/120/120/1*rrrWuyapNIB72faNOq9rug.png" alt="Go to the profile of Elliot Dahl"></a></div>
<div>
<div><a href="https://builttoadapt.io/@Elliotdahl?source=post_header_lockup">Elliot Dahl</a></div>
<p>San Francisco based artist and designer. http://elliotdahl.com/</p>
<p>Oct 10</p>
</div>
</div>
</div>
</div>
</div>
<div>
<div>
<div>
<div>
<div>
<div><img src="https://cdn-images-1.medium.com/max/2000/1*sCh2dv4mhn-xqjWB3d4Tuw.gif" alt="1*sCh2dv4mhn-xqjWB3d4Tuw.gif"></div>
</div>
</div>
<div>
<p>The 8-point grid is a powerful system for creating consistent and visually appealing user interfaces (UIs). This post is about how to establish vertical rhythm and set typography in an 8pt grid system. To get caught up, check out <a href="https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632">The Intro to 8-Point Grid Systems</a> and get tricky with <a href="https://builttoadapt.io/8-point-grid-borders-and-layouts-e91eb97f5091">8-Point Grid: Borders and Layouts</a>.</p>
<h4>What is vertical rhythm and why is it so important?</h4>
<p>Rhythm is achieved when the elements of your design are organized into repeatable patterns. This allows your final design to look deliberate, professional, and consistent.</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*FPAqmGEPiWa-bh3A6tJ1gA.png" alt="1*FPAqmGEPiWa-bh3A6tJ1gA.png"></div>
</div>
<p>Applying that repetitive spacing to our designs creates a familiar and predictable experience. Zell Liew’s article about <a href="https://zellwk.com/blog/why-vertical-rhythms/">why vertical rhythm is so important</a> describes this excellently.</p>
<blockquote><p><em>“Repetition breeds familiarity. It has the ability to make things feel as if they belong together. It gives the feeling that someone has thought it all out, like it’s part of the plan.”</em></p></blockquote>
<blockquote><p><em>— </em><a href="https://zellwk.com/blog/why-vertical-rhythms/"><em>Zell Liew</em></a></p></blockquote>
<h4><strong>What is a baseline grid?</strong></h4>
<p>You’ll often hear the term baseline grid thrown around in relation to achieving vertical rhythm. A baseline grid allows us to track the vertical distances between type and other objects in a design, and I highly recommend using one to achieve a consistent vertical rhythm. However, remember that native mobile experiences and web browsers measure typography in slightly different ways. This can lead to some confusion for designers and developers depending on the design tools and platform.</p>
<h4><strong>How do you measure by baseline?</strong></h4>
<p>The baseline is where the letters rest. This is a common term in print design and many classic design programs are tailored for it. Native application experiences are generally built off of the baseline.</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*miIWEoPPTJ_v-TwsVhiCMQ.png" alt="1*miIWEoPPTJ_v-TwsVhiCMQ.png"></div>
</div>
<p>The measurement of space from baseline to baseline in a body of text is called <strong>leading</strong>. Many design programs will have this as a setting for your typography (Photoshop, Illustrator, InDesign).</p>
<h4><strong>How do you measure line-height?</strong></h4>
<p>The line height is the bounding box created around your text on the web or in design programs like Sketch or Figma. In CSS the <code>line-height</code> property can be given a pixel size, ratio, or a percentage.</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*PpVJH5chwQ_vO6rOlO0y_w.png" alt="1*PpVJH5chwQ_vO6rOlO0y_w.png"></div>
</div>
<p>In the example above, the right paragraph has a <code>font-size</code> of 16px and the <code>line-height</code> value could be written as 24px, 1.5, or 150% in CSS.</p>
<h4><strong>If typography can be measured two different ways which one do I use?</strong></h4>
<p>We’ve established that native and web environments are going to measure typography differently and some folks will have opinions about which way is the right way. Both are valid for their own reasons. There are three approaches from here:</p>
<ol>
<li><strong>Measure everything by the baseline.<br /></strong>Your native apps already have this ability. But getting a web browser to measure from the baseline will be tricky. You’ll have to design based on the baseline and then use highly specific spacings to get your content to line up. This will become difficult to maintain and I would not recommend it for large design systems with a lot of surface area. If you want to read more on this approach, <a href="https://www.smashingmagazine.com/2012/12/css-baseline-the-good-the-bad-and-the-ugly/">Smashing Magazine has a great article</a> about it.</li>
<li><strong>Measure everything by the line height.</strong><br />This is the web browser’s natural state. Native apps can measure by this method too, although some would argue that it is not as sharp — and the whole point of building native is to offer a higher quality experience.</li>
<li><strong>Allow web and native environments to do their thing.</strong><br />Be conscientious of the fact that different platforms will want different type of measurements. Roll with it. Shoot for achieving sustainable consistency instead of scrutinizing pixel differences.</li>
</ol>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*8RbnybSu_2S1qrwoemOEXA.png" alt="1*8RbnybSu_2S1qrwoemOEXA.png"></div>
</div>
<h4><strong>Choosing your approach</strong></h4>
<p>This is a decision you’ll need to make for your company and/or product based on your constraints and goals. The scale of your web experiences vs. the scale of your native experiences, the number of contributors, and core competencies of the team should be factored into this decision. The larger the team size, the harder it is to pass specific context and follow rules.</p>
<blockquote><p>How can you reduce the number of decisions your team has to make?</p></blockquote>
<p>Keep in mind that a consistent system for thinking about typography measurements will always be better than none. You can always iterate on the system but wrangling one-off decisions will be costly.</p>
<blockquote><p>“Achieving consistent vertical rhythm is the most important part of the design” — <a href="https://twitter.com/_bklmn">Joel Beukelman</a></p></blockquote>
<h4><strong>Creating Vertical Rhythm</strong></h4>
<p>Using the 8pt grid to space the height of your elements into consistent patterns is a great place to start creating vertical rhythm. Anthony Collurafici’s original post <a href="https://medium.com/sketch-app-sources/8-point-soft-grids-in-sketch-e8f1d5ca2cd4">about 8-point soft grids</a> does a really good job of explaining a system of laying out blocks of content in Sketch. He also points out the <a href="https://material.io/guidelines/layout/metrics-keylines.html">Google Material Metrics &amp; Keylines docs</a> has some great visual examples.</p>
<div>
<div><img src="https://cdn-images-1.medium.com/max/1600/1*KOHEb3vanqIEvUbReRTc8A.png" alt="1*KOHEb3vanqIEvUbReRTc8A.png"></div>
</div>
<p>Image From <a href="https://material.io/guidelines/layout/metrics-keylines.html">Material Metrics &amp; Keylines</a></p>
<p>One common question I get relating to 8pt grid is how I setup my grids in Sketch or Illustrator. Truth is, I don’t usually use those features when I’m laying out my UI elements. I’m generally a fan of soft grid layouts and respecting the code as a source of truth. I will use spacing elements in my files to help layout a baseline grid but I generally just measure element to element. I use the 8pt grid as a relative spacial system, not a strict grid.</p>
<h4><strong>Additional Reading:</strong></h4>
<p>These are some of the articles and resources that helped me answer a few tough questions.</p>
<ul>
<li>Zell Liew’s <a href="https://zellwk.com/blog/why-vertical-rhythms/">Why is Vertical Rhythm an Important Typography Practice?</a></li>
<li>Wilson Miner’s <a href="https://alistapart.com/article/settingtypeontheweb">Setting Type on the Web to a Baseline Grid</a></li>
<li>Priyanka Godbole’s <a href="https://blog.prototypr.io/a-framework-for-creating-a-predictable-and-harmonious-spacing-system-8eee8aaf773c">A framework for creating a predictable &amp; harmonious spacing system for faster design-dev handoff</a></li>
<li>Anthony Collurafici’s <a href="https://medium.com/sketch-app-sources/8-point-soft-grids-in-sketch-e8f1d5ca2cd4">Sketch Workflow — 8-point Soft Grids</a></li>
<li>Google’s Material Design <a href="https://material.io/guidelines/layout/metrics-keylines.html">Guidelines about Metrics &amp; Keylines</a></li>
<li>Vincent De Oliveira’s <a href="https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align">Deep dive CSS: font metrics, line-height and vertical-align</a></li>
<li>Leigh Taylor — <a href="https://www.behance.net/gallery/21817975/The-Grid-Website-%28Free-PSDs%29">The Grid: Website</a> post has a PSD you can download for examples</li>
</ul>
<h4><strong>Questions or comments?</strong></h4>
<p>Thanks for reading, if you have any other links or tips on how you create and maintain a vertical rhythm, share them in a response or hit me up on <a href="https://twitter.com/elliotdahl">Twitter</a>.</p>
</div>
</div>
</div>
<div>
<hr>
<div>
<div>
<div><a href="http://builttoadapt.io/"><img src="https://cdn-images-1.medium.com/max/1600/1*13q4iSDaumnCYe5F9BFvlw.png" alt="1*13q4iSDaumnCYe5F9BFvlw.png"></a></div>
<p><em>Change is the only constant, so individuals, institutions, and businesses must be </em><a href="http://builttoadapt.io/"><em>Built to Adapt</em></a><em>. At</em> <a href="http://pivotal.io/"><em>Pivotal</em></a><em>, we believe change should be expected, embraced and incorporated continuously through development and innovation, because good software is never finished.</em></p>
<div><a href="http://pivotal.io/"></a></p>
<div><a href="http://pivotal.io/"><img src="https://cdn-images-1.medium.com/max/1600/1*JzuiLoV2xGJSK4mJS5YDVA.png" alt="1*JzuiLoV2xGJSK4mJS5YDVA.png"></a></div>
<p><a href="http://pivotal.io/"></a></div>
</div>
</div>
</div>
</div>
<div><a href="https://builttoadapt.io/8-point-grid-vertical-rhythm-90d05ad95032">https://builttoadapt.io/8-point-grid-vertical-rhythm-90d05ad95032</a></div>


8-Point Grid: Vertical Rhythm

8-Point Grid: Vertical Rhythm

Top Stories