-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
72 lines (71 loc) · 2.61 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>
iOS Dynamic Type
</title>
<meta name="author" content="mrmrs">
<meta name="description" content="System fonts">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/ios-dynamic-type.min.css">
<style>
blockquote { border: 0; padding-left: 0; margin-left: 0; }
</style>
</head>
<body>
<header>
<h1 class="ios-headline">System Fonts CSS</h1>
<h2 class="ios-subheadline">This page will not look the same across platforms.</h2>
<p>
"Going beyond the system font, iOS has dynamic type behavior, which can provide
an additional level of fit and finish to your content. These text styles
identify more than simply a particular font family; instead, they represent an
entire style, including size and weight. These styles are therefore
characterized by values given to the more-general font CSS property."
</p>
<p>This css module provides some single purpose classes for utilitizing iOS' dynamic
type settings on the web.
</p>
</header>
<main role="main">
<h1 class="ios-headline">This is a headline</h1>
<h2 class="ios-subheadline">This is a subheadline</h2>
<img src="http://placekitten.com/g/900/600">
<caption class="ios-caption">
This is first caption style for something about how cute cats are
</caption>
<caption class="ios-caption2">
This is the second caption style for something about how cute cats are
</caption>
<blockquote>
<p class="ios-body">
You can say, "I love you," in Helvetica. And you can say it
with Helvetica Extra Light if you want to be really fancy. Or you can say it
with the Extra Bold if it's really intensive and passionate, you know, and it
might work.
</p>
<p class="ios-tall-body">
- Robert Bringhurst
</p>
</blockquote>
<h1 class="ios-short-headline">Short headline</h1>
<h2 class="ios-short-subheadline">Short subheadline</h2>
<blockquote>
<p class="ios-short-body">
Typographic style is founded not on any one technology of typesetting or
printing, but on the primitive yet subtle craft of writing.
</p>
<p>
- Robert Bringhurst
</p>
</blockquote>
<footer>
<p class="ios-footnote">
This is a footnote about how excited I am for more platform specific system fonts.
</p>
</footer>
</main>
</body>
</html>