Scroll to Info & Navigation

Type Nite took place on the MICA campus in Baltimore on Sept. 22. We celebrated the release of Type on Screen by Ellen Lupton and Abbott Miller: Design and Content by Abbott Miller.

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.

Raffle: ‘Type on Screen’ by Ellen Lupton and ‘Abbott Miller: Design and Content’

a Rafflecopter giveaway

Enter your email address to win a copy of Type on Screen by Ellen Lupton and Abbott Miller: Design and Content for your school library (or a school library of your choice), plus a $100 Princeton Architectural Press gift certificate for yourself.

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. 

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.

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.

Enroll today in Ellen Lupton’s free basic typography workshop on Skillshare: http://skl.sh/15ItLqI

Upgrade your graphic design library

Three of our most popular graphic design titles have been updated in the past year or so. Here is a summary of the new material:

Thinking with Type
Second, Revised, Expanded Edition

A Critical Guide for Designers, Writers, Editors, & Students 
by Ellen Lupton

The revised edition includes 48 pages of new content, including updated information on web stylesheets, the use of ornaments and captions, lining and non-lining numerals, small caps and enlarged capitals, as well as information on font licensing, mixing typefaces, and hand lettering.

Geometry of Design
Revised and Updated Second Edition

Studies in Proportion and Composition 
by Kimberly Elam

This new edition features an additional 36 pages of content that offer more visual explanations of these geometric principles at work.

How to Be a Graphic Designer without Losing Your Soul
New Edition

by Adrian Shaughnessy

This new expanded edition brings this essential book up to date with new chapters on professional skills, the creative process, and global trends that include social responsibility, ethics, and the rise of digital culture. In addition it features inspiring new interviews with leading designers including Jonathan Barnbrook, Sara De Bondt, Stephen Doyle, Ben Drury, Paul Sahre, Dmitri Siegel, Sophie Thomas, and Magnus Vol Mathiassen.