1page.title=Typography
2page.tags="textview","font"
3page.metaDescription=How to use typography in your Android apps.
4@jd:body
5
6<div class="layout-content-row">
7  <div class="layout-content-col span-8">
8
9    <img src="{@docRoot}design/media/typography_main.png">
10
11  </div>
12  <div class="layout-content-col span-5">
13
14<p>
15  <a class="download-button"  onClick="ga('send', 'event', 'Design', 'Download', 'Roboto ZIP');"
16    href="{@docRoot}downloads/design/roboto-1.2.zip">Download Roboto</a>
17</p>
18
19<p>The Android design language relies on traditional typographic tools such as scale, space, rhythm,
20and alignment with an underlying grid. Successful deployment of these tools is essential to help
21users quickly understand a screen of information. To support such use of typography, Ice Cream
22Sandwich introduced a new type family named
23<a href="http://www.google.com/fonts/specimen/Roboto" class="external-link">Roboto</a>, created
24specifically for the requirements of UI and high-resolution screens.</p>
25
26<p>The current {@link android.widget.TextView} framework offers Roboto in thin, light, regular and bold
27weights, along with an italic style for each weight. The framework also offers the
28<a href="http://www.google.com/fonts/specimen/Roboto+Condensed" class="external-link">Roboto Condensed</a>
29variant in regular and bold weights, along with an italic style for each weight.</p>
30
31    <img src="{@docRoot}design/media/typography_variants@2x.png" width="220">
32
33<p><a onClick="ga('send', 'event', 'Design', 'Download', 'Roboto Specimen Book (@typography page)');"
34      href="{@docRoot}downloads/design/Roboto_Specimen_Book_20131031.pdf">Specimen Book</a></p>
35
36  </div>
37</div>
38
39<hr>
40
41<div class="layout-content-row">
42  <div class="layout-content-col span-6">
43
44<h4>Default type colors</h4>
45<p>The Android UI uses the following default color styles: <code>textColorPrimary</code> and
46<code>textColorSecondary</code>. For light themes use <code>textColorPrimaryInverse</code> and
47<code>textColorSecondaryInverse</code>. The framework text color styles also support variants for
48touch feedback states when used inside UI elements.</p>
49
50    <img src="{@docRoot}design/media/typography_defaults.png">
51
52  </div>
53  <div class="layout-content-col span-6">
54
55<h4>Typographic Scale</h4>
56<p>Contrast in type sizes can go a long way to create ordered, understandable layouts. However, too
57many different sizes in the same UI can be messy. The Android framework uses the following limited
58set of type sizes:</p>
59
60<img src="{@docRoot}design/media/typography_sizes.png">
61
62<p>Users can select a system-wide scaling factor for text in the Settings app. In order to support
63these accessibility features, type should be specified in scale-independent pixels
64(<acronym title="Scale-independent pixels. One sp is one pixel on a 160 dpi screen if the user's global text scale is set to 100%.">sp</acronym>)
65wherever possible. Layouts supporting scalable types should be tested against these settings.</p>
66
67  </div>
68</div>
69