}}}
[[http://www.amazon.com/gp/product/1449394639/ref=as_li_tf_tl?ie=UTF8&tag=4ourthmobile-20&linkCode=as2&camp=217145&creative=399373&creativeASIN=1449394639|{{attachment:wiki-banner-bonus.png|Click here to buy from Amazon.|align="right"}}]]Knowing the right typeface when performing detailed, production-grade design (or convincing mockups) is not easy on every platform. Some use custom fonts, some are difficult to get ahold of, and sometimes it's simply not that clear what they are. Over the years I have collected a lot of these.
I also have a lot of the actual font files, but most cannot be (legally) distributed, so I either tell you where to get them, or that I don't know where.
Though it's now over four years old, the blog entry [[http://sender11.typepad.com/sender11/2008/01/prototyping-mob.html|Fonts for prototyping mobile UIs]] from Morten Hjerde is an excellent summary of the issues involved. It was also the start of my listing of fonts and sources.
''I’ve seen many prototypes of mobile UIs that can’t be built and if they could, would not be legible on a small LCD screen. So I thought I’d provide some pointers that might help those of you that is starting out. Often, people starting out prototyping mobile phone UIs get the size of the display right but the size of the font wrong. They try to stuff way too much in there, and they use a font size and font family that is not available in the phone.
If you design applications, you can make pixel perfect designs. If you design mobile web pages, you go for a rough estimate. Having the correct font is important if you design applications, less important if you make mobile websites.
Most current phones use anti-aliased fonts and many of these are available in TrueType versions that you can use on your PC. I’ve provided links to “official” sources, you may find more if you search the web, but quality may vary.''
== Smartphone OSs ==
Android
* Droid (Ascender Corp.)
The Droid font family has a sans, a serif and a monospace version. Strangely, the sans version does not have italics.
Sans (Regular, Bold)
Serif (Regular, Bold, Italic, Bold Italic)
Mono (Regular)
Sans Asian (This is also the fallback font. Meaning it includes a glyph for all Unicode characters.)
You can extract the fonts from the Android SDK.
=== iOS ===
According to John Gruber, these fonts are included in the iPhone (first versions):
* American Typewriter
* American Typewriter Condensed
* Arial
* Arial Rounded MT Bold
* Courier New
* Georgia
* Helvetica
* Marker Felt
* Times New Roman
* Trebuchet MS
* Verdana
* Zapfino
Since there is no official iPhone SDK available yet, you can only use these fonts in the browser. The way to get these fonts is of course to own a Mac. (Btw, I have a really, really nasty case of MacBook Air lust and I’m trying to convince my wife that we need yet another computer in the house.)
Place that lists iOS fonts: http://iosfonts.com/
=== Windows Mobile 6 (HTC, Motorola, Samsung, etc.) ===
* Segoe Condensed (Monotype Inc.)
* Microsoft Nina for East Asian
Available in Regular, Bold, Italic and Bold Italic.
TrueType versions of Segoe and Nina are installed with Vista and Office 2007. If you don’t have the Condensed version of Segoe, you can get it by downloading the Windows Mobile 6 Standard SDK. (Windows Mobile 6 Professional or Classic includes Tahoma and Courier.)
=== Windows Phone ===
Not yet updated - Segoe?
=== Windows Phone, Nokia ===
Not yet updated - Pure?
=== WebOS ===
Not yet updated
=== BlackBerry BBOS ===
Did you know that Blackberry typography is the universally accepted definition of the word “awful”? I would prefer to just put my head in the sand and pretend it didn’t exist - or at least looked better. But let’s put the pixel policing aside, here are the fonts you have access to from Java:
* Millbank
* Millbank Tall
* System
All are available in Regular, Bold, Italic and Bold Italic, AFAIK. I have not found TrueType versions of these fonts anywhere.
=== BlackBerry BB10 ===
http://docs.blackberry.com/en/developers/deliverables/27299/Text_tablet_1526156_11.jsp
Myriad is the default and preferred font for the BlackBerry® PlayBook™ tablet, because it is designed for easy reading for most users. The font is available in standard width and semi-condensed width. It can also be bolded and italicized. Your application can use other fonts, but you should use coordinated typefaces and be consistent.
=== LiMo and other Linux variants ===
* Vera (Bitstream Inc.) and DejaVu
Bitstream gave the Vera font to the open source community. Vera has been modified and evolved into DejaVu. You can find these fonts a number of places, just google them.
Does this matter anymore?
== Featurephone OSs ==
=== J2ME & Featurephone Font Sizes ===
In Java ME you have 3 set font sizes Small, Medium and Large. With the new anti-aliased fonts, you have to measure what font size matches what phone screen size for the different manufacturers.
Get some screen dumps from the phone, open them in Photoshop and Visio (or whatever software you prefer) and measure what point size equals the font size on the phone. For example: a 240x320 screen Series 40 phone uses font heights of 16, 20 and 24 pixels. This equals a point size of 16, 21 and 25 in Photoshop.
In a phone web browser you can specify the font size, but how its rendered is dependent on the capabilities of both the phone and the browser. It ranges from a single font size for all text to continuously variable size. I don’t think it makes sense to spend a lot of time in Photoshop designing mobile web pages.
The entire mobile font size/screen size issue is somewhat complex and I’ll try to cover it in a future blog post.
=== Nokia Series 40 and S60 ===
Fonts:
* Nokia BW fonts
* S60 Sans (Monotype Inc.)
You can get a TrueType version of the S60 Sans font by downloading and installing one of the Nokia S60 SDks. The fonts currently used in Series 40 devices are the same (or close enough). Note that Series 40 and S60 does not use the same font size for the same screen size however.
Prior to 3rd edition, Nokia used BW fonts, one font for S60 and one font for Series 40. I handmade TrueType versions of these fonts 3 or 4 years ago. If you need them for the purpose of mobile UI prototyping, send me an email.
=== Sony Ericsson OSE and UIQ ===
Fonts:
* Sans-Serif (Monotype Inc.)
You can get a TrueType version of this font by downloading and installing the UIQ 3.0 SDK from the UIQ website.
=== Motorola (various proprietary OSes) ===
* SynergyBasic (Bitstream Inc.)
I have a Bold only version that I once found somewhere on the intertubes, but I can’t locate it anymore. The font is similar to Univers and you might get by with that.
=== Samsung and LG (proprietary OSes) ===
I don’t have information on what fonts their feature phones uses. If you know, leave a comment or send me an email and I’ll update it here.
The Symbian versions uses the S60 Sans font, the WM versions uses Segoe Condensed or Tahoma.
-------
Next: [[Human Factors & Physiology]]
-------
= Discuss & Add =
Please do not change content above this line, as it's a perfect match with the printed book. Everything else you want to add goes down here.
== References ==
* John McWade ''Before and After Magazine'', Volume 4 number 1
* John McWade ''Before and After Magazine'', Volume 4 number 2