Use commercially available webfont or redraw corporate typeface

[perrybrus]

I have this dilemma:

I'm about to re-design the corporate website, the corporate typeface that's been used as display typeface for print material and offline media for years is a custom product made back in the day. When I try to use that typeface as a webfont it looks "cracked" and jagged at certain sizes and alright at some resolutions. In other words not optimal. Since the administration at work is keen on stretching the visual guidelines from print to web I contacted the external type designer that said he could try to redraw it to make it look better at pixel sizes for web. When I browse rather large company websites out there I see that many of them don't use their classic corporate print typeface online but have chosen to use readymade webfonts from Google, FontSquirrel or similar, and they use some classic reliable screenfont as their bodytext typeface, like arial, open sans, verdana etc.

So what do? Is it becoming more common these days to actually use the good old corporate typeface also on web in terms of display fonts? Could the old trusted "print typeface" be redrawn to suit the needs and work from H1 to H8 for instance? Just to be clear, I'm talking about headlines / display typeface and not the body text in this case. I'm pretty sure I'm able to convince the CEO over here that using our printbased body type as a bodytxt online is a rather messy affair.

Appreciate any input on this!    

[Thomas Phinney]

Speaking as somebody who just spent the last five years of his life helping create and run a web font service, including curating its font library....

"Is it becoming more common these days to actually use the good old corporate typeface also on web in terms of display fonts?"

It is certainly becoming "more common." Precisely how common, I can't say, but more so. More importantly, it is the sensible thing to do, at least for display sizes. Today, everybody should be able to maintain a reasonably consistent visual identity across web and print.

"Could the old trusted "print typeface" be redrawn to suit the needs and work from H1 to H8 for instance?"

H8? How small is your H8?

Depending on how small you want to go, it may not need to be redrawn, unless it was badly crafted it in the first place, or it has very thin elements. Of course, there are a range of adjustments one could make... your "redrawn" might mean something less extreme than I am thinking.   

The minimum usable size for a web font depends on a bunch of things. Approximately:

- whether you are using mixed case or all caps (seeing as you are talking headings)

- the design itself (x-height, stroke weight, how thin the thins are, how open the apertures are, etc.)

- how well crafted it is in terms of proper outline construction, etc.

- how well hinted it is (for Windows and Android)

- what browsers and OS versions you care about the rendering on

"When I try to use that typeface as a webfont it looks "cracked" and jagged at certain sizes and alright at some resolutions."

I'm not sure what "cracked" means. You could post a screen shot showing both good and bad rendering, naming the px sizes used, and the browser and OS versions involved.

[perrybrus]

Hi,

Thanks for the response. In terms of lowest size for the display usage I'm thinking of somewhere around 12px. The typeface has three weights that spans from thin, light to medium. The latter is more like bold, and that's quite suitable in terms of online Headline usage. It's this weight that I'm measuring for web usage cause the other ones would look too weak. My initial plan was to use it in uppercase only, but I can't decide cause uppercase can act a bit too loud when used at H1, H2 measures of 24px and 21px. But lowercase can look a tad weak at 12 and 14 px for instance, and switching between upper and lowercase is not an option in my book. When I compare the corp. typeface with common Google webfonts like Oswald or Jockey One for instance, these two looks to be more "rigged" for screen viewing of course. It seems like my corporate typeface is close but no cigar.

I didn't quite get your take on using corp. print typeface online. Do you mean it's the sensible direction to walk, or did you mean using typefaces cross media is something more companies should do, but don't? I can't figure out what's best practice these days cause rather huge corporations don't convert their classic traditional typeface that they use in stationary and in ads, to online media. Many of them just pick one of the 700 (last time I checked) Google webfonts and separate between web and offline media.

