Profile

Cover photo
Phil Green
Worked at Bookatable (formerly Livebookings)
Attended University of Hertfordshire
50,055 views
AboutPostsPhotosVideos+1's

Stream

Phil Green

commented on a post on Blogger.
Shared publicly  - 
 
"Trollshaws" not "Trollshaw Forrest" (or just "Trollshaw" in the video)
1
Add a comment...

Phil Green

Shared publicly  - 
1
Add a comment...

Phil Green

Shared publicly  - 
 
Full Frontal after party @ Loft. Free bar, good times!
1
Add a comment...

Phil Green

Shared publicly  - 
1
Add a comment...

Phil Green

Shared publicly  - 
 
MVC 3 Content Map from Microsoft
1
Add a comment...

Communities

8 communities

Phil Green

Shared publicly  - 
 
Express your musicality, pump it up and chill!
1
Add a comment...

Phil Green

Shared publicly  - 
1
Add a comment...

Phil Green

Shared publicly  - 
1
Add a comment...

Phil Green

Shared publicly  - 
 
Matias Duarte originally shared:
 
Hello Roboto
When we announced Ice Cream Sandwich I also got a chance to introduce Android’s new typeface Roboto. Today I’d like to talk about how Roboto was born — why we decided to create it, and the design choices we made in the process.

Why replace Droid?
Droid is a great font family which served Android well over the years, but it was designed and optimized for screens that were much lower in pixel density than today’s HD displays. To be legible at smaller sizes, and to avoid turning to anti-aliased grey mush, the letter forms had to be quite dramatic. They had a tall x-height and a very regular rhythm so that they snapped to the pixel grid crisply. The bold variant was significantly wider than the regular text, because when a letter’s vertical strokes are one pixel thick, the only way to be bold is to double! It’s no surprise that on high rez screens, and at larger more dramatic headline sizes, Droid struggled to achieve both the openness and information density we wanted in Ice Cream Sandwich.

What were we looking for?
Most important was to create something that matched our ambitious design goals for Ice Cream Sandwich. Emotionally we wanted Ice Cream Sandwich to enchant you, to be attractive and eye-catching. Our new typeface had to be modern, crisp, and structured to match our new emphasis on open layouts and rigid grid alignments, but also friendly and approachable to make Android appealing, and a little bit more human.

Interactive display is a new and still evolving medium and what it demands from type design is subtly and uniquely different from print. We wanted to take maximum advantage of ultra high density screens like that of Galaxy Nexus, yet still be crisp and legible on lower resolution displays like that of Nexus S. Because Roboto would be used for the UI we wanted to make the bold very similar to the metrics of the regular weight, so that text could gracefully switch from bold to regular (like when you read emails in your inbox). We also wanted to include tabular figures (numbers that are all the same width) so we could display times, dates and other counters without having the characters jump around.

Finally we wanted Roboto to make a design statement in and of itself, in the same way that we wanted every screen on the device to have a strong and unique design point of view. Yet, just like the rest of the UI, Roboto is ultimately a medium for your content. We wanted Roboto to have a design character that made it recognizable, to be distinctive when you were paying attention, but never be overbearing or distracting.

How did we make it?
We realized early on that we needed something with a strong geometric backbone to hold up to our new open “Magazine UI” layouts. When we got rid of the boxes and bevels, dividers and other structural crutches, the more humanist fonts of our legacy felt uncomfortable and a little chaotic. Naturally we looked at some of the circle based geometrics like Avenir and Futura, but they’re very demanding in the rhythm of their metrics and ultimately were a little too soft for the crisp corners that we were using in the UI. The breakthrough came quickly when we settled on a straight sided grotesk.

Roboto’s straight sided capitals and distinctive racetrack-shaped rounded letters turned out to be perfect for our needs in a system font. It is space efficient and and holds its own for the short terse messages that are so common in UI. It has a high degree of compatibility with legacy designs created for Droid, because in almost all cases the same size Roboto sets in the same amount of space. Yet because of Roboto’s more structured forms we can actually set it smaller and with tighter line spacing, allowing us to put more information on the screen without inducing claustrophobia.

One of the potential drawbacks of a grotesk font is that the structured evenness of the type can make it more difficult to read. We started by softening up the lower case letters, and then experimented with opening up some of the glyphs to get a more diverse rhythm. We found that by adding a little more diversity to the lower case the font become more readable. In particular, we opened up the ‘e’ and ‘g’ while keeping the ‘a’, ‘c’ and ‘s’ characters closed. The rhythm starts to compare more to book types and makes for really nice reading over longer spans of text.

