Web Typography for Traditional Graphic Designers

Web Typography For Designers (CSS Tips)

If you’re anything like me, you were trained as a traditional graphic designer. You either went to school, or you independently studied graphic design. You learned typography and how the perfect type in your designs. Many traditional graphic designers have transitioned over to web design as well. Just because you transition from print design to web design, or add it to your repertoire, doesn’t mean that your typography has to suck. You can adjust type for the web, too. The terminology is different, but the outcome is roughly the same. In this post, will discuss web typography for traditional graphic designers.

Leading

We all know that leading in graphic design terminology, is the space between each line of type. On the web, you have the same principle, but it’s called line-height. You can determine this amount in pixels or ems. The objective is still the same. Your main goal is to give each line of text enough breathing room so that it is easy to read. Just like on paper, when lines of text are too close together, you can accidentally reread a line which messes up your flow. I usually set the line height to 1.5, which gives me just enough space in between each line of text.

Kerning

Kerning on the web is a little bit trickier. There really isn’t a way to adjust the spacing between two letters specifically in a website. Don’t be discouraged, you can optimize your text for maximum legibility. Many browsers allow this feature to be rendered using CSS. However, you have to specify this in your stylesheet. Also, when you do this, you’ll need to use vendor prefixes. You can see how to do this in the example below:

p {   text-rendering: optimizeLegibility;

font-feature-settings: “kern”;

-webkit-font-feature-settings: “kern”;

-moz-font-feature-settings: “kern”;

-moz-font-feature-settings: “kern=1”; }

The black sheep of the group is chrome for windows machines. It doesn’t support kerning your text at all. This means that your text won’t be optimized for legibility in chrome.

Tracking

If kerning means that you determine the space between two letters, tracking as when you specify the space between all letters in a set of text. This can be handled in CSS by using the letter-spacing style. The letter-spacing style allows you t globally control a block of text. Honestly this isn’t the most optimal way of handling text on the web. The reason is because it is a uniform spacing command. You specify the amounts in pixels, which means that some letters end up closer in appearance to each other than others. I prefer optimizeLegibility much better, even if it is a newer concept. I think it shows much more promise and flexibility. It also handles ligatures, too.

Adjusting Type Manually on the Web

Okay, so I bet you’re saying “that’s nice, but it doesn’t give me a lot of flexibility or options. I hear you, but I have a much nicer solution that I think will make you much happier. It’s called Kern.js and it allows you to use a bookmarklet to manually adjust type on the web in your browser.

web typography: Lettering.js

What I love about this solution is that you can adjust individual letters and perfect them visually. Then, kern.js outputs the CSS to make it happen. Then, you have lovely, CSS-based kerned text. The CSS will look like the following:

#webexample .char1 { margin-left: -0.033em; }
#webexample .char2 { margin-left: 0.093em; }
#webexample .char3 { margin-left: 0.093em; }
#webexample .char4 { margin-left: 0.056em; }
#webexample .char6 { margin-left: 0.037em; }

#webexample .char7 { margin-left: 0.037em; }

Web Typography: Kern.js

Just make sure lettering.js is enabled on your site, and now you have some beautiful web typography with a little bit of javascript, and finely tuned CSS. What I especially like about how kern.js works is that when you are done, you can copy the CSS and paste it directly into your own stylesheet. On top of that, when you finalize your adjustments, you can choose whether it is output as pixels or ems.

Conclusion

Web typography has come a long way from what it used to be. We used to only have the ability to use images for creative text. Then, we can up with creative CSS and it got a little better. Now, we are working on fine-tuning our sites to kern our type manually, and exporting the CSS. This takes out the trial and error of web typography and makes it more visual. What do you think about web typography, and the use of lettering.js and kern.js? Feel free to leave your thoughts or questions in the comments section below.