When it comes to my audience the tech specs are mostly PC on Windows 7, although some are still on XP with that horrible ClearType Windows XP font rendering. How well hinted it is (for Windows and Android) is a very good question indeed. I'm not a typeface designer, nor a typographer, but I wouldn't hold my breath. After all, the typeface in hand is made in 2003 so my best guess would be that almost all the sans-serif fonts in the Google webfont library handles smallscreens better than "my font". When I use the word "cracked" I almost mean jagged or even blurry at times, it doesn't look that legible on certain web orientated sizes, so the webmaster that administrates the CMS have spent a lot of time trying find the exact sizes where the typeface looks alright. So I can't follow the basic principles best practice in terms of Headline sizes.

[Thomas Phinney]

Apologies for the belated reply. I think I need to tweak my forum settings to get replies to my posts forwarded to my email.

Do you mean it's the sensible direction to walk, or did you mean using typefaces cross media is something more companies should do, but don't?

The former was what I meant, but the latter is also true.

Your online sizes are on the small size in general. I mean, 12 px is something I would consider small for online body text, let alone a heading. Although in all caps and a bolder weight, it could be a heading, I suppose. I suggest people doing web site design start by trying body text at 14-16 px.

You could also consider just getting somebody expert in this area to take a look at your typeface and see what's up with it. It may be that just running it through ttfautohint would help. Or perhaps there are some underlying design issues that make a new typeface the best option....

I'd be happy to refer you to a colleague, or take a quick look myself.

T

[perrybrus]

Hi Thomas,

Since last I have asked the webmaster to include all the webfont formats like Embedded OpenType (EOT) and Web Open Font Format (WOFF ). After that the corporate font (in otf by the way) renders better at more sizes, as expected it looks more bold in Chrome on Windows but Chrome always seems to render webfonts more bold than Firefox, IE, Opera, Safari. Fascinated by this font compatibility issue I bought a book called Type on Screen by Ellen Lupton. In that book there are some visual comparison pages, mainly grabs from different browsers on a series of commercially attainable webfonts - and Chrome almost always renders the embedded webfont typefaces bold. I also observe that retina displays from Apple shows fonts better than most, it's like the legibility increases on those screens. Anyways, our corporate typeface looks better now with the inclusion of all the webfont formats. So, it seems like its capable of being the display font although it was never redrawn or anything specifically for web. I can still see that Google webfonts looks crisper than ours, so I guess for it to be 100% it needs to be drawn specifically as a web font, whatever that means in technical terms, but most users won't observe the difference I think.

I think you are right in terms of text size in general, the average pixel size is way larger now than back in the mid 90's where I remember I constantly used 11px Verdana for body on the average screen resolution of 800x600. Then when the average res. increased to 1024x768px I kept on setting type to Verdana 11px fixed as bodytext and that worked fine, until the break of the millennium when CSS became more supported and the use of em and relative font sizes could be used to a greater extent. I'm not that into the bits of markup like I used to be, but my perception is that the use of em is best practice. I just had a chat with a graphic designer about web font sizes and we agreed that the type size today has increased a whole lot on average. Back in let's say 1996-2001 using 19px for body text gave the page a naive and bulky look. However, I notice that some quite popular sites are hanging on to quite compact body text sizes today, news sites for instance. As a matter of fact this Adobe forum is an example of that. I am writing this in 10pt by the way, at least that's what the inline forum text editor says. I have no problem with that on a screen resolution of  1920x1200px. I also believe theres a portion of design fashion in this as well, I have noticed that readymade blogs have their own set of typeface size system going on, some have 23px for body text. Especially those whitelabel Wordpress blogs you can buy from the shelf so to speak. In terms of print I just finished a book where to my best judgment the main body type size was as small as 8 points, too small for my taste. I squinted all the way and I missed having the zoom functionality as this was on paper. Ironically it was a book about the history of graphic design called American Modernism.   I remember talking to a university teacher in graphic design that meant 9 points for any type on print was legible enough, almost no matter what the typeface is. I will agree that the difference between print and screen is quite large in terms of type size cause you can play more on print just to make a visual statement, but on screen I would focus more on readability and legibility over design fashion any day. And then we have the smallscreen issues etc as well. But that's another debate I guess.