In the end we were iterating ceaselessly on minor details of the letters, extending the character set to Greek and Cyrillic, and tweaking the rendering so that Roboto would look just as good at all sizes and resolutions. In fact our work is not yet done as we continue to extend the character set and begin to hint Roboto so it works as well on computers as it does on Android devices. Still, I’m terrifically proud of the work the team and our lead typographer did in an ludicrously short amount of time. Roboto is a new foundation for Android and the team really deserves kudos for their accomplishment.

I hope you’ve enjoyed this little ‘behind the scenes’ peek at Android’s evolution. I had fun writing it, so let me know if you’d be interested in hearing more.
1
Add a comment...
Communities
8 communities
Work
Occupation
Front End Developer
Skills
HTML, CSS, JavaScript, C#, SQL, Classic ASP
Employment
  • Bookatable (formerly Livebookings)
    Lead Front End Developer, 2010 - 2014
  • FindAProperty (now Zoopla)
    Front End Developer, 2009 - 2010
  • MoD
    Front End Developer
    [redacted] [redacted] the [redacted] to [redacted] [redacted] [redacted] and [redacted] [redacted] [redacted] [redacted] ([redacted]).
  • NTD (Net Trading Direct)
    Developer
  • No Limits Internet Solutions Ltd.
    Developer
Basic Information
Gender
Male
Relationship
Married
Apps with Google+ Sign-in
  • AutoCast
Story
Tagline
Emasculated, etiolated, ennuyant
Bragging rights
Can eat an entire packet of Fisherman's Friends in one go.
Education
  • University of Hertfordshire
    1994 - 1997
  • Warden Park School, Cuckfield
    1983 - 1987
  • Ardingly College
    1979 - 1983
Links
YouTube
Phil Green's +1's are the things they like, agree with, or want to recommend.
“A Journey through Middle-earth”: A Chrome Experiment for the multi-devi...
googledevelopers.blogspot.com

By Max Heinritz, Product Manager and (Tolkien) Troll Evader Cross-posted from the Chromium Blog For the past few years, building multimedia

Emmet LiveStyle
chrome.google.com

Live bi-directional CSS editing of new generation

Cloud9 - Chrome Web Store
chrome.google.com

Cloud9 is an online platform for development that makes developing applications more convenient than ever

Google Sky Map
market.android.com

Google Sky Map turns your Android-powered device into a window on the night sky. Google Sky Map turns your Android-powered mobile phone into

Documents To Go 3.0 Main App
market.android.com

View Microsoft Word, Excel & PowerPoint Files - All in 1 App! FREE! View native Microsoft Word, Excel and PowerPoint files & attachm

INCREDIBOX
www.incredibox.fr

Express your musicality, pump it up and chill!

Occupy Flash - The movement to rid the world of the Flash Player plugin
www.occupyflash.org

Flash Player is dead. It's a fossil, left over from the era of closed standards and unilateral corporate control of web technology. Join us

vlog.it
www.vlog.it

The 4th version of Marco Rosella's videoblog, now transformed in a rotating HTML5 (with SVG animations) collection of Vimeo and YouTube favo

"I think they're mad": Inside a 48 hour battle to build the best video game
arstechnica.com

We send one writer to follow 20 teams of game developers as they fight exhaustion and each other to create the best badger-themed video game

Star Wars Snowflakes
anthonyherreradesigns.com

Here are some fun Star Wars snowflakes to make your holidays a little more geeky.

25 jQuery Plugins to help with Responsive Layouts
speckyboy.com

Home; Archives; About & Email; Advertise; Jobs; Write for Us. Subscribe via RSS; Subscribe via RSS; Follow us on Facebook. Design Magazi

Phil Green’s Setapp (@ShirtlessKirk)
www.setapp.me

Setapp finds you applications and tools that you must know, based on your expertise.

Faun
www.last.fm

Watch videos & listen free to Faun: Satyros, Rhiannon & more, plus 39 pictures. Faun is a German medieval folk group combining ancie

Appward's Field Guide to Web Applications
www.html5rocks.com

Welcome to the 12th Edition of Bert Appward's Field Guide to Web Applications.

Handcent SMS
market.android.com

Handcent SMS is a powerful free sms/mms tools for your android phone The most popular messaging app on the Android Market, Handcent SMS is a

A Muppet Wicker Man Comic Trailer
www.youtube.com

Full comic online at http://issuu.com/soundofdrowning/docs/muppetwickerman

jQuery Mobile Icon Pack Extra icons for your jQuery Mobile project! - an...
andymatthews.net

Andy Matthews is a talented web and application developer living in Nashville TN. He has over 12 years of experience in graphic design, prog

Tree with CSS3, literally
hertzen.com

Info. This page is built with only CSS3 and HTML, without using a single image, JavaScript, SVG etc. It relies heavily on CSS3 selectors and