Simon Rock­man met with Bryan Rieger from yiibu.com to find out how he works to make mobiles beautiful.

Brian has a prob­lem. He’s a developer and a designer. Now to most people that seems emin­ently sens­ible. You design a mobile applic­a­tion and then you build it, but the mobile world seems to think you should be a developer or designer. So he and his wife Stephanie broke from con­straints and set up Yiibu which will craft mobile applic­a­tions for com­pan­ies. Free to design, develop or both.

Where he sticks with con­ven­tions is in not talk­ing about his cli­ents with whom he has signed non dis­clos­ure agree­ments so while you may have used his stuff he can’t lay claim to it.

Con­sist­ency

Work­ing for a num­ber of cli­ents over a num­ber of devices means he often wants a com­mon­al­ity of exper­i­ence. That can be dif­fi­cult. “Spe­cify some­thing as eight pixels high on a two in screen with a 120 by 120 res­ol­u­tion and it looks fine, ask for eight pixels on an iPhone and you won’t be able to see it”. Brian laments how far behind mobile is. “In the web world you can spe­cify ems or per­cent­ages”, but mobile is yet to catch up. There is some spotty adoles­cent pro­gress. “Android has Device Inde­pend­ent Pixels which is equi­val­ent to about 160 DPI”. But that’s just size, try­ing to change the font is even harder, Brian would like to be able to embed fonts. “We do it now to some extent with pixel fonts, you can use flash and SVG but they are not yet well enough supported.”

He con­tin­ues on the thread of incon­sist­ency, talk­ing about how fonts look on a PC. “When you mock some­thing up using Pho­toshop or illus­trator you have Adobe’s fant­astic font ren­der­ing. Even Nokia Series 60 Sans looks awe­some. It has per­fect kern­ing and hint­ing. Even with Adobe’s Device Cent­ral you have the amaz­ing font ren­der­ing tech­no­logy. Unfor­tu­nately phones don’t. Use any phone manufacturer’s font ren­der­ing engine on a three inch screen and it looks noth­ing like it did on the PC.”

Brand­ing

Brian has become prag­matic about doing cre­at­ive things with fonts on phones. “Budgets are not usu­ally there to do clever hacks with fonts”. Brand will be con­veyed using logos while the body copy will be in a sys­tem font. This might be more com­fort­able for users, but few phones have any­thing where emo­tion has been a con­sid­er­a­tion. Even the Black­berry which has 14 fonts only has two you’d actu­ally want to use. “Design­ers don’t bother look­ing any­more it’s been ter­rible for so long”. This is a man who clearly struggles to craft beau­ti­ful designs on mobile. He wor­ries about fonts and enjoys mak­ing them do his bid­ding on non-mobile platforms.

He’s also wor­ried about the lack of con­sist­ency at lots of other levels. “Where the font lives depends on the plat­form, with Java it has to be within the JVM or the phone OS, with Sym­bian it might be pos­sible with QT, I need not just a font but its out­line ver­sion, bold and italic. It needs to provide me with some­thing more romantic”. As he switches from a developer talk­ing about QT frame­work to a designer call­ing for a romantic font I start to get unnerved and under­stand how being the two can be seen as being quite so dif­fer­ent. It’s the clash of art and science.

What mobile phone do you have? If you are read­ing this in the UK you are likely to answer “Nokia”, “Sam­sung” or “Sony Eric­sson”. If you are not in the mobile world and read­ing this in the US you might answer “Sprint”, “AT&T” or Ver­i­zon. The US is the only place in the world where the oper­ator comes first to the con­sumers mind but it is symp­to­matic of the battle between hand­set man­u­fac­tur­ers and net­works, or car­ri­ers, for who owns the customer.

A good deal of this is the user exper­i­ence and part of that is Brand. Of course this is the Com­muni­type site and we are inter­ested in how fonts rep­res­ent brand in the handset.

Ron Bird is the Lead UX Designer at Hutchison 3G where he is work­ing on pro­jects which help integ­rate the 3 brand and exper­i­ence into the hand­set. He’s been around the mobile industry for a long time hav­ing worked at Nokia, Sym­bian, Fujitsu, Orange and Voda­fone. At 3 he’s work­ing on a ser­vice deliv­ery mech­an­ism that will help users enjoy the range of ser­vices 3 and their part­ners offer more easily.

You can have a look at some of his work, in par­tic­u­lar some very effect­ive shock­wave anim­a­tions at www.2birds.org.

The 3 net­work has built a very strong brand, and uses the fonts Verd­ana, Mod­ena and Tahoma. While these haven’t made it into a phone or on to the keypads of devices the use of the fonts is a strong part of the 3 brand­ing message.

From advert­ising cam­paigns and user inter­faces that build brand to con­tent that tickles the ima­gin­a­tion, type is fun­da­mental to the com­mu­nic­a­tion pro­cess. Typefaces estab­lish hier­archy and evoke emo­tion; they make products more mem­or­able, entice audi­ences, com­mand atten­tion and engage the reader.

Everything that type can do on a per­sonal com­puter, on the Web, or in hard copy, it can also do on mobile devices — and it can do it today. Hier­archy can be brought to user inter­faces; typefaces can bring drama and emo­tion to games and theme-based applic­a­tions. Type can com­ple­ment mul­ti­me­dia effects and take the mobile exper­i­ence to a new level.

Find­ing the Right Fonts

The best fonts for use in a mobile device, regard­less of the applic­a­tion, should have the fol­low­ing attributes:

• Ample lower­case x-height
• Open coun­ters
• Dis­tinct­ive char­ac­ter shapes
• Mod­er­ate con­trast in char­ac­ter stroke thickness
• Recog­niz­able typeface design traits
• Marked con­trast between medium and bold weights within the type family

The x-height is an import­ant factor in typo­graphic legib­il­ity and read­ab­il­ity — espe­cially where screen real estate and avail­able pixels are limited.

Open coun­ters — the white space within let­ters such as ‘o,’ ‘e,’ ‘c,’ etc. — also help define a char­ac­ter and have a strong influ­ence on ease of recog­ni­tion. Typefaces with large, open coun­ters are gen­er­ally con­sidered the easi­est to read in hard copy, and this holds true on small digital screens as well.

Indi­vidual let­ter shapes can also affect typeface legib­il­ity. For example, the two-storied ‘a’ is much more legible than the single-storied design, and the lower­case ‘g’ based on roman let­ter shapes is more legible than the more simple, gothic ‘g.’

Typefaces with strong con­trast in char­ac­ter stroke weights do not work well on cur­rent mobile devices. There are not enough pixels in this lim­ited digital real estate to repro­duce the con­trast at small sizes.

Typefaces that can eas­ily be dis­tin­guished from one another are also key for use on mobile devices. They help cre­ate com­mu­nic­a­tion hier­archy, estab­lish brand iden­tity and enhance a spe­cific visual theme. Typeface fam­il­ies with a marked dif­fer­en­ti­ation between their vari­ous weights and pro­por­tions also assist in cre­at­ing hier­archy and logical graph­ical communication.

Fonts used spe­cific­ally for oper­at­ing sys­tems and user inter­faces should have excep­tion­ally legible num­bers and be avail­able in a range of weights and pro­por­tions. They “stand out and fit in,” in that they should be dis­tinct­ive and cap­able of estab­lish­ing a brand iden­tity while not being so idio­syn­cratic that they have a lim­ited use.

Not all dec­or­at­ive or theme-based typeface designs will be effect­ive on mobile devices. While there will be some trade-offs in small-size com­mu­nic­a­tion power for the sake of estab­lish­ing a dis­tinct­ive look and feel, the basic require­ments of mobile device func­tion­al­ity still apply.

Legib­il­ity Requirements

Legib­il­ity Requirements

Legib­il­ity Requirements

Legib­il­ity Requirements

Ver­sat­il­ity Attributes

Ver­sat­il­ity Attributes

Dis­tinct­ive Designs

When two indus­tries col­lide inter­est­ing things hap­pen. People who have been into design and typo­graphy appre­ci­ate the value of fonts but tend to know about them from print on paper and not about the implic­a­tions of phone technology.

Those in the mobile phone world know lots about dis­play tech­no­lo­gies but little about the value of fonts. Tra­di­tion­ally they have been about mak­ing the phone dis­play as legible as pos­sible and little thought has been given to the design.

Tech­no­logy how­ever has now caught up with design. Mobile phones have a screen res­ol­u­tion that allows the font to do more than just rep­res­ent the letters.

They can now tell an emo­tional message.

When you read some­thing the font has done a lot of its job before you start read­ing. Just as you form an opin­ion on the taste of a meal by look­ing at it, chefs are taught “the first taste is with your eyes” you form an opin­ion on what you are about to read by how it is laid out and the font before you read it.

We spoke to Mat­thew Menz, head of user exper­i­ence for Motorola in Europe about how he, and Motorola use fonts in and on their phones. He sees the import­ant role that the font plays in build­ing the brand: “A single cus­tom font has been cre­ated across the port­fo­lio of products to provide brand con­tinu­ity. Sev­eral aspects affect the screen design from x-height vari­ations, to avail­able weights & impacts to text trans­la­tions.”, but you need to remem­ber that Motorola is an inter­na­tional com­pany and so the font has to be reflec­ted in places where non-Latin fonts are used “Con­sist­ent typo­graph­ical treat­ment is cru­cial”, says Matt, and it’s not just on the screen that this mat­ters “Screen and phys­ical present­a­tion dif­fer to ensure optimal legib­il­ity in each con­text. The dis­tinc­tion provides the neces­sary flex­ib­il­ity as it is applied to mul­tiple languages.”

Build­ing a phone is a series of trade-offs and cost is an import­ant issue all the way through. Fonts take up memory and memory costs money. When every cent mat­ters a smal­ler font is bet­ter, but how does Motorola strike a bal­ance between memory foot­print, legib­il­ity and con­vey­ing brand? “Very care­fully.” says Matt, they do it dif­fer­ently for phones at dif­fer­ent prices, “The bal­ance between these factors are always in review as the tradeoffs are unique across the port­fo­lio.”. One of those cost issues is pro­cessor power, there are spe­cial chal­lenges are posed by low end devices which don’t sup­port Scal­able Vec­tor Graph­ics (which make a font look nice at dif­fer­ent sizes or alpha blend­ing which lets fonts over­lay other graph­ics with dif­fer­ent levels of trans­par­ency. To deal with this on cheaper phones Matt says that “Mul­tiple font optim­isa­tions are neces­sary to accom­mod­ate the vari­ations in device sup­port. Memory man­age­ment is key for resource con­strained devices.”

As well as the internal pres­sures of legib­il­ity, brand, emo­tion and memory foot­print, some car­ri­ers want to spe­cify fonts. Matt is a little enig­matic on this “Sup­port for mul­tiple fonts and font cus­tom­isa­tion within a single device con­tin­ues to be a topic of dis­cus­sion across the industry.” It’s a new field and some­thing that is just start­ing to play out. Even newer is the abil­ity for users want­ing to use dif­fer­ent fonts. Matt agrees it’s an import­ant dir­ec­tion. “Provid­ing typo­graph­ical diversity is import­ant, both in core OS ren­der­ing & applic­a­tion spe­cific areas like the browser. The abil­ity to sup­port this is dir­ectly related to device ena­blers. The more power­ful devices will con­tinue to be as the lead­ers in this area and these bene­fits will cas­cade to the more resource con­strained products over time.”

It’s good to see that mobile phone design­ers are think­ing about fonts. A mobile phone is an emo­tional device – in Sweden the nick­name for a phone is the same as the word for teddy bear. Bet­ter use of fonts can only make you feel warmer to your phone. Even if it is a text mes­sage from your boss.