1<!--
2@license
3Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7Code distributed by Google as part of the polymer project is also
8subject 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<!--
13Typographic styles are provided matching the Material Design standard styles:
14http://www.google.com/design/spec/style/typography.html#typography-standard-styles
15
16To make use of them, apply a `paper-font-<style>` class to elements, matching
17the font style you wish it to inherit.
18
19  <h1 class="paper-font-display2">Hey there!</h1>
20
21Note that these are English/Latin centric styles. You may need to further adjust
22line heights and weights for CJK typesetting. See the notes in the Material
23Design 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
64styles. 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: 500;
166  line-height: 20px;
167}
168
169</style>
170