Creating High Quality Cards - Fonts Revisited

[Xorlof]

Back in 2007, @GreyOwl scanned some cards and twiddled with options to try to determine what were the correct font settings for cards. I haven't found any updates around here to those specificatons--perhaps there are, but thought it would be good to do an independent investigation using the higher quality Wave 9 images Hasbro released in 2009, instead of scans. Why? It should result in more accurate results, and using the best specs you can find will result in much better (and more authentic) looking cards. It's kind of a big deal. Really.

Lots of notes are in spoilers because I can't help myself. Feel free to skip any of them. They're mostly unnecessary detail. Follow these specs and your cards will look better than using selecting fonts, weights, and sizes that are just somewhat close (e.g., Arial Narrow and such). Exact placement matters too but I haven't documented that here.

Spoiler Alert!

My specs differ from GreyOwl's findings in many details, probably due to both changes in the card templates that Hasbro used and imprecision inherit in his process. Even though he appears to have been meticulous, he had to use scans of prints that used a halftone offset press technique. That means those scans will have some "sloppiness" in the image and require some judgement calls. (Take a magnifying glass to a Heroscape card to see what I mean).

Unlike the cards GreyOwl examined, I found no evidence of fonts being stretched for W9. Some areas did have the letter spacing expanded or condensed, which some call kerning. In those cases, in the specs below, + means expand and - means contract.

Wave 9 Text Specifications
I think all waves after W9 appear to use these same specs, but haven't examined them in detail. Sizes and spacings accurate to about 1/200th of an inch.

