{"id":407,"date":"2017-07-17T16:35:21","date_gmt":"2017-07-17T16:35:21","guid":{"rendered":"https:\/\/www.embl.org\/about\/info\/communications\/?p=407"},"modified":"2021-10-11T11:56:07","modified_gmt":"2021-10-11T11:56:07","slug":"selecting-a-new-typeface-for-embl-fira","status":"publish","type":"post","link":"https:\/\/www.embl.org\/about\/info\/communications\/blog\/2017\/07\/selecting-a-new-typeface-for-embl-fira\/","title":{"rendered":"Selecting a new typeface for EMBL: Fira"},"content":{"rendered":"\n<p><em>[This blog post was penned by the entire team that took part in the <a href=\"https:\/\/www.embl.org\/about\/info\/communications\/blog\/2017\/06\/cd1-on-embls-brand\/\">first Corporate Design sprint<\/a>]<\/em><\/p>\n\n\n\n<p>We have been using Helvetica Neue as EMBL&#8217;s official typeface for some time now. We wanted to test whether this is the best and most sustainable choice for the organisation moving forward. There are few fonts as iconic as the Helvetica family, but it also comes with baggage:<br><br><strong>Too popular:<\/strong> Helvetica has been used everywhere from the New York Transit Authority, to American Airlines, to Lufthansa. It\u2019s so familiar and ubiquitous that it is somewhat voiceless and utilitarian. It adds no value to the EMBL brand.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p><strong>Licensing:<\/strong> Many computers come bundled with Helvetica. But not Helvetica Neue, so we\u2019ve had buy licenses to use it on our many print products, websites, and service websites. Using Helvetica Neue is expensive.<\/p>\n\n\n\n<p><strong>Readability:<\/strong> The different weights of Helvetica aren\u2019t the most successful when displaying on screen (not so shocking for a typeface from 1983). Similarities between letterforms (1, l, i, ll, for example), and low contrast between the stroke weights in each letterform, make readability a problem.<\/p>\n\n\n\n<p><strong>Browser woes:<\/strong> Helvetica Neue doesn\u2019t render well on Windows. Or screens for that matter. This was the driving decision for Apple to move away from Helvetica Neue on iOS to their own typeface, San Francisco.<\/p>\n\n\n\n<p><strong>Confusion between Helveticas:<\/strong>&nbsp;The many flavours Helvetica comes in causes confusion: Helvetica, Helvetica Neue, Helvetica Neue pro, Helvetica rounded&#8230;<\/p>\n\n\n\n<p>In short, we have a problem with our current typeface. It\u2019s not surprising, therefore, that an organic conversation began about what we need in a typeface. Here&#8217;s from the EMBL-EBI Web Guidelines Committee at the start of 2017:<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">Feeding back in some recent conversation at the January Web Guidelines Committee and with our colleagues at EMBL; want in future a font that has:\n \u2022 A variety of weights and styles (light, ultra-light, bold, italic, etc.)\n \u2022 Support for foreign characters (You guessed it: I'm looking at \u00fc). Also for non-Latin script, e.g. Greek, for scientific notations\n \u2022 Consistent rendering across the many devices\/browsers\n \u2022 Looks good at small sizes (so we can use it for data tables and visualisations)\n \u2022 Not too radical a deviation from Helvetica (using a serif as the primary font is likely not an option as it would blow up too many applications)\n \u2022 Huge bonus points for a liberal or open source license\n \u2022 Nice if the font has a little personality (Helvetica, for example, is very generic and does not make our \"brand\" more recognisable)\n harmonising with Helvetica (the font in the logo)\n \u2022 Bonus points for: working well in print, being a font family which offers sans serif and serif font styles and being a highly legible, scannable font<\/pre>\n\n\n\n<p>All of these are great criteria for guiding our choice. For us, the need for a typeface that could work across our content, whether in digital or print, was more than a bonus point &#8211; it&#8217;s one of our <a href=\"https:\/\/www.embl.org\/about\/info\/communications\/blog\/2017\/07\/our-design-principles\/\">design principles<\/a>.<\/p>\n\n\n\n<p>In this first design sprint we tested many fonts, but none really stuck. These include:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Roboto: <a href=\"https:\/\/fonts.google.com\/specimen\/Roboto\">https:\/\/fonts.google.com\/specimen\/Roboto<\/a><\/li><li>Raleway: <a href=\"https:\/\/fonts.google.com\/specimen\/Raleway\">https:\/\/fonts.google.com\/specimen\/Raleway<\/a><\/li><li>Lato:<a href=\"https:\/\/fonts.google.com\/specimen\/Lato\"> https:\/\/fonts.google.com\/specimen\/Lato<\/a><\/li><li>Calibri: <a href=\"http:\/\/www.identifont.com\/find?similar=calibri\">http:\/\/www.identifont.com\/find?similar=calibri<\/a><\/li><li>Open Sans: <a href=\"https:\/\/fonts.google.com\/specimen\/Open+Sans\">https:\/\/fonts.google.com\/specimen\/Open+Sans<\/a><\/li><li>Lucida: <a href=\"http:\/\/www.identifont.com\/find?similar=Lucida+sans\">http:\/\/www.identifont.com\/find?similar=Lucida+sans<br><\/a><br>We won\u2019t break down each of these, but in short they were all either too generic, a bit too rough, or lacked in weights.<\/li><\/ul>\n\n\n\n<p>An initial contender was the humanist font Ubuntu (<a href=\"http:\/\/font.ubuntu.com\/about\/\">http:\/\/font.ubuntu.com\/about\/<\/a>):<\/p>\n\n\n\n<div class=\"wp-block-image is-style-default\"><figure class=\"vf-figure  | vf-figure--align vf-figure--align-inline-start  \"><img decoding=\"async\" class=\"vf-figure__image\" src=\"https:\/\/www.embl.org\/about\/info\/communications\/wp-content\/uploads\/2017\/07\/sp-720-2.png\" alt=\"\" class=\"wp-image-228\"\/><\/figure><\/div>\n\n\n\n<p>Specimen from <a href=\"https:\/\/www.fontsquirrel.com\/fonts\/ubuntu\">https:\/\/www.fontsquirrel.com\/fonts\/ubuntu<\/a><\/p>\n\n\n\n<p>It\u2019s well designed and comes from London-based type foundry Dalton Maag. however the initially attractive curves and personality began to feel sour the more we used it and its readability in blocks of text became a growing concern.<\/p>\n\n\n\n<p>We also considered Noto, but again we found concerns here \u2014 so we decided to let the issue rest until Heidelberg and Cambridge teams could physically get together.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Getting serious<\/h3>\n\n\n\n<p>With the arrival of the Corporate Design Sprint in June, we not only had a chance for three EMBL designer-y types to get together in the same space:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Tabea Rauscher: Art Director, EMBL Heidelberg<\/li><li>Spencer Phillips: Senior Graphic Designer, EMBL-EBI Cambridge<\/li><li>Ken Hawkins: Web Design Architect, EMBL-EBI Cambridge<\/li><\/ul>\n\n\n\n<p>We also had a \u201dbonus\u201d consultant: Mark Boulton, a digital designer with typographic design experience.<\/p>\n\n\n\n<div class=\"wp-block-image is-style-default\"><figure class=\"vf-figure  | vf-figure--align vf-figure--align-inline-start  \"><img decoding=\"async\" class=\"vf-figure__image\" src=\"https:\/\/www.embl.org\/about\/info\/communications\/wp-content\/uploads\/2017\/07\/IMG_2427-1-1024x768.jpg\" alt=\"\" class=\"wp-image-229\"\/><\/figure><\/div>\n\n\n\n<p>We finally had a chance to share thoughts together, incorporate organisational needs and get some extra guidance\/inspiration thanks to Mark.<\/p>\n\n\n\n<p><em>Looking at superfamily fonts, serif fonts and sans and graphic along a x-axis of \u201cpersonality\u201d.<\/em><\/p>\n\n\n\n<div class=\"wp-block-image is-style-default\"><figure class=\"vf-figure  | vf-figure--align vf-figure--align-inline-start  \"><img decoding=\"async\" class=\"vf-figure__image\" src=\"https:\/\/www.embl.org\/about\/info\/communications\/wp-content\/uploads\/2017\/07\/FontAudit-1-1024x768.jpg\" alt=\"\" class=\"wp-image-230\"\/><\/figure><\/div>\n\n\n\n<p>In week two of our sprint went around more than a few times developing various grids and matrices:<br><br><em>We also tried to numerically assess what each offered.<\/em><\/p>\n\n\n\n<div class=\"wp-block-image is-style-default\"><figure class=\"vf-figure  | vf-figure--align vf-figure--align-inline-start  \"><img decoding=\"async\" class=\"vf-figure__image\" src=\"https:\/\/www.embl.org\/about\/info\/communications\/wp-content\/uploads\/2017\/07\/fira-1-1-928x1024.png\" alt=\"\" class=\"wp-image-231\"\/><\/figure><\/div>\n\n\n\n<p>Ultimately, it took Mark\u2019s suggestion and advocation of Fira Sans to finally tip the scales.<\/p>\n\n\n\n<p><em>Specimen from <a href=\"http:\/\/typographica.org\/typeface-reviews\/fira-sans\/\">http:\/\/typographica.org\/typeface-reviews\/fira-sans\/<\/a><\/em><\/p>\n\n\n\n<p>Fira Sans is an open license (SIL) font developed by Erik Spiekermann for Mozilla\u2019s now-defunct Firefox OS. Though a sans serif typeface, Fira\u2019s characterful letterforms were enough to convince us that we can sidestep the issue of finding a serif typeface with which to pair it with (for now, at least).<\/p>\n\n\n\n<p>After all, technically EMBL has no official serif typeface \u2013 although the Sentinel typeface has made inroads through a set of product guidelines that don&#8217;t align well with core brand guidelines.<\/p>\n\n\n\n<p><strong>So how does Fira measure up? Let\u2019s revisit our checklist:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>A variety of weights and styles (light, ultra-light, bold, italic, etc.:<br>Yes! 17<\/li><li>Support for foreign characters (You guessed it: I&#8217;m looking at \u00fc):<br>Yes. (Although it seems some Greek characters aren\u2019t so elegant)<\/li><li>Consistent rendering across the many devices\/browsers:<br>Yes. Designed with a mobile OS in mind.<\/li><li>Looks good at small sizes (so we can use it for data tables and visualisations): Yes.<\/li><li>Not too radical a deviation from Helvetica:<br>Yes. Fairly similar widths.<\/li><li>Liberal or open source license: Yep!<\/li><li>Nice if the typeface has a little personality:&nbsp;Yes. Slightly humanist and the Mozilla connection is a nice nod.<\/li><li>Harmonising with Helvetica (the typeface in the logo):&nbsp;Yesish. Initial signs say this should be ok, more testing is underway.<\/li><\/ul>\n\n\n\n<p><strong>Bonuses:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Versions available for web and desktop.<\/li><li>Also available on Google Docs.<\/li><li>Fira inline capitals share an x-height similar to non-cap phrases, which is great for readability WYFHALOA (when your field has a lot of acronyms)<\/li><li>Monospace and \u2018code\u2019 monospace available.<\/li><\/ul>\n\n\n\n<p>We\u2019re currently putting it through paces in print and online before we do further open testing. Until then: play with Fira <a href=\"https:\/\/carrois.com\/typefaces\/FiraSans\/#!layout=specimen\">here<\/a>.<\/p>\n\n\n\n<div class=\"wp-block-image is-style-default\"><figure class=\"vf-figure  | vf-figure--align vf-figure--align-inline-start  \"><img decoding=\"async\" class=\"vf-figure__image\" src=\"https:\/\/www.embl.org\/about\/info\/communications\/wp-content\/uploads\/2017\/07\/IMG_2429-e1500301378659-1024x769.jpg\" alt=\"\" class=\"wp-image-232\"\/><\/figure><\/div>\n\n\n\n<p>After a year or so of hand wringing and lack of direction, it\u2019s nice to have a single choice to test and asses. Fira: Success!<br><em>Tabea, Ken, Mark and Spencer all take in the sweet relief of making a choice.<\/em><\/p>\n\n\n\n<p>Photos are thanks to Tabea\u2019s documentation efforts.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[This blog post was penned by the entire team that took part in the first Corporate Design sprint] We have been using Helvetica Neue as EMBL&#8217;s official typeface for some time now. We wanted to test whether this is the best and most sustainable choice for the organisation moving forward. There&hellip;<\/p>\n","protected":false},"author":23,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1832,1],"tags":[468,458,473],"embl_taxonomy":[],"class_list":["post-407","post","type-post","status-publish","format-standard","hentry","category-digital","category-general","tag-brand","tag-design","tag-guidelines"],"acf":[],"embl_taxonomy_terms":[],"featured_image_src":"https:\/\/www.embl.org\/about\/info\/communications\/wp-includes\/images\/media\/default.svg","_links":{"self":[{"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/posts\/407","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/users\/23"}],"replies":[{"embeddable":true,"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/comments?post=407"}],"version-history":[{"count":2,"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/posts\/407\/revisions"}],"predecessor-version":[{"id":582,"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/posts\/407\/revisions\/582"}],"wp:attachment":[{"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/media?parent=407"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/categories?post=407"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/tags?post=407"},{"taxonomy":"embl_taxonomy","embeddable":true,"href":"https:\/\/www.embl.org\/about\/info\/communications\/wp-json\/wp\/v2\/embl_taxonomy?post=407"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}