<p>Published on <a href="https://blog.prototypr.io/10-practical-steps-to-create-a-predictable-accessible-and-harmonious-typography-system-a-case-6c85d901bedd?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Priyanka Godbole </p>
<h3>10 practical steps to create a predictable, accessible and harmonious typography system (A case study)</h3>
<p>Have you wondered what exact process to follow while defining all your headers, body text and any secondary text styles? How do you determine how many type styles you need? How do you make sure all of these styles look harmonious to each other, and are predictable to use? How do you ensure this typographic system is accessibility compliant?</p>
<p>Here is a 10 step process of how I redefined the typographic system for Practice Fusion’s EHR (Electronic Health Record) product, making sure it is accessible and harmonious to a baseline grid. This new typographic system has just <strong>6 unique type styles </strong>— a massive reduction from the <strong>50+ type styles</strong> (which includes some color / font-weight variations too) in our old typographic system, making the usage rules very predictable for both designers and developers on team.</p>
<h3><strong>The beginning</strong></h3>
<ul>
<li>Our old typographic system had grown to be pretty huge (about 50+ type styles) over 3+ years — to the point that I, the designer, and a consumer of the system, did not know when to apply which type style. Other designers as well as developers faced the same problem; so you can imagine how that quickly translated to our UI looking inconsistent across product.</li>
<li>Also, our existing typographic system did not suggest line-heights for any of the type styles. That resulted in the UI developers assuming line-heights and supplementing it with extra margin values in an adhoc manner across the product. This led to data density and readability issues for our users.</li>
<li>We also had to get ready for meeting accessibility requirements for EHR certification. Our existing typographic system was not semantic (huge deal for accessibility). Having a semantic system is also helpful to have a consistent way of applying type rules.</li>
</ul>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*L907dDoreef9RNpHpECIBg.png">Old &amp; new typography systems (Note that I kept color variations for 13/20 outside of the typography system definition. 13/20 takes black color for most everything except when used as links (blue), error text (red), warning / alert text (orange), success text (green), placeholder text (gray). All headers are always black in color and they do not take any other font-weight variation than what has been specified.)</p>
<h4><strong>10 PRACTICAL STEPS</strong></h4>
<p>(Steps 1 &amp; 2 are relevant only if you are starting out with an existing typography system that needs to be redefined. If you are starting to build a typography system from the very beginning, start from step 3. Also, I have made an assumption here that you already know which typeface/s you need to use and so, I am not diving into how to choose typeface/s in this post.)</p>
<p>Here is a cheatsheet summarizing all 10 steps. I will explain each step in detail right after.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*pYfP1IHoHKEZVDXAcbfn4Q.png"></p>
<h3>Step 1: Audit product for semantic hierarchy</h3>
<p>I installed WAVE Chrome plugin and inspected the DOM outline for different pages in a test account (populated with mock data) of our product. This is what I found — we had h5 as the topmost header for many pages, followed by h3s in most cases. At times, we had no topmost header and directly started with h3s. On one page, we even had table headers as h6s. h1 was practically never used. It was quickly evident that semantic hierarchy was not accurate. Ideally, <a href="https://www.w3.org/TR/WCAG20-TECHS/G141.html">h1s should be followed by h2s followed by h3s and so on</a>, without skipping any levels.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*PREixObKJlLOLlEusBuBpA.png">WAVE tool exposes the DOM outline of pages from a test EHR account, populated with mock data.</p>
<h3>Step 2: Inspect visual hierarchy</h3>
<p>I wrote down in descending order all the existing type sizes &amp; corresponding font-weights. I chose to ignore the assigned header levels so I could focus on just the visual hierarchy. I made the following observations.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/727/1*BUJqO-eqXybhXkHGAUR0qA.png">Inspecting the visual hierarchy</p>
<h3>Step 3: Determine base font-size for body text</h3>
<p>I started with 13px body size because that’s what we currently have and it seemed to work well for our information dense EHR system. (Why change what works?) <a href="http://webaim.org/resources/designers/">Font size can vary based on the font chosen, but 10 point is usually a minimum</a> for accessibility. 10pt translates to 13px roughly.</p>
<h3>Step 4: Determine line-height that works for body font-size (Goldilocks approach)</h3>
<p>This is the phase where you will need to do lot of visual explorations. I started out with font-size: 13px and line-height: 16px (denoted in “font-size / line-height” format going forward) — because I wanted to see if I could use the popular 8pt baseline grid and choosing 16px as my line-height was one of the values that would allow me to use it. At this stage, line-height value as well as 8pt baseline grid are really hypotheses and through explorations, I can either refute or validate that it works.</p>
<p>16px line-height looked too tight. So I chose the next 8px increment and tested with line-height 24px. It looked too spaced out.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*91XD6iv2bXpiX6vq_UaEMA.png">Explorations (with mock data) using 13/16 and 13/24 (font-size / line-height format)</p>
<p>That meant, I had to find a value between 16 and 24. I chose to look at just even values — 18, 20, 22, as only those values are divisible by many numbers — which could act as spacing intervals. If I go with 18, it meant I needed to adopt 6pt baseline grid (since 18 is divisible by 6 and to maintain good vertical rhythm, all spacing should be proportional to line-height). Increments of 6 made spacing look tight for our information dense layouts; and with 18px line-height, descenders of first line felt slightly closed in to ascenders of second line.</p>
<p>I tried 20px as line-height. It looked almost perfect. 20 is a multiple of 4. This meant I was adopting a 4pt baseline grid. (As you will see later, I chose to use mostly multiples of 8 wherever possible as those provided a visually discernible interval. So, though I had more choices due to the 4pt baseline grid, I adopted mostly values allowed by 8pt baseline grid.)</p>
<p>I ruled out 22px for line-height — as it is not divisible by many numbers (only 2 &amp; 11). This way, I derived a line-height of 20px that worked with my base body text of 13px.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*_kgldiiBUAUQhLy7JAO4zQ.png">Explorations (with mock data) using 13/18 and 13/20 (font-size / line-height format)</p>
<p>This value of 13/20 was also perfectly aligning with one of the points stated in the <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-visual-presentation.html">WCAG Success Criterion 1.4.8</a>:</p>
<blockquote><p>Line spacing (leading) is at least space-and-a-half within paragraphs</p></blockquote>
<p>which translates to the following:</p>
<blockquote><p>body / base line-height = minimum 1.5 x body / base font-size</p></blockquote>
<p>13/20 provides a good line-height ratio of 1.538.</p>
<h3>Step 5: Pick a ratio for the modular scale such that you have enough number of harmonious usable values</h3>
<p>In order to derive other font-size values that are harmonious to each other, I used <a href="http://www.modularscale.com/">Tim Brown’s Modular scale</a>. The most important work here is to come up with a ratio that makes sense for your system. I used tips in <a href="https://8thlight.com/blog/billy-whited/2011/10/28/r-a-ela-tional-design.html#tips">this blog</a> and started thinking about what was an important number that could guarantee a good vertical rhythm for all font-sizes? I thought line-height (20px) was a good starting point. Line-height ratio in my case was 20/13 = 1.538. I checked if scale with this ratio worked for me. The scale felt too spread out. I cannot possibly have type as big as 112px, 73px, 48px etc for headers in my information dense layouts.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*RjCD4gQXo14WRe68od8H2Q.png">Modular scale at 1.538 ratio</p>
<p>I needed another ratio — a ratio which was much tighter, but which still had 20px on it. This would ensure vertical rhythm with my body line-height. I picked the major third ratio (1.25) and it gave me values which I could work with realistically. I rounded off font-size values to multiples of 4 where feasible — so it also seemed more predictable with my 4pt baseline grid. Thus, I derived following harmonious font-sizes which could work as my type scale: 40, 32, 24, 20, 16, 13, 11, 8px</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*DCyafCKoglaC4cU8KyxS1w.png">Modular scale at Major Third ratio (1.25)</p>
<h3>Step 6: Start with defining h1</h3>
<p>To ensure accessibility compliance, always start with h1. Ideally, never skip h1. This is an interpretation of the guideline from <a href="https://www.w3.org/TR/WCAG20-TECHS/G141">WCAG’s G.141 technique.</a></p>
<p>This is again a phase of visual explorations across multiple screens.</p>
<p>For our EHR, it meant unifying what h1 meant across different pages. On few of our pages, header that was supposed to be h1 was at 16px regular (coded as span) and on other pages, it was 32px light (coded as h5). I explored if I could use a single value that could be used as a h1 consistently across all pages.</p>
<p>I began to experiment with values greater than base body font-size (40px, 32px, 24px, 20px, 16px) derived from the previous step of type scale — starting with the biggest font-size value from that set — 40px for h1. 40px as h1 looked too big for the name of the patient. I tried the next value in the set — 32px. Again, 32px seemed too big for the name of the patient. The next value I tried was 24px regular and it worked really well for both scenarios.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ggyL9JKoWKTdYqBJMZlAAg.png">Making sure h1 looks the same all across the product</p>
<h3>Step 7: <strong>Determine how many header levels you need and values for each</strong></h3>
<p>With h1 defined, the rest of the work becomes much easier. First, determine how many headers you need by inspecting different layouts in your product. For Practice Fusion’s EHR, I could see that most layouts needed maximum 3 headers, but there were 2 very information-dense layouts that needed 2 more headers. I confirmed that none of the layouts in our EHR system needed more than 5 headers.</p>
<p>Having determined the number of headers, I just went 1 value below in my defined typographic scale for each consecutive header. If you realize that your typographic scale does not give you as many values, try a different typographic scale-ratio altogether.</p>
<p>Note that my h5 is same as my label or fieldset legend or table caption or column headers. That is because typically all the UI components like input fields / radio button set / checkbox set in form, or lists or tables on any page, are at the end of the hierarchy (referred by me as “leaf node”) and hold content in them. All of these leaf nodes could use label-like header which makes it very clear to the user that its the end of the information hierarchy.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*pkN0mEIT0x86FnKqhhJGHA.png">Defining all other header values using the Modular scale</p>
<h3>Step 8: Define line-heights for all font-sizes</h3>
<p>Line-heights across all font-sizes must be proportional to each other to create a good vertical rhythm. To accomplish this — one way is to use the same base line-height / base font-size ratio for deriving all other line-heights and use these calculated values as is (See step 2 below). The derived values, however, may not turn out to be multiples of the baseline grid number. This can make it hard to remember and deal with the line-height value while working on mock-ups. So the 2nd way to come up with line-heights is — to round of the derived line-heights to the nearest multiple of the baseline grid number. Wherever I saw 2 possible line-height values, I tested them out in multiple explorations to rule out 1 of the options.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*gwzAMCKlTojI7Wh6so51vA.png">Deriving line-heights for all headers</p>
<h3>Step 9: Determining font-weight for headers</h3>
<p>Hierarchy can also be clarified using font-weight. For determining what font-weight works for each header, I did visual explorations of different font-weights for each header and compared the stroke thickness.</p>
<p>Example 1–16px regular (for h3) looked similar to 13px regular in stroke thickness, and was hard to discern as a header in information dense layouts. To make it look like a header, I tried 16px semibold and it looked much better and readable.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*DJ9UoohfY-Z_n4-96fFWBg.png"></p>
<p>h1 as 24px light looked too unnoticeable and out of place from rest of the type hierarchy. h1 as 24px semibold looked too loud, placing too much importance on h1. h1 as 24px regular gave it equal stroke thickness as 20px Regular &amp; 16px semibold, and looked just right, fitting in seamlessly with rest of hierarchy.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Gpid7p9RaExuQgP-JiwOoA.png"></p>
<h3>Step 10: Think about DOM outline (top-down approach) to apply entire type system to any page</h3>
<p>DOM outline is critical for screen-readers to jump between content. Often when we have a secondary navigation system, the tabs act as headers for people who can see them. So, visually there is no need to have a separate header for the content of the tab. However, screen-readers do not treat navigation tab as a header and so explicitly specifying header in DOM makes sense.</p>
<p>Even if you are sure that none of your users use screen-reader, it is a good practice to have the DOM outline as meaningfully done as possible. And that is because, by writing the DOM outline, you are really applying header levels in a consistent top-down manner. Because of this approach, you are unlikely to skip any header levels and you end up following similar DOM outlining process across all pages in your product. This helps to bring visual consistency across entire product.</p>
<ul>
<li>In the below example, by hiding h2 for Summary, Profile, Encounter (06/06/2017), I made sure that h2 still exists in DOM. Since h2 is hidden (by using CSS technique like pushing it out of viewport with huge margin), it does not show up in UI as it is not needed.</li>
</ul>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*V89gEosJqGwakDxPfjhjLA.png"></p>
<h4>If you found this post helpful, keep an eye out for my upcoming posts on Spacing and Color systems.</h4>
<h3><strong>Useful articles / video for reference:</strong></h3>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fplayer.vimeo.com%2Fvideo%2F17079380&amp;url=https%3A%2F%2Fvimeo.com%2F17079380&#038;image=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F105593823_640.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=vimeo" width="640" height="360" frameborder="0"><a href="https://medium.com/media/ed15743b5d670a3ee57915a33bef0243/href">https://medium.com/media/ed15743b5d670a3ee57915a33bef0243/href</a></iframe></p>
<ul>
<li><a href="https://alistapart.com/article/more-meaningful-typography">More Meaningful Typography</a></li>
<li><a href="http://webtypography.net/3.1.1">Don&#8217;t compose without a scale | The Elements of Typographic Style Applied to the Web</a></li>
<li><a href="https://webdesign.tutsplus.com/articles/how-to-establish-a-modular-typographic-scale--webdesign-14927">How to Establish a Modular Typographic Scale</a></li>
<li><a href="https://medium.com/tradecraft-traction/harmonious-typography-and-grids-10da490a17d">Harmonious Typography and Grids</a></li>
<li><a href="https://www.smashingmagazine.com/2012/12/css-baseline-the-good-the-bad-and-the-ugly/">CSS Baseline: The Good, The Bad And The Ugly</a></li>
<li><a href="https://medium.com/@tbredin/a-jolly-web-typesetting-adventure-42948ab0d1dd">Web typography is broken. Here’s how we can fix it</a></li>
<li><a href="https://medium.com/written-in-code/aligning-type-to-baseline-the-right-way-using-sass-e258fce47a9b">Aligning type to baseline the right way using SASS</a></li>
<li><a href="https://www.smashingmagazine.com/2011/03/technical-web-typography-guidelines-and-techniques/">Technical Web Typography: Guidelines and Techniques</a></li>
<li><a href="https://webdesign.tutsplus.com/articles/setting-web-type-to-a-baseline-grid--webdesign-3414">Setting Web Type to a Baseline Grid</a></li>
<li><a href="https://24ways.org/2006/compose-to-a-vertical-rhythm/">Compose to a Vertical Rhythm</a></li>
</ul>
<p><iframe src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fupscri.be%2Ff51076%3Fas_embed%3Dtrue&amp;url=https%3A%2F%2Fupscri.be%2Ff51076%2F&#038;image=https%3A%2F%2Fupscri.be%2Fmedia%2Fform.jpg&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;type=text%2Fhtml&amp;schema=upscri" width="800" height="480" frameborder="0"><a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a></iframe><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=6c85d901bedd" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/10-practical-steps-to-create-a-predictable-accessible-and-harmonious-typography-system-a-case-6c85d901bedd">10 practical steps to create a predictable, accessible and harmonious typography system (A case…</a> was originally published in <a href="https://blog.prototypr.io">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


10 practical steps to create a predictable, accessible and harmonious typography system (A case…

10 practical steps to create a predictable, accessible and harmonious typography system (A case study)

Top Stories