Figure name
Helvetica Neue Heavy Condensed (87). 10.25pt. White (#FFFFFF). All caps. For multi-line names, line spacing is 1.03 (?). One card in W9 had too long of a name (Axegrinders) and the size was dropped to 9.6pt.

Faction/General Name
Helvetica Neue Medium Condensed (67). 7.0pt. #FFFFFF. All caps.

Left Box (Species, Class, Personality, Unique/Common, Hero/Squad)
Helvetica Neue Bold Condensed (77). 7.0pt. #FFFFFF. All caps. Letter spacing is typically natural, but is condensed as needed to fit the text. "COMMON SQUAD" for example, uses about a -0.18pt spacing.

Size and Height
Helvetica Neue Bold Condensed (77). 10.0pt. #FFFFFF. All caps.

Spoiler Alert!

Note that on older cards Size/Height were not white (instead using the same slightly grayish color that the Move/Range/Attack/Defense text uses) but going back to at least SotM, this was switched to pure white to match the rest of the text in this left portion of the card. The 2010 Samuel Brown card is an exception, but I think one can make educated guesses as to why that might be.

Move, Range, Attack, Defense - the labels ( <-- those words )
Helvetica Neue Bold (75). 10.0pt. #D5D8D7. Letter spacing +1.0pt. All caps.

Spoiler Alert!

Older cards used a color value closer to #DCDDDE here and everywhere else I quote a color of #D5D8D7. I'm not sure why there is this variance. Maybe it is a shift due to color space conversions in the various sources I used. It seems to be so small of a change that it would have taken a very detailed designer to want to tweak it by such a small amount. Maybe Hasbro has those, and it is further evidence of the care they take with their products.

Move, Range, Attack, Defense - the values (numbers)
Helvetica Neue Bold (75). 12.0pt. #D5D8D7.

Move, Range, Attack, Defense - labels below the numbers
Helvetica Neue Medium Condensed (67). 6pt. #D5D8D7. Letter spacing +0.1pt. All caps.

Points Value
Helvetica Neue Bold (75). 12.0pt. #FFFFFF, except on Jandar which is #121212.

Spoiler Alert!

It may surprise some to find out that black text on Heroscape cards is not full black (#00000). I know it surprised me. We still use full black in C3V, although maybe that will change with these findings. I think the value for this used to be #231F20, before it was switched to #121212. I've played around with all three of these values and agree that #121212 is the most pleasant looking of the three. If the very dark hit-zone area is modified to be less black, then the older #231F20 is better.)

Points Label (the word "points")
Helvetica Neue Medium Condensed (67). 6.0pt. All caps. #FFFFFF, except on Jandar which is #121212.

Life Value
Helvetica Neue Bold (75). 12.0pt. #FFFFFF

Life Label (the word "life")
Helvetica Neue Bold Condensed (77). 7.0pt. #D5D8D7. All caps. Letter spacing +0.1pt.

Special Ability Name
Helvetica Neue Bold Condensed (77). 8.0pt. #121212. All caps. Letter spacing -0.08pt. line spacing 1.1.

Font size and even line spacing are decreased as needed to make special ability text fit. The smallest in W9 is the repulsors with a size of 6.25pt (and less than 1.05 spacing).

Special Ability Text
Helvetica Neue Condensed (57). Font size is always 0.70pt smaller than the Special Ability Name size used on the card, so 7.3pt down to 5.55pt for Wave 9. #121212. Letter-spacing nominally +0.18pt, but sometimes reduced as low as +0.15pt to fit more text on card. Line spacing is somewhat irregular, between 1.15 and 1.17 (can change from ability-to-ability on the same card), which I think is just an unnoticed error in their templates. Line spacing is also not consistently adjusted correctly when the font size is reduced to fit more text, sometimes leading to large values (e.g., numbers as high 1.4).

Spoiler Alert!

After determining all of the specs above, I remembered there was high quality PDFs for both Skahen and Sam Brown. I wish I remembered that earlier because certain information can be read directly from the PDF and it would have saved me time, but W9 came out after Skahen so there were some minor updates to the templates anyway and it was nice having her card to confirm my calculations where there weren't updates. Sam Brown's PDF is less helpful because it actually used an older template despite coming out later.

I haven't finished with my investigation the Basic side. I've got the fonts, weights, colors, and sizes figured out. I just have to double-check letter-spacing values.

[japes]

Very similar to what we use in C3G. Same Font just different sizes. I know we use 47 Light Condensed for main body text instead of 57
77 Bold Condensed as opposed to 75 for the Move, Range...numbers

77 is the largest style number we use.

It could just be for simplicity as we only use three styles (47C, 67C, 77Bold)

[Xorlof]

Yep, Helvetica Neue is found in marketing materials, throughout the rulebooks, basically all over HS stuff. If there was what could be called an official font for HS, this is it, in its varied weights and styles.

C3V also uses 47 for ability text, at least in recent years. I *think* the shift to it may have ocurred because of a rendering bug in the Adobe suite where 57 was rendered too heavy. At least I remember seeing some chatter along those lines. The original C3V templates do specify the (correct) #57 regular weight.

The above findings are laying the groundwork for a web based card maker app I am making (X-2 Customs Cards Maker), which at first will only do the text for you in the "correct" way, with pixel perfect accuracy (which the Hasbro templates didn't achieve, BTW, being a couple of pixels off here and there from their obvious intentions). You'll still have to do the miniature image and hitzones separately, but I hope for it to be a start towards making high quality cards easy for everyone to make, at least on the Valhalla side. (High quality in presentation, that is; you still have to design, redesign, and playtest to make sure the CONTENTS are high quality ).

Once working, I'm very open to adding non-Hasbro-Valhalla-style templates if there is interest. The goal is for this to be easier than MSE, with no software to download. Just click a link and use.

[japes]

Originally Posted by Xorlof

Yep, Helvetica Neue is found in marketing materials, throughout the rulebooks, basically all over HS stuff. If there was what could be called an official font for HS, this is it, in its varied weights and styles.

C3V also uses 47 for ability text, at least in recent years. I *think* the shift to it may have ocurred because of a rendering bug in the Adobe suite where 57 was rendered too heavy. At least I remember seeing some chatter along those lines. The original C3V templates do specify the (correct) #57 regular weight.

The above findings are laying the groundwork for a web based card maker app I am making (X-2 Customs Cards Maker), which at first will only do the text for you in the "correct" way, with pixel perfect accuracy (which the Hasbro templates didn't achieve, BTW, being a couple of pixels off here and there from their obvious intentions). You'll still have to do the miniature image and hitzones separately, but I hope for it to be a start towards making high quality cards easy for everyone to make, at least on the Valhalla side. (High quality in presentation, that is; you still have to design, redesign, and playtest to make sure the CONTENTS are high quality ).

Once working, I'm very open to adding non-Hasbro-Valhalla-style templates if there is interest. The goal is for this to be easier than MSE, with no software to download. Just click a link and use.

That's a very cool idea. and very ambitious. Good luck and I will be watching.

[Nomad]

I am happy with Arial (PC, not willing to pay or pirate for Helvetica). I use GIMP with decent results. But . . . show me the way with an easy template, and I would be very interested.

[japes]

Originally Posted by Nomad

I am happy with Arial (PC, not willing to pay or pirate for Helvetica). I use GIMP with decent results. But . . . show me the way with an easy template, and I would be very interested.

Wow...you can pirate anything these days I guess. Never thought that fonts were pirated.

[Xorlof]

Originally Posted by Nomad

But . . . show me the way with an easy template, and I would be very interested.

That's the plan (an easy to use system). Version 1 will let you handle all of the text correctly with pixel perfect accuracy, spitting out a background and front layer that you can insert your miniature graphic between using another program (so still keep Gimp handy). I'm guessing it'll release around Thanksgiving. Historically, my timelines tend to slip, but I'm hoping to actually be early in this case.

If all goes well, the plan would be for version 2 to provide the ability to load miniature graphics right into the webapp and do the basic edits needed to hopefully satisfy the majority of use cases. I haven't sketched out this part yet so don't know when that might be available.

Regarding the correct font (Helvetica Neue), fonts.com offers it a good-enough free tier for this purpose. With it, I can provide 25,000 loads of the web app per month, legally using Helvetica Neue, at no cost.

Spoiler Alert!

Spoiler is only for font geeks--there is a small restriction where the font files they serve to the free tier have the kerning tables removed. However, I can have JavaScript basically put the correct kerning back in, and the results will be identical as if they provided the non-stripped font. You wouldn't want to do that on every page load on websites with whole page of text, but it's very doable with the small amount of text on a Heroscape card with no noticeable performance penalty.

The free tier also strips ligatures. I haven't examined the font directly in a font editor, but typing out a few common pairs (fl, fi, etc.) points towards Helvetica Neue not having them anyway.

Originally Posted by japes

Never thought that fonts were pirated.

Yes, font files are copyrighted, falling broadly speaking as a computer program. Typefaces (the shapes of the characters as opposed to the digital files representing them) generally are not protected by copyright law, so you could create your own font that mimics the typeface (and plenty of people do put out copycat fonts). But no need to worry about any of that here--the real deal is available essentially for free.

[japes]

Originally Posted by Xorlof

That's the plan (an easy to use system). Version 1 will let you handle all of the text correctly with pixel perfect accuracy, spitting out a background and front layer that you can insert your miniature graphic between using another program (so still keep Gimp handy). I'm guessing it'll release around Thanksgiving. Historically, my timelines tend to slip, but I'm hoping to actually be early in this case.

If all goes well, the plan would be for version 2 to provide the ability to load miniature graphics right into the webapp and do the basic edits needed to hopefully satisfy the majority of use cases. I haven't sketched out this part yet so don't know when that might be available.

Regarding the correct font (Helvetica Neue), fonts.com offers it a good-enough free tier for this purpose. With it, I can provide 25,000 loads of the web app per month, legally using Helvetica Neue, at no cost.

Spoiler Alert!

Spoiler is only for font geeks--there is a small restriction where the font files they serve to the free tier have the kerning tables removed. However, I can have JavaScript basically put the correct kerning back in, and the results will be identical as if they provided the non-stripped font. You wouldn't want to do that on every page load on websites with whole page of text, but it's very doable with the small amount of text on a Heroscape card with no noticeable performance penalty.

The free tier also strips ligatures. I haven't examined the font directly in a font editor, but typing out a few common pairs (fl, fi, etc.) points towards Helvetica Neue not having them anyway.

Yes, font files are copyrighted, falling broadly speaking as a computer program. Typefaces (the shapes of the characters as opposed to the digital files representing them) generally are not protected by copyright law, so you could create your own font that mimics the typeface (and plenty of people do put out copycat fonts). But no need to worry about any of that here--the real deal is available essentially for free.

Yeah, I knew they were copyrighted so by today's logic I guess I should have known that someone out there was going to pirate it.

Sounds like a great tool for custom makers X-2.

[Xorlof]

I've done more investigations of card text over time. Some observations:

The layout of the Card Name/General Name hasn't been consistent over time.

Spoiler Alert!

1) Early cards (through wave 8?) always had the general name a short distance below the card name (although not always by a consistent amount) and then centered that block vertically in the available space before the general's logo.
2) Wave 9 & 12 always had the general name in the same spot, near the bottom curve of that top area. The general name was then centered in the remaining space.
3) Wave 11 & 13 goes back to the wave 1-8 style, but also increases the amount of space between the card name/general name when the card name fits on one line

Options 1&3 seem the most aesthetically pleasing to me. My system will use option 1 for now, and I think #3 later after I figure out the right chunk of code to make that happen. (I'm trying to avoid using javascript for layout as much as possible, and let the browser handle it).

There are some minor variations in when the off white (#d5d8d7) color is used.

Spoiler Alert!

1) In general most of the labels in the move/range/attack/defense area use that color throughout all waves. However as time marched by more of the numeric stats switched from off-white to white.
2) Size used to be in that color, but also switched over later on (Sam brown being an exception).

I'm going to use the all-white size, but off-white for the other stuff. I think things started getting more white as newer, perhaps less experienced designers started playing with the Hasbro templates. Perhaps this was around the WotC handoff--I don't have a good recollection of exactly when that was. (Obviously Waves 11-13 were WotC, but I think the handoff was actually earlier than that?)

There have been font size differences (beyond the ad-hoc shrinking/compressing of fonts done on a per card basis to the special text and card names if those items wouldn't otherwise fit the available space).

Spoiler Alert!

1) The life # got smaller (fewer pixels high) for a while.
2) Card cost got bigger on lots of cards.

I will use the taller life number and smaller card cost.

Effectively that means I will be using most of early choices with only 1 exception (and eventually 2), where the later choices seemed to be improvements.

And finally, work begins on using the hi-res Skahen PDF as a basis to create new, high quality card templates, hopefully besting Mooseman's excellent ones that have gotten us so far for so long. (I'm not sure if mine will end up any better or not). Those in the know, know what the image below means for that effort. It's not 100% accurate, but was done with care and is quite close:



I'm going to try it out and see if it needs tweaks. Feel free to use it your own card recoloring projects. (I've never done recoloring before so I'm winging it. If anyone has favorite techniques, I'd love to hear them).

(And yes, the weird bumps around the top-left part of the miniature photo area, and bottom special power text area are in the the original Skahen card.)

[Xorlof]

If you want to have an early peek at the card creator I mentioned above, look in this thread.

[Leaf_It]

I love what you're doing here.

btw... What happened to the mask image? It's not working.

Spoiler Alert!

I just spent an hour trouble shooting, because I though images were broken on my browser,(it's happened before) and I was using that image to see if it was working again. I finally opened the webpage up on my phone, and found that it wasn't my browser acting up.

[Xorlof]

Originally Posted by Leaf_It

What happened to the mask image? It's not working.

Ooops. Sorry I caused that wasted hour mentioned in your spoiler. I moved the location of the mask image (fixed in the post above). It's a pretty good image to use for your purpose since it is small in file size (quick to download), but large and colorful to easily be seen.

It probably will move one more time at some point before it lands in its final home. But not for a while.