am 1a5bb9d5: Update Typography design guide Bug: 6947941

* commit '1a5bb9d5cf13a2d2f9086926a7a020cfa08efd66':
  Update Typography design guide Bug: 6947941
This commit is contained in:
Roman Nurik
2013-08-14 11:21:45 -07:00
committed by Android Git Automerger
6 changed files with 24 additions and 12 deletions

View File

@@ -4,8 +4,10 @@ page.title=Downloads
<div class="layout-content-row"> <div class="layout-content-row">
<div class="layout-content-col span-9"> <div class="layout-content-col span-9">
<p>Want everything? We've bundled all the downloads available on Android Design into a single ZIP file. <p>Want everything? We've bundled all the downloads available on Android Design, except for the
You can also download individual files listed below.</p> <a href="#roboto">Roboto</a> font family, into a single ZIP file. You can also download
individual files listed below.</p>
<p>You may use these materials without restriction in your apps and to develop your apps.</p> <p>You may use these materials without restriction in your apps and to develop your apps.</p>
</div> </div>
@@ -13,7 +15,7 @@ You can also download individual files listed below.</p>
<p> <p>
<a class="download-button" onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'All Design Assets']);" <a class="download-button" onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'All Design Assets']);"
href="{@docRoot}downloads/design/Android_Design_Downloads_20120823.zip">Download All</a> href="{@docRoot}downloads/design/Android_Design_Downloads_20130814.zip">Download All</a>
</p> </p>
</div> </div>
@@ -83,10 +85,12 @@ modify to match your theme, plus source files.</p>
<div class="layout-content-row"> <div class="layout-content-row">
<div class="layout-content-col span-5"> <div class="layout-content-col span-5">
<h4>Roboto</h4> <h4 id="roboto">Roboto</h4>
<p>Ice Cream Sandwich introduced a new type family named Roboto, created specifically for the <p>Ice Cream Sandwich introduced a new type family named Roboto, created specifically for the
requirements of UI and high-resolution screens.</p> requirements of UI and high-resolution screens.</p>
<p><a href="{@docRoot}design/style/typography.html#actionbar">More on Roboto</a></p> <p><a href="{@docRoot}design/style/typography.html">More on Roboto</a></p>
<p><a href="http://www.google.com/fonts/specimen/Roboto" class="external-link">Roboto on Google Fonts</a></p>
<p><a href="http://www.google.com/fonts/specimen/Roboto+Condensed" class="external-link">Roboto Condensed on Google Fonts</a></p>
</div> </div>
<div class="layout-content-col span-4"> <div class="layout-content-col span-4">
@@ -98,7 +102,7 @@ requirements of UI and high-resolution screens.</p>
<p> <p>
<a class="download-button" onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Roboto ZIP']);" <a class="download-button" onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Roboto ZIP']);"
href="{@docRoot}downloads/design/Roboto_Hinted_20120823.zip">Roboto</a> href="https://github.com/google/roboto/archive/latest-hinted.zip">Roboto</a>
<a class="download-button" onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Roboto Specemin Book']);" <a class="download-button" onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Roboto Specemin Book']);"
href="{@docRoot}downloads/design/Roboto_Specimen_Book_20111129.pdf">Specimen Book</a> href="{@docRoot}downloads/design/Roboto_Specimen_Book_20111129.pdf">Specimen Book</a>
</p> </p>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

View File

@@ -10,17 +10,25 @@ page.tags="textview","font"
</div> </div>
<div class="layout-content-col span-5"> <div class="layout-content-col span-5">
<p>
<a class="download-button" onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Roboto ZIP']);"
href="https://github.com/google/roboto/archive/latest-hinted.zip">Download Roboto</a>
</p>
<p>The Android design language relies on traditional typographic tools such as scale, space, rhythm, <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 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 users quickly understand a screen of information. To support such use of typography, Ice Cream
Sandwich introduced a new type family named Roboto, created specifically for the requirements of UI Sandwich introduced a new type family named
and high-resolution screens. The current TextView framework supports regular, bold, italic, and bold <a href="http://www.google.com/fonts/specimen/Roboto" class="external-link">Roboto</a>, created
italic weights by default.</p> specifically for the requirements of UI and high-resolution screens.</p>
<img src="{@docRoot}design/media/typography_alphas.png"> <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 ZIP (@typography page)']);"
href="{@docRoot}downloads/design/Roboto_Hinted_20120823.zip">Download Roboto</a></p>
<p><a onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Roboto Specimen Booke (@typography page)']);" <p><a onClick="_gaq.push(['_trackEvent', 'Design', 'Download', 'Roboto Specimen Booke (@typography page)']);"
href="{@docRoot}downloads/design/Roboto_Specimen_Book_20111129.pdf">Specimen Book</a></p> href="{@docRoot}downloads/design/Roboto_Specimen_Book_20111129.pdf">Specimen Book</a></p>