Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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?

share|improve this question
    
I'm sorry but I am lost in your post. Are the designers designing a website in photoshop or print designs and asking you to create something in relation to the print. I ask this because you state that the designs look good, but the end product they aren't happy with. Can you post an example? –  Matt Apr 21 '13 at 4:57
    
the designers create a psd file that has many layers/folders. Each layer depicts a particular page of a website. I receive the PSD file and code the HTML, CSS and Javascript to create webpages depicted in the PSD files. The designers are not happy with the quality of fonts that appear on the html pages I create. They complain that the fonts on the web are not as smooth, or the letter spacing needs be half a pixel smaller (not possible in CSS) etc... –  John Apr 21 '13 at 5:20
    
Well by your post no matter what font they use they are still going to adjust the kerning, tracking and leading which can't be modified yet in CSS. That said its not going to matter what fonts you suggest for them to use and have you communicated that back to them? –  Matt Apr 21 '13 at 20:39
    
I haven't communicated that back to them because some people have told me there are some fonts that are meant for the web, and others aren't. When i look at the fonts that were designed "for the web", I agree something about it makes it more ledgeable and pleasant. I dont understand the "science" behind what makes a font more suitable for the web, so i'm unable to articulate it to the client. –  John Apr 22 '13 at 13:36
1  
"The internet isn't made up of PhotoShop files". Sadly, many print designers refuse to believe that no matter how many times we explain it to them. –  DA01 May 2 at 22:08

4 Answers 4

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.

share|improve this answer
    
thanks, i'm only interested in the first issue, which is the font. I used sites like fonts.com and myfonts.com. But some fonts don't render nicely depending on which OS you're in. As example, the "Have a Nice Day Font" looks rougher in windows than mac. And then some fonts from myfonts.com that look great in photoshop, just look terrible on the web because we dont have enough control over hte tracking or line height, which a print designer is so use to having. So back to my original question..how to instruct print designers on the science of web font selection? –  John Apr 20 '13 at 14:26

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.

share|improve this answer

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)
share|improve this answer
1  
I wish I could take credit for it. I stole it from a mailing list circa 1998 or so. Still holds true, though! (if not more so given the 'responsive web') –  DA01 May 2 at 22:18

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.