1 of 22

A tour of Android typography

Raph Levien, ATypI São Paulo

2015-10-16

​

2 of 22

Outline

​

Challenges and Opportunities

​

Material Design

​

Roboto 2

​

Noto

​

OpenType

​

High quality paragraph layout

Proprietary + Confidential

Proprietary + Confidential

Proprietary + Confidential

3 of 22

Challenges and opportunities

Challenge

Opportunity

Battery and RAM constraints

60 fps

Small screen

Support ~all the scripts of the world

Small text regions

Powerful compute resources

Animations and transitions

Very high resolution (500+ dpi)

Roboto and Noto fonts

Line breaking improvements

​

How to use Big 3 Ideas:

​

  1. Replace body text by either typing directly into table boxes or copy and paste content in from other source

Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem

4 of 22

Display technology

How to use Big 3 Ideas:

​

  • Replace body text by either typing directly into table boxes or copy and paste content in from other source

Photo credit: Peter Dassow

Sharp PC-1211 pocket computer, ca 1980

Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem

5 of 22

Display technology

Laptop

~100ppi

HTC One m7

468ppi

4k monitor

200ppi

inkjet printer

360ppi

How to use Big 3 Ideas:

​

  • Replace body text by either typing directly into table boxes or copy and paste content in from other source

Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem

6 of 22

Display technology

Nexus 6P

1440 x 2560 pixels

515 ppi

​

How to use Big 3 Ideas:

​

  • Replace body text by either typing directly into table boxes or copy and paste content in from other source

Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem

7 of 22

Material Design (L+)

  • An entire design language
  • Widely adopted
    • Web and Android apps
  • Typography is integral
    • Multiple weights and sizes
    • Layout, alignment, space

https://www.google.com/design/spec/style/typography.html

Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem

8 of 22

Roboto 2 (L+)

  • Updated design
  • Expanded Unicode coverage
    • 1051 → 3296 glyphs
    • Unicode 8 for Latin, Greek Cyrillic
  • 18 weights/styles shipping on device
    • Thin, Light, Regular, Medium, Bold Black
    • True italics
    • Condensed
  • Fully open source (including build chain)

Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem

9 of 22

Roboto 2: design update

Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem

10 of 22

Android’s global reach

11 of 22

The next billion users

Photo credit:

​

Tony Spencer TO

Creative Commons BY-NC

Yangon, Myanmar

12 of 22

Roboto 2: Unicode coverage

Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem

13 of 22

Noto script support in Marshmallow

Arabic, Armenian, Balinese, Bamum, Batak, Bengali, Buginese, Buhid, Canadian Aboriginal, Cham, Cherokee, Coptic, Devanagari, Ethiopic, Georgian, Glagolitic, Gujarati, Gurmukhi, Hanunoo, Hebrew, Javanese, Kannada, Kayah Li, Khmer, Lao, Lepcha, Limbu, Lisu, Malayalam, Mandaic, Meetei Mayek, Mongolian, Myanmar, N'Ko, New Tai Lue, Ol Chiki, Oriya, Rejang, Saurashtra, Sinhala, Sundanese, Syloti Nagri, Syriac Estrangela, Tagbanwa, Tai Le, Tai Tham, Tai Viet, Tamil, Telugu, Thaana, Thai, Tibetan, Tifinagh, Vai, Yi

Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem

14 of 22

Noto script support in Marshmallow

Tibetan

Vai

Mongolian

Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem

15 of 22

Noto CJK (L+)

  • Joint project with Adobe
  • Rendered on Android with high-quality (Adobe) CFF renderer
    • http://www.freetype.org/
  • Support for Simplified and Traditional Chinese, Japanese, Korean
    • Comprehensive coverage
  • Unified design but correct handling of variants

​

Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem

16 of 22

Noto Color Emoji

  • Bitmap color font technology
    • Standardized in OpenType 1.7
  • No special app support needed, it’s “just text”
  • Flags and keycaps
    • Implemented with GSUB ligatures

Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem

17 of 22

OpenType support (L+)

  • Kerning and ligatures
    • on by default, but can disable
  • font-feature-settings
    • old-style, tabular, lining figures
    • fraction forms
    • discretionary ligatures
  • ‘locl’ feature: localized forms
    • automatically selected based on locale
  • Letter spacing
    • (not really an OpenType feature but still a refinement)
    • Automatically disabled for connected scripts

Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem

18 of 22

Challenge: line breaking on small screens

​

Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem

19 of 22

High quality paragraph layout (M+)

​

  • Shipping in Marshmallow
  • Automatic hyphenation
    • Algorithms and patterns based on TeX
  • Whole-paragraph optimization
    • Also based on TeX
    • Parameters tuned:
      • Don’t hyphenate next-to-last line
      • Do hyphenate to prevent one word on last line
  • High quality mode on by default
    • But can disable under program control
    • Performance comparable to Lollipop

Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem

20 of 22

High quality paragraph layout (M+)

​

Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem

21 of 22

breakStrategy: balanced (M+)

​

Based on Adobe’s text-wrap: balanced proposal

normal

balanced

It’s not great when a word is by itself on the last�line.

It’s not great when a word

is by itself on the last line.

Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem

22 of 22

THANK YOU

Questions?