Instructions to give a print designer looking to use non-system fonts for websites

Question

So we often run into print designers who choose all these crazy fonts that don't look good for the web.

As a backend web programmer, what do I tell print designers to help them select non-system fonts that will render well via CSS3 on the web? What is the checklist of requirements?

Or perhaps someone can show me some good blogs on this subject?

Additional Note: The biggest problem has been that these print designers make things that look amazing in photoshop. But as soon as we implement their designs into a website, they are not satisfied with how inconsistent and unpolished it looks depending on the browser and operating system you're using. Some fonts do a better job than another. What is the science behind selecting a font that works well across all browsers and operating systems?

Answer 1

You have a few separate issues here, first I would recommend pointing the designers towards either

http://www.fontsquirrel.com and http://www.google.com/fonts/

These sites container CC fonts that work perfectly on the web and are completely free to use, and there are instructions on the site on how to add them to your websites - as well as a download so they can be used in design applications.

Secondly I would recommend giving your designers a CSS framework template to work towards, something like bootstrap (there are many others choose your preference) would be good for this.

http://twitter.github.io/bootstrap/ - the framework itself

http://benstewart.net/2012/06/bootstrap-responsive-photoshop-templates/ - a psd template (this was a quick search there may be better ones available).

If you can get them to design using the grid you maybe able to achieve far closer results to their designs.

Answer 2

When I run into print designers that refused to understand the medium, I usually sit down and explain the difference:

In PhotoShop = you, the designer, get to dictate the design.

In HTML/CSS = you, the designer, merely get to suggest what it may be.

So the PSD is a great suggestion, you the developer will iplement that, but ultimately, it's up to every individual person, preference setting, web browser, computer screen, and operating system to decide how close it will adhere to your suggestion.

Beyond that, in general, things to consider for type on the web:

• for body-text, a typeface with a large x-height can make things a bit easier to read
• avoid setting type smaller than 11px (
• font-smoothing is dictated by the browser and OS. It will vary from machine to machine, browser to browser
• Web fonts can be great, but due to font smoothing issues in some situations, you may want to relegate their use to display faces (headlines)

Answer 3

In the past, popular system-standard fonts have been called "web-safe" fonts. It has been considered good practice by many in web design to stick to these. Why, do you ask? During the early days of the Internet, there wasn't really a standard font that one use that rendered across all the different platforms. However, there were fonts more likely to be a person's computer, like Arial, Helvetica, and Times New Roman.

But nowadays, things are a bit different. With modern browsers, it's now safe to use "web fonts," which a technique using a remote font file to render a specific font on a web page using @font-face, which give more creative freedom and flexibility when designing a web page. This is by no means a new concept, there has been at least partial support for it going back until at least IE 5.5.

@font-face has been formally included in the most recent version of W3C's CSS standards (CSS3, it was taken out of CSS2.1). The Google Fonts API offers a fast an easy way to render the fonts in their library instantly usable, by generating the code you need after picking the font you like.

@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body { font-family: 'Open Sans'; }

But that doesn't mean you can go wild with your web font choices. You should take steps to use a CSS font stack, to ensure that you gracefully degrade your text experience in case your chosen does not load.

body {font-family: "Open Sans", "Arial", "Helvetica", sans-serif; }

A CSS font stack should includes similar web-safe fonts, with the last declaration in the stack being a generic font family ("serif" or "san-serif"). What happens is if you browser can't find one font, it looks for the next one down the line.

But why is this important? After all using web-safe fonts and CSS font stacks seems dated especially since @font-face has great support across all the modern browsers.

There's a couple of reasons... one of them being the completeness of these fonts. Certain characters in your font chosen font might not available (this font lacks the ™ character.), when that happens, the browser will attempt to render the unavailable characters using the next font in your CSS font stack. If you don't have such a font stack, the browser's use your default standard font (you can set this is you browser settings). Why would this ever be a problem? Lets say you have a serif headline (like Times New Roman) in the aforementioned font and you browser default font is a san-serif font (like Arial). The mismatch between the two different style might not necessarily look good. You have no control of what a should have their default browser font, nor should you try to.

Another reason would be the internet itself. On occasion people internet goes down and so to the services on the Internet. These fonts you have are hosted on the internet. If the service hosting it does down, even it it's the best font in the world, it won't ever load, instead it'll use your browser's default standard -- unless you specify a web-safe font in your CSS font stack. I website can look drastically different if all of a sudden your intended font file isn't available, due to some sort of service interruption.

You can disable the downloading of web fonts client side via your browser. But why would you ever want to do this? This One of the most overlooked reason, performance. This is more desirable for users who have slow Internet connections for one reason or another. In most cases the way to do this on a browser is somewhat obfuscated. It might take 1.2 more seconds to load a font from Google's Font API, when the page would normally load in .011 seconds. While we take speed for granted, since fast broadband is readily available in most developed countries, it's important to ensure the visibility and consistency of your site's typography is not impacted to to the restriction of the user (accessibility option) or their platform (bandwidth, browser).

So in closing, what I'm trying to say is that, it's alright to use fonts that are not web-safe to make things look nice, but don't go all crazy and be reliant on them as not all users experiences are created equal (browsers my render fonts an default sizes differently depending on the browser and/or system setting, e.g., ClearType). You can't really tell a user how to use your site, but you can tell them how they can get the best experience. If they're unable to follow through may sure you adjust things accordingly so that they can still have a good experience. Things on the web aren't necessarily set in stone (or on ink and paper). The variable flexibility of the Internet lets users serve up content in a way that's most comfortable to them.

Answer 4

if i read that correctly, you want the most efficient techniques for rendering the font on the web. in that case, as already mentioned, go to fontsquirrel and use their @font-face syntax/format generator, it write @font-face declaration for you, although i edit mine, but more importantly, it creates copies of the desired font in other formats, targeting other browsers/platforms, effectively achieving what you desire.

that said: there are still very distinct differences in some versions of windows and using directx. i've also had piss poor font rending in chromme on win7 for awhile now. aside from chrome issue(s), most of these are case-by-case issues. there are a few css3 properties that have limited browser implementation, and typically the issues i'll see can be fixed by tinkering with these...

that said: google fonts, typekit, etc., have (some) optimization baked-in, to specifically deal with the cases i mentioned above...i'm not a huge fan of either, because the first rule of third-party dependencies is to avoid third-party dependencies. ;)
of course that is not realistic, but i do trim them as much as possible. i also like that rolling my own doesn't rely on javascript, as well as make extra http requests, and lastly, allows me to handpick through @font-face declaration, editing/trimming where i see fit.

Answer 5

1. You should explain to them that when it comes to websites, you cannot achieve 100% consistency across all the zillions of variables, you can only take whatever steps are within your power to achieve as much consistency as possible. The way DA01 puts it in their answer is a very succinct and easy way to get the message across.

2. I would then tell them to decide upon font-style/s first rather than a specific font.

3. Then, only after deciding on the style, look at the options available with a systematic approach from worst possible conditions to the ideal conditions.
   Start with basic system fonts (the 5 universally supported fonts) and work outwards. They could choose a few system fonts that are less widely supported and then a single ideal webfont. (You don't want to load and render lots of webfonts on one page as you probably know).

Don't approach talking about the task as if it is open to discussion, instead explain to them that it is their responsibility as a good designer to know and account for these things if they want to successfully design for the web.

---

There is another recent question that may be useful for you:

Is it acceptable to use different but similar typefaces for print content and web content?