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