69 lines
2.9 KiB
Plaintext
69 lines
2.9 KiB
Plaintext
page.title=Typography
|
|
page.tags="textview","font"
|
|
page.metaDescription=How to use typography in your Android apps.
|
|
@jd:body
|
|
|
|
<div class="layout-content-row">
|
|
<div class="layout-content-col span-8">
|
|
|
|
<img src="{@docRoot}design/media/typography_main.png">
|
|
|
|
</div>
|
|
<div class="layout-content-col span-5">
|
|
|
|
<p>
|
|
<a class="download-button" onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Roboto ZIP']);"
|
|
href="{@docRoot}downloads/design/roboto-1.2.zip">Download Roboto</a>
|
|
</p>
|
|
|
|
<p>The Android design language relies on traditional typographic tools such as scale, space, rhythm,
|
|
and alignment with an underlying grid. Successful deployment of these tools is essential to help
|
|
users quickly understand a screen of information. To support such use of typography, Ice Cream
|
|
Sandwich introduced a new type family named
|
|
<a href="http://www.google.com/fonts/specimen/Roboto" class="external-link">Roboto</a>, created
|
|
specifically for the requirements of UI and high-resolution screens.</p>
|
|
|
|
<p>The current {@link android.widget.TextView} framework offers Roboto in thin, light, regular and bold
|
|
weights, along with an italic style for each weight. The framework also offers the
|
|
<a href="http://www.google.com/fonts/specimen/Roboto+Condensed" class="external-link">Roboto Condensed</a>
|
|
variant in regular and bold weights, along with an italic style for each weight.</p>
|
|
|
|
<img src="{@docRoot}design/media/typography_variants@2x.png" width="220">
|
|
|
|
<p><a onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Roboto Specimen Booke (@typography page)']);"
|
|
href="{@docRoot}downloads/design/Roboto_Specimen_Book_20131031.pdf">Specimen Book</a></p>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<div class="layout-content-row">
|
|
<div class="layout-content-col span-6">
|
|
|
|
<h4>Default type colors</h4>
|
|
<p>The Android UI uses the following default color styles: <code>textColorPrimary</code> and
|
|
<code>textColorSecondary</code>. For light themes use <code>textColorPrimaryInverse</code> and
|
|
<code>textColorSecondaryInverse</code>. The framework text color styles also support variants for
|
|
touch feedback states when used inside UI elements.</p>
|
|
|
|
<img src="{@docRoot}design/media/typography_defaults.png">
|
|
|
|
</div>
|
|
<div class="layout-content-col span-6">
|
|
|
|
<h4>Typographic Scale</h4>
|
|
<p>Contrast in type sizes can go a long way to create ordered, understandable layouts. However, too
|
|
many different sizes in the same UI can be messy. The Android framework uses the following limited
|
|
set of type sizes:</p>
|
|
|
|
<img src="{@docRoot}design/media/typography_sizes.png">
|
|
|
|
<p>Users can select a system-wide scaling factor for text in the Settings app. In order to support
|
|
these accessibility features, type should be specified in scale-independent pixels
|
|
(<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>)
|
|
wherever possible. Layouts supporting scalable types should be tested against these settings.</p>
|
|
|
|
</div>
|
|
</div>
|