|This blogger has moved!|
I want to invite you to my new gig over at Rift Labs. We are devloping Open Source Hardware for photographers.
Come join us if you are into UX, design or photography at some level.
Visit Rift Labs
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.
Below is an overview the OS fonts used by Tier 1 manufacturers.
Nokia Series 40 and S60
- 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
- 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.
HTC, Motorola, Samsung, etc running Windows Mobile 6
- 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.)
- 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)
Sans Asian (This is also the fallback font. Meaning it includes a glyph for all Unicode characters.)
[edit: link is corrected] You can extract the fonts from the system.tar.gz file here.
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.
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 Tall
All are available in Regular, Bold, Italic and Bold Italic, AFAIK. I have not found TrueType versions of these fonts anywhere.
According to John Gruber, these fonts are included in the iPhone OS X:
- American Typewriter
- American Typewriter Condensed
- Arial Rounded MT Bold
- Courier New
- Marker Felt
- Times New Roman
- Trebuchet MS
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.)
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.