third_party/polymer/v1_0/components-chromium/paper-styles/classes/typography.html

   1 <!--
   2 @license
   3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
   4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7 Code distributed by Google as part of the polymer project is also
   8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   9 -->
  10 <link rel="import" href="../../font-roboto/roboto.html">
  11
  12 <!--
  13 Typographic styles are provided matching the Material Design standard styles:
  14 http://www.google.com/design/spec/style/typography.html#typography-standard-styles
  15
  16 To make use of them, apply a `paper-font-<style>` class to elements, matching
  17 the font style you wish it to inherit.
  18
  19   <header class="paper-font-display2">Hey there!</header>
  20
  21 Note that these are English/Latin centric styles. You may need to further adjust
  22 line heights and weights for CJK typesetting. See the notes in the Material
  23 Design typography section.
  24 -->
  25 <style>
  26
  27 .paper-font-display4,
  28 .paper-font-display3,
  29 .paper-font-display2,
  30 .paper-font-display1,
  31 .paper-font-headline,
  32 .paper-font-title,
  33 .paper-font-subhead,
  34 .paper-font-body2,
  35 .paper-font-body1,
  36 .paper-font-caption,
  37 .paper-font-menu,
  38 .paper-font-button {
  39   font-family: 'Roboto', 'Noto', sans-serif;
  40   -webkit-font-smoothing: antialiased;  /* OS X subpixel AA bleed bug */
  41 }
  42
  43 .paper-font-code2,
  44 .paper-font-code1 {
  45   font-family: 'Roboto Mono', 'Consolas', 'Menlo', monospace;
  46   -webkit-font-smoothing: antialiased;  /* OS X subpixel AA bleed bug */
  47 }
  48
  49 /* Opt for better kerning for headers & other short labels. */
  50 .paper-font-display4,
  51 .paper-font-display3,
  52 .paper-font-display2,
  53 .paper-font-display1,
  54 .paper-font-headline,
  55 .paper-font-title,
  56 .paper-font-subhead,
  57 .paper-font-menu,
  58 .paper-font-button {
  59   text-rendering: optimizeLegibility;
  60 }
  61
  62 /*
  63 "Line wrapping only applies to Body, Subhead, Headline, and the smaller Display
  64 styles. All other styles should exist as single lines."
  65 */
  66 .paper-font-display4,
  67 .paper-font-display3,
  68 .paper-font-title,
  69 .paper-font-caption,
  70 .paper-font-menu,
  71 .paper-font-button {
  72   white-space: nowrap;
  73   overflow: hidden;
  74   text-overflow: ellipsis;
  75 }
  76
  77 .paper-font-display4 {
  78   font-size: 112px;
  79   font-weight: 300;
  80   letter-spacing: -.044em;
  81   line-height: 120px;
  82 }
  83
  84 .paper-font-display3 {
  85   font-size: 56px;
  86   font-weight: 400;
  87   letter-spacing: -.026em;
  88   line-height: 60px;
  89 }
  90
  91 .paper-font-display2 {
  92   font-size: 45px;
  93   font-weight: 400;
  94   letter-spacing: -.018em;
  95   line-height: 48px;
  96 }
  97
  98 .paper-font-display1 {
  99   font-size: 34px;
 100   font-weight: 400;
 101   letter-spacing: -.01em;
 102   line-height: 40px;
 103 }
 104
 105 .paper-font-headline {
 106   font-size: 24px;
 107   font-weight: 400;
 108   letter-spacing: -.012em;
 109   line-height: 32px;
 110 }
 111
 112 .paper-font-title {
 113   font-size: 20px;
 114   font-weight: 500;
 115   line-height: 28px;
 116 }
 117
 118 .paper-font-subhead {
 119   font-size: 16px;
 120   font-weight: 400;
 121   line-height: 24px;
 122 }
 123
 124 .paper-font-body2 {
 125   font-size: 14px;
 126   font-weight: 500;
 127   line-height: 24px;
 128 }
 129
 130 .paper-font-body1 {
 131   font-size: 14px;
 132   font-weight: 400;
 133   line-height: 20px;
 134 }
 135
 136 .paper-font-caption {
 137   font-size: 12px;
 138   font-weight: 400;
 139   letter-spacing: 0.011em;
 140   line-height: 20px;
 141 }
 142
 143 .paper-font-menu {
 144   font-size: 13px;
 145   font-weight: 500;
 146   line-height: 24px;
 147 }
 148
 149 .paper-font-button {
 150   font-size: 14px;
 151   font-weight: 500;
 152   letter-spacing: 0.018em;
 153   line-height: 24px;
 154   text-transform: uppercase;
 155 }
 156
 157 .paper-font-code2 {
 158   font-size: 14px;
 159   font-weight: 700;
 160   line-height: 20px;
 161 }
 162
 163 .paper-font-code1 {
 164   font-size: 14px;
 165   font-weight: 700;
 166   line-height: 20px;
 167 }
 168
 169 </style>