Could you have predicted 10 years ago that a device smaller than
your wallet would become something you couldn’t live without?
And yet, would you want to try living without your cell phone?
A decade ago cell phones were used a lot like their landline
counterparts—as voice-only devices. They were handy, but
for most users weren’t vital to daily life. Most consumers were
unaware that smartphones, with personal computer-like functionality
and internet access, were just over the horizon. Today, it
seems possible that mobile phones may overtake laptop and desktop
computers as the center of our communications universe. In
regions such as India, many consumers are heading straight to
mobile phones and bypassing the expense or limited accessibility
of PCs. Using mobile phones, consumers worldwide are able
to accomplish as much as yesterday’s limited options for accessing
the web or indulging in digital activities and games.
IN THIS HOME-SCREEN VIEW OF A “MEDIA WALL” EXPERIENCE,
THE CLOCK’S LARGE NUMERALS ARE COMPACT, YET THE OPENNESS OF FIGURES
LIKE THE 0 AND THE 3 ENSURE QUICK READABILITY.
A SMALL TYPOGRAPHIC REVOLUTION
While the capabilities of the cell phone have advanced quickly, an
important ingredient—type—has lagged behind. Type underlies
many of the impressive features of today’s mobile phones. If you
can’t maneuver the user interface because of poor readability, or if
the game or application isn’t memorable, fun or user-friendly, type
might be the culprit. It’s surely one of the most important ingredients
for instilling the right personality or tone in anything that
displays text, mobile phones not excepted.
Fortunately, attention is now being placed on typography for
the small screen, spurred by the demands of more media-centric
phones embracing scalable, TrueType and sophisticated rendering
technologies. And creative agencies that develop marketing campaigns
and branding programs are no longer limiting their focus to
traditional media. Design firms that specifically serve the mobile
industry are also flourishing, including 5-year-old Punchcut, based
in San Francisco. According to company cofounder Jared Benson,
Punchcut provides user interface strategy, design and development
services and works with handset manufacturers, operators,
publishers and major entertainment brands to envision and create
next-generation mobile interfaces.
“Typography for mobile phones is getting better as designers
are getting more involved,” says Benson. “For years, application
engineers were responsible for most of the fonts seen on mobile
devices. In some cases, PC fonts were ported to the mobile phone
without making needed adjustments that would help those fonts
display and perform better on the new medium. Typeface design
should really be handled by typeface designers who know how to
bring proper nuance to characters while maintaining sensitivity to
the forms themselves.”
RESPECTING MOBILITY
What should a designer think about when approaching mobile
type projects? According to Benson, good mobile design involves
a deep understanding and respect for mobile phones and their
integral position within today’s lifestyles. “Designers have to be
aware that ‘mobile’ refers to not just a device but a way of life. Ultimately,
part of the designer’s obligation is to help clients engage
or empower mobile end users. The designer can play a big role in
enhancing the mobile experience.”
The word “mobile” provides a key clue in approaching typeface
design for the small screen. “People are on the move. If I’m dialing
or trying to find a friend in my phone’s address book while driving
or walking in a crowded area, my attention span is limited. I need
to achieve this via short glances at the phone in my hand, which is
probably held at an arm’s distance. Character recognition, therefore,
is especially important.”
PUNCHCUT CREATED THIS BITMAP VERSION
OF QC SANS FOR COMMON LOW RES QCIF
SCREENS. IT REQUIRED METICULOUS CRAFTING
OF EACH WEIGHT AND SIZE, 12 IN ALL, TO ENSURE
MAXIMUM VISUAL COMPATIBILITY ACROSS
THE FAMILY BY RETAINING KEY TRAITS WITH
A LIMITED NUMBER OF PIXELS. THE RESULT IS
A COHESIVE BODY OF FONTS THAT PROVIDES
FLEXIBILITY IN A BITMAP THAT RIVALS MOST
OUTLINE FONTS IN THE MEDIUM.
Understanding design goals is critical. Bensons advises challenging
yourself with core questions. “Is the font seeking to
differentiate? Build a brand message? Create better interface clarity?
Take advantage of a new rendering technology?” Designers must
also understand target devices and their technical specifications: “If
possible, get your hands on the device so you can test directly on it.”
Embrace research. “Look at what the competitors are doing.
Crawl the web for data.” If budget permits, user research can
provide insights to shape the design. “Create a project plan that
allows for testing at every step of the design process. Investigate
size, contrast and subtle design changes. What visual attributes
will be seen across your character sets? Don’t fall into the common
trap of burdening a few characters of the font with all the
personality of the face. Prepare several design options to present
to your client. Be prepared to present reasons why they are
effective for the client’s business goals. Prepare some key words
set in the different design options.”
Once a design style has been chosen, designers should be ready
to explore the full character set and be prepared to show how the
entire family fits together. “How does the font change when the
bold is used? If you’re creating a bitmap family, what design details
are seen across all the varying sizes you will have to create?” With
approval on the core alphabet in roman and bold, development of
the remainder of the character set and the heavy production begins.
CRITICAL DESIGN TRAITS
Benson rates the following traits most important for success in
designing type for the mobile environment:
• Compact width for economy of space
• Legible characters and a generous x-height to ensure readability
• Ability to scale the type to varying sizes, maximizing versatility
• Utilitarian design with longevity
• Good solutions for emphasis and creating hierarchy
Benson cautions that easy “solutions” like switching from regular
to bold type may do little more than create new problems.
“Naturally, the bold fonts are wider due to heavier vertical strokes.
This can lead to display problems if introduced in the wrong place.
Because of this, the mobile industry has been rather selective
about switching between roman and bold fonts.” In the case of one
Punchcut client, he says, that represented an opportunity. “The
typeface we created for Qualcomm was able to solve this effectively,
opening up new ways of emphasis for the mobile developer.”
THESE MOCKUPS SERVED AS THE CONTROL
AND TEST FONTS FOR THE USER STUDY
CONDUCTED DURING THE DESIGN PROCESS
FOR QUALCOMM.
FUTURE PHONES
How will mobile phones perform 10 years from now? Will they
wake us up in the morning and inject us with euphoric feelings,
readying us to start a new day and accomplish great things? One
can only hope not. Will mobile phones be even smaller than they
are today? This also seems unlikely, as our fat fingers would rebel.
Yet with companies like Punchcut, designers like Jared Benson,
and others with the same passion to improve how we communicate,
the type is sure to look good.
CASE HISTORY: QUALCOMM
As part of designing a user interface typeface for Qualcomm, Punchcut was asked to design a custom family of sans serif fonts
to be used in Qualcomm mobile interfaces. The project’s scope was to assess, design and produce a custom family of fonts for
use in Qualcomm’s Brew solution on standard (low resolution) and QVGA (Quarter Video Graphic Array or high resolution) mobile
phones.
Until this project, Qualcomm had used converted bitmap font families originally designed for computer- or print-based environments.
“They understood that font usage issues were becoming more critical in delivering an effective and appealing user experience,”
says Benson. “Mobile data services were becoming more popular, thanks to the impending arrival of 3G [third-generation]
phones designed to accommodate these services.”
The expectation was that a well-designed and engineered suite of scalable fonts would appeal to Qualcomm customers, including
its developers, OEMs and mobile service carriers. In turn, these customers would benefit with increased flexibility and the
potential to create and deploy unique, customized user experiences faster and easier.
CHALLENGE AND EXECUTION
The challenge for Punchcut was to design a typeface that succeeded not by drawing attention to itself but by supporting other
elements of the user interface. “In mobile interface design, typography should be the invisible workhorse,” says Benson. “As
a whole, typography for the phone is about balancing the elements to provide a clear, effective communication medium that
doesn’t upstage the messages being communicated.”
Punchcut presented a variety of stylistic designs. Each specimen included macro and micro views of individual characters,
words or sample usage examples. These stylistic explorations were uploaded to a testing device and reviewed with Qualcomm
for feedback.
Ultimately, the final design decision involved the use of traditional forms and squared-off counter shapes—deemed the most appropriately
engineered forms for increasing readability. “In this case, functionality, rather than subjective aesthetics, drove
decisions during the design process,” Benson explains. Punchcut designed each weight with consideration given to how text
would be used, whether dialing, navigating a text list or reading a text message. “It’s important to keep the characters distinct
from one another, and research has shown that wider letterspacing in small sizes significantly aids reading from the screen,”
says Benson.
Today, the resulting fonts, known as the QC Sans and QC Sans Bold designs, are available to Brew licensees. Monotype Imaging
handled the conversion of Punchcut’s designs from bitmaps to TrueType-based, scalable fonts. Other text-based technologies
available through Brew include Monotype’s iType scalable font engine and WorldType Layout Engine, a software library for
composing, positioning and rendering multilingual text.
(TOP): MUCH MORE RICHNESS CAN BE BROUGHT TO THE MUSIC EXPERIENCE WITH
IMAGERY, COLOR—AND OF COURSE RICHER TYPOGRAPHY—AS PEOPLE UPGRADE
THEIR MONOCHROME IPODS OR LOW RES HANDSETS. THIS MEDIA
PLAYER BENEFITS FROM A CLEAR, AT-A-GLANCE INDICATION OF THE ARTIST,
TRACK INFORMATION AND STATE OF THE PLAYBACK.