Working with web typography: A developer’s perspective

There is a reason why designers labor over little design details. And that is because it is the little details that make designs more appealing and captivating. One of these little design details is typography and its application. Now while Joe Regular might not necessarily associate typography with design beyond the selection of typefaces that represent the brand being worked on, it is in my opinion one of the most important aspects of a design because not only can it change how people perceive your brand as I will elaborate on, but because people visit your site for content which in most cases will be blocks of text put together to tell a story. Additionally content/text, as a product of typographical decisions, has a lot of implications on what the final look of a design is. But as important as I think it might be, it also one of the most overlooked in my opinion. This post is a highlight of some of the basics of typography that I, as a developer, think both young and seasoned designers need to understand when working with type on the web.

Selecting Web Fonts

The explosion of mobile devices from a variety of vendors has not only changed how we approach design and development for different screens, it has also fundamentally changed how we should approach the issue of typography. That is because what we used to call “web safe fonts” do not exist anymore, especially in the mobile space. To fully grasp the implications of this, take a look at Tiny Type, a reference chart courtesy of Jordan Moore that shows the default fonts installed on various mobile operating systems.

Now lets assume a site is designed with Helvetica as the typefaces of choice. The typical font stack defined in CSS would be something along the lines of:

font-family: helvetica, arial, sans-serif;

All is great, right? Not quite. Go back to Tiny Type and take a look at the Android column on Tiny Type. There are only 4 default fonts on Android. Which means that if your brand relies on having Helvetica or its close sibling Arial as default typefaces, then you are out of luck on the Android platform, and your brand could be perceived as something completely different from what you may have in mind. So the only way to have consistent typography across all platforms today is through web font services.

Google Fonts showing the impact of selected fonts on Page Load time

There are a lot of sites out there that now utilize web font services such as Adobe Typekit and Google Fonts, but as always there is a cautionary tale when it comes to goodies like these. Web fonts come with performance implications, and as such it is important to think about what you really need for your site before adding each and every weight of a typeface you come across. The general rule of thumb is the fewer the number of fonts used, the better.

Something else worth considering is the quality of work from the font foundries you get your fonts from. Well designed typefaces are a work of an art, with the designers paying attention to little details that you as a user may not even notice. Things like kerning, leading, and tracking. Poorly designed fonts will show their true nature once they are actually on a site, and this could eventually influence how your service or work is perceived.

Creating vertical rhythm

When we talk about grid systems especially as designers or developers, the first thing that comes to mind is frameworks like Bootstrap and 960 Grid System, among others. These frameworks are used to create structural balance for our designs. The majority (if not all) of these frameworks however, account only for the horizontal axis in that they consist of vertical columns and gutters that span the width of the screen. But if we are truly to create “pleasing to look at” design compositions then we should also be accounting for vertical spacing through the use of baseline grids.

The baseline grid is a technique used to better your web-based typography. Essentially, it aligns all your text to a vertical grid where the bottom of each letter is positioned onto the grid, just like writing on lined paper. The end result is a body of text perfectly organized, with a subconscious recognition of balance and congruity.
- Connor Turnbull

Now this is definitely not a new idea - it’s a basic design principle originating from the print world now applied in digital design. Creating a baseline grid prevents situations where vertical spacing is arbitrarily applied and also makes the maintenance of CSS a whole lot easier for front-end developers.

Design mockup that includes a column grid as well as a vertical baseline

The hows of creating vertical rhythm have been well covered by the likes of Richard Rutter (Compose to a Vertical Rhythm, The Elements of Typographic Style applied to the Web), Harry Roberts (Technical Web Typography), and Espen Brunborg (CSS Baseline: The Good, The Bad and The Ugly) so I’m not going to go into that. The takeaway here is that some of these nitty gritty details can and should be worked out way ahead of time before a design is fully blown out. Different browsers and platforms render text and its inherent values differently, so it is really important for designers to see how typefaces behave in real environments as it will likely have an impact on the direction some features take. This is as simple as the design and development duo sitting together and whipping out a living typographical prototype of sorts that will then serve as a foundation for the design as a whole (think Style Tiles) and inform both the design and development aspects of the website.

Create a responsive typography scale

I’d like to believe that most new website projects are responsive in nature, especially because we are now contending with different mediums in which our content is consumed. So in an effort to make consumption of our content easier on the myriad of devices, it is important to create a scale that defines the size of text on different sized devices.

Responsive Type Scale by Jason Pamental (@jpamental)

Just like the vertical rhythm exercise, this is something that can and should be done in advance, and be a part of the style guide/tiles. This makes for a more efficient design and development process and leads to better thought-out and maintainable CSS. For more details on how to go about this, refer to Jason Pamental’s excellent article titled A More Modern Scale for Web Typography and Christopher Murphy’s Contrast Through Scale article. Trent Walton has also written an excellent article on how to work with fluid type on the web and work through determining line measure.

Managing content

Designing for a site that will be managed via a content management system (CMS) is one of the biggest challenges that I’ve come across when building websites. Compounding the issue is the fact that one also has to account for different ways different CMSs handle content. The intricacies of a CMS is something that designers need to be made aware of from the get go. If you find yourself having to design a site that will be managed in a CMS, it is vital to first understand how it works before doing anything.

Adobe CQ5 CMS Content Editing screen

Before going into wireframes, let alone design, get the entire project team in a room and play around with an installation of the CMS you will be designing for. Have the back-end developer explain the limitations of the system and provide guidance to the designers and front-end developers on how to approach the layout and coding of the site. This is a lesson I personally learned the hard way when developing for a system I was unfamiliar with.

Some of the common challenges when working with CMSs include things like content within fixed height containers, localization, and the biggest unknown — the content editor. The most common solution to these issues tends to be setting character counts for certain content areas, but I personally believe that while there are good intentions behind this, it is in itself a poor practice. Not only does it not solve the localization issue, but it also affects the tone and message you’re trying to get across to your audience because of the limited verbiage available. The best approach in these situations is to design (and develop) defensively to account for scenarios you may never think of. While this might in some cases imply simplification of designs, it is better to retain the integrity of a design rather than have a visibly broken design.

The Low Hanging Fruit

Last but not least there’s the small fish issues that developers will come across in psd files that needs revisiting every so often. The Photoshop Etiquette is in my opinion the leading resource that every conscientious designer needs to bookmark. I will just add a few things that are worth noting.

Skip the faux bold setting. This cannot be accomplished using CSS. You either get bold or you don’t get bold. Use the appropriate weights for the web font you are working with to achieve the look you’re going for, but don’t do so blindly. Consider the performance implications of adding extra fonts, especially if they are used minimally across the entire site.

Pay attention to anti-aliasing of text. This goes back to my discussion on testing typefaces in real environments. Most Photoshop files I’ve come across have the anti-aliasing method setting set to “smooth” as it looks the best when viewing the design mockup. But in reality, the “strong” setting is closer to what will actually be rendered on the screen, and this varies from browser to browser and platforms (Mac vs. PC). Test, test, and test in an actual browser.

Reconsider the use of tracking. Achieving letter-spacing (also referred to as tracking) between characters in a design file is pretty easy, and Photoshop allows you to set any value you so desire. But when it comes to translating this to CSS however, things get really dicey.

First and foremost, getting a pixel (or em value) for the corresponding Photoshop tracking value involves using a mathematical formula to convert values. In some situations, the resulting pixel value computed by the browser will result in no change once implemented in CSS. In those cases where the browser computed values are less than 1 but greater than 0, you will either see a rounding up on the value, or no change in presentation.

Comparison of Firefox and Photoshop letter-spacing by Justin Marsan

The second issue is that different browsers render the same tracking value differently so you will end up with different results on different browsers. Justin Marsan has put together an excellent resource on the subject of letter-spacing and I’d recommend taking a look at his post and the subsequent demos from his research on this to fully understand the inconsistent rendering of letter-spacing across browsers.

Lead Front-End Engineer working on Design Systems at Sabre.

Lead Front-End Engineer working on Design Systems at Sabre.