Scroll to Info & Navigation

Ellen Lupton: Scalable App Icons

As a follow-up to the bestselling Thinking with Type, Ellen Lupton has edited a new primer on typography for the digital age. Type on Screen presents the classic typographic concepts you may already know in the context of printed pages, updated for use on screen-based applications like electronic publications and websites, as well as video and mobile devices. This post excerpts a section on creating scalable app icons for PCs and mobile devices.

image

A desktop icon for Mac OS may be viewed as small as 16×16px in a sidebar or as large as 1024×1024px in Apple’s flip-through “cover flow” interface. Creating scalable application icons thus demands attention to pixel-perfect detail. Doing it well requires making at least six different versions of the same icon for various display purposes. A Mac OS icon file (ICNS) consists of multiple image files at different sizes, each simplified according to its scale, with more detail possible at larger sizes. The ICNS format supports the following sizes: 16×16, 32×32, 48×48, 128×128, 256×256, 512×512, and 1024×1024px. Begin drawing the icon at the largest size and work your way down to the smaller sizes, redrawing elements as needed. For the sidebar icon, you can eliminate the reference to a folder, as seen in the tiny 16px camera icon below.

image

Right  Draw each size individually, simplifying and adjusting as needed for legibility.

image

Wrong  Simply scaling an icon down creates illegible forms that lack detail and refinement.

image

Wrong  Likewise, scaling an icon up from the smallest size yields odd-looking icons at larger sizes.

———

Apple’s iOS requires icons in a multitude of sizes for various devices and presentation situations:

image

512 × 512 px  iTunes artwork

image

114 × 114 px  Home screen icon for iPhone Retina Display

image

72 × 72 px  Home screen icon for iPad

image

58 × 58 px  Spotlight and settings icon for iPhone Retina Display

image

57 × 57 px  App store and home screen icon for iPhone / iPad Touch

image

50 × 50 px  iPad Spotlight search results

image

29 × 29 px  Settings icon in iPad and iPhone, and spotlight icon on iPhone

———

Find more like this in Type on Screen, available now from Princeton Architectural Press.

Keep Fresh, Stay Rad

New from our Friends of Type – a super cool box of 100 typographically fabulous postcards! Includes nice little Q&A booklet with the designers.

Louise Fili exhibiton at the ADC

Elegantissima: The Exhibit opened this Wednesday, September 10th at the Art Directors Club. The show was designed by Kevin O’Callaghan and displays four decades of Louise Fili’s work, all set within beautifully crafted and themed room environments. 

Be sure to see the exhibit before it ends on September 19th (the ADC is located at 106 West 29th Street, NYC) and discover more of Louise’s fine work in Elegantissima: The Design and Typography of Louise Fili (2012). 

Type Nite (w/ Ellen Lupton & Abbott Miller)
Sept. 22, 6:30pm
MICA, Brown Center, Falvey Hall
Baltimore

MFA in Graphic Design faculty members Ellen Lupton, Abbott Miller, and type designer Tal Leming, along with special guests, will showcase new typefaces under development; explore type at work on page, on screen, and the built environment; and celebrate the release of Lupton’s new book, Type on Screen, and Miller’s new book, Abbott Miller: Design and Content. On-site and on-line book signings will follow the program.

If you are not in Baltimore: Pre-order your book(s) at the MICA Bookstore website and receive 20% off. You will have the opportunity to fill out how you would like your book(s) inscribed. The author(s) will sign your book(s) and the store will mail them to you. Include your Twitter handle and we’ll tweet a photo of the author(s) signing your book(s)! Following the autographing session with attendees, the authors will take questions from remote fans via Twitter. Use the Twitter hash-tag #TypeNite when you tweet your question, and don’t forget to follow #TypeNite on Twitter to experience the whole event!

At Strand Books in NYC on June 26, 2014, Ellen Lupton and her students from MICA spoke about the book they wrote, Type on Screen: A Critical Guide for Designers, Writers, Developers, and Students, available now from Princeton Architectural Press. 

From Grafica Della Strada by graphic designer Louise Fili.

Available September 2014.

Reserve your copy here!

Words and lettering by Oz Cooper, from a booklet On Old Style and Modern Types (1927). Taken from baseline magazine, issue 22, 1996.

Words and lettering by Oz Cooper, from a booklet On Old Style and Modern Types (1927). Taken from baseline magazine, issue 22, 1996.

Book Talk: Ellen Lupton’s Type on Screen

Strand Books, NYC
June 26, 7:00–8:00pm

Ellen will discuss her new book Type on Screen, the digital-age companion to her bestselling Thinking with Type. Some of her students (and collaborators) from MICA, including Christopher Clark, Javier Lopez, and Young Sun Compton will share their own work!

Join us! Details here.

We’ve fallen in love with another video. From The Times, it’s a short film about the Times New Roman typeface. Bravo. Keep Thinking with Type!

BuzzFeed celebrates Type on Screen by Ellen Lupton with a What Font Are You? quiz.

Join us in New York City:
Ellen Lupton talks type— 
with Javier Lopez, Chris Clark, and Young Sun Compton
June 26, 7 p.m. / Strand Books
Purchase of Type on Screen or $15 gift card required

Coming this fall — Keep Fresh, Stay Rad: 100 Postcardsour first collaboration with Friends of Type. Check out FoT’s new tumblr here.

Type on Screen:
A Critical Guide for Designers, Writers, Developers, and Students

Edited by Ellen Lupton
Available May 27

Reserve a copy from PAPress now!
Shop locally
Pre-order from Amazon

The long awaited follow-up to our classic Thinking with Type, Type on Screen (Ellen Lupton, editor) is coming this May. It will be the definitive guide to using classic typographic concepts of form and structure to make dynamic compositions for screen-based applications. Reserve your copy now.

The long awaited follow-up to our classic Thinking with Type, Type on Screen (Ellen Lupton, editor) is coming this May. It will be the definitive guide to using classic typographic concepts of form and structure to make dynamic compositions for screen-based applications. Reserve your copy now.

VD is this Friday! 
Let Steve (ESPO) Powers help you say it with verve. More here.

What do you want to tell your loved one this Valentine’s Day

Stephen Powers’ I Paid the Light Bill Just to See Your Face love letter notecards are available now!