-
Notifications
You must be signed in to change notification settings - Fork 8
Expand file tree
/
Copy pathsample.html
More file actions
275 lines (258 loc) · 10.9 KB
/
sample.html
File metadata and controls
275 lines (258 loc) · 10.9 KB
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
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style/latinmodern-mono.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="style/latinmodern-roman.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="style/latinmodern-sans.css" type="text/css" charset="utf-8" />
<style type="text/css">
body {
font-family: 'Latin Modern Sans', Arial, Helvetica, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Latin Modern Sans', Arial, Helvetica, sans-serif;
font-weight: bold;
}
dl dt {
font-weight: bold;
}
dl dd {
margin-bottom: 1em;
}
em {
font-style: italic;
}
pre, kbd {
font-family: 'Latin Modern Mono', 'Courier New', Courier, monospace;
}
cite, q, blockquote {
font-family: 'Latin Modern Roman', Georgia, 'Times New Roman', Times, serif;
font-style: italic;
}
sub, sup {
font-size: 50%;
}
.smallcaps {
font-family: 'Latin Modern Sans', Arial, Helvetica, sans-serif;
font-variant: small-caps;
}
.p10 {
font-size: 10px;
}
.p11 {
font-size: 11px;
}
.p12 {
font-size: 12px;
}
.p14 {
font-size: 14px;
}
.p16 {
font-size: 16px;
}
.p18 {
font-size: 18px;
}
.p20 {
font-size: 20px;
}
.p22 {
font-size: 22px;
}
.p24 {
font-size: 24px;
}
.p26 {
font-size: 26px;
}
.p28 {
font-size: 28px;
}
.p30 {
font-size: 30px;
}
</style>
</meta>
<body>
<h1>Typography sample</h1>
<h2>Typograpy used</h2>
<p>
This sampler uses only a subset of the fonts available, see the
source for details.
</p>
<dl>
<dt><body></dt>
<dd>font-family: 'Latin Modern Sans', Arial, Helvetica, sans-serif;</dd>
<dt><dl> <dt></dt>
<dd>font-weight: bold</dd>
<dt><pre></dt>
<dd>font-style: italic</dd>
<dt><pre></dt>
<dt><kbd></dt>
<dd>font-family: 'Latin Modern Mono', 'Courier New', Courier, monospace;</dd>
<dt><small caps></dt>
<dd>font-family: 'Latin Modern Sans', Arial, Helvetica, sans-serif; font-variant: small-caps;</dd>
<dt><sub></dt>
<dt><sup></dt>
<dd><pre>50%</pre></dd>
<dt><cite></dt>
<dt><q></dt>
<dt><blockquote></dt>
<dd>font-family: 'Latin Modern Roman', 'Times New Roman', Times, serif; font-style: italic;</dd>
<dt><h1></dt>
<dt><h2></dt>
<dt><h3></dt>
<dt><h4></dt>
<dt><h5></dt>
<dt><h6></dt>
<dd>font-family: 'Latin Modern Sans', Arial, Helvetica, sans-serif; font-weight: bold;</dd>
</dl>
<p>
You may also be interested in a more thorough
display of all the available styles shown here:
</p>
<ul>
<li>All <a href="samples-mono.html">Latin Modern Mono</a> samples</li>
<li>All <a href="samples-roman.html">Latin Modern Roman</a> samples</li>
<li>All <a href="samples-sans.html">Latin Modern Sans</a> samples</li>
</ul>
<h2>Example body text</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at felis
hendrerit, venenatis urna nec, varius augue. Phasellus ullamcorper tortor
magna. Duis in auctor nisl, nec varius nibh. Nulla posuere, ex quis facilisis
dignissim, nisi libero sollicitudin nisl, eu sagittis diam ipsum ut nibh. Sed
egestas tortor est, id consequat quam iaculis in. Proin cursus eros ante, vitae
blandit orci ornare vitae. Maecenas malesuada, ante id commodo malesuada, nisl
leo semper metus, sed sagittis purus elit nec enim. Curabitur ut mattis sapien.
<h2>Example text in <p> (paragraph)</h2>
<p>
Suspendisse eget sem sit amet sapien maximus malesuada. Donec leo
turpis, interdum non porttitor vitae, rhoncus in dolor. Aliquam
congue, magna nec aliquet pharetra, sapien elit facilisis massa, et
luctus velit purus at enim. Morbi lectus sem, porttitor eget
feugiat id, molestie eget ligula. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Duis mollis
eros a odio volutpat finibus. Vivamus mauris nulla, sodales at
nulla a, venenatis suscipit sem. Donec pulvinar ultrices arcu. Sed
iaculis eleifend quam, sed condimentum sapien volutpat id.
Suspendisse sed finibus nibh, quis posuere diam. Integer et lacus
augue. Ut convallis ante ipsum, vel porta leo varius rhoncus.
Mauris diam sem, venenatis vitae risus nec, maximus volutpat urna.
</p>
<h2>Example pre-formatted text/code</h2>
<pre>
#include <stdio.h>
/*
* Maecenas consequat, lorem vel pulvinar facilisis, nibh turpis feugiat nunc,
* vel consectetur turpis tortor in ante. Fusce at nulla ipsum. Pellentesque
* cursus velit laoreet, dignissim mauris ac, molestie lacus. Suspendisse in mi
* placerat, ultricies urna eget, semper ex.
*/
int main(int argc, const char *argv[])
{
printf("Hello, world!");
return 0;
}
</pre>
<h2>Bolds, Italics, Underlines</h2>
<p>
Here is some <b>Bold Text</b>, followed by some <i>Italics Text</i>,
and then by some <u>Underlined Text</u>.
</p>
<h2>Other styles</h2>
Here we can find <acronym>acronym</acronym> <cite>Cite Tags Being Used</cite>, <del>deleted text with a del tag</del>, <ins>text inserted with the ins tag</ins>. Words being <em>emphasized</em>, <kbd>text inside a kbd tag</kbd>. Along with <q>non-block quotations with <q></q>.
<h2>Even more styles</h2>
Some text in <small>small text</small>, <s>overstruck text</s>, <strong>strong text</strong>. Chemistry
symbols and math to show case sub-script and super script with <sup> and <sub> tags. H<sub>2</sub>O. c<sup>2</sup> = a<sup>2</sup> + b<sup>2</sup>
<p>
Then we can check out some <i><b>Bold Italics Text</b></i>,
<u><b>Bold Underlined</b></u>, <u><i>Italics Underlined</i></u>,
and <u><i><b>Bold Italics Underlined Text</b></i></u>.
</p>
<h2>Small-caps variants</h2>
<p class="smallcaps">
In vel est nisl. Praesent eget ante ex. Vestibulum auctor nisi at
est tincidunt, quis lobortis ante imperdiet. Cras dapibus placerat
velit at lacinia. Praesent eros leo, imperdiet quis urna a, porta
facilisis nisl. Sed pretium quis nunc vitae pretium. Pellentesque a
lorem porttitor, tempus ante a, imperdiet dui.
</p>
<h2>Text in a blockquote</h2>
<blockquote>
Curabitur elementum diam vel enim suscipit, quis sagittis felis semper. Morbi
tempus cursus lorem, in consequat dolor convallis a. In orci tortor, fringilla
auctor justo eu, ultricies mattis lectus. Nunc urna risus, ornare nec urna id,
tincidunt placerat augue. Praesent vel iaculis nisi. Proin fermentum tellus in
urna imperdiet porttitor. Aenean et auctor erat, sed viverra leo. Donec pretium
ligula vitae nunc elementum tristique. Proin erat nulla, vehicula et rutrum
vitae, auctor ac massa.
</blockquote>
<h2>Different sizes (10,11,12,14,16,18,20,24,28,30)</h2>
<p class="p10">
10.
Aliquam convallis nisi ac commodo mollis. Praesent ornare varius purus,
ut iaculis nulla ornare in.
</p>
<p class="p11">
11.
Nam malesuada diam feugiat, scelerisque dui a, tincidunt odio.
Pellentesque bibendum condimentum blandit.
</p>
<p class="p12">
12.
Aliquam id tempus magna. Aenean imperdiet tincidunt blandit. Sed
facilisis eu lacus at vulputate.
</p>
<p class="p14">
14.
Sed bibendum ullamcorper est quis eleifend. Nunc mollis tellus at
bibendum elementum. Duis quis elit nec diam dapibus suscipit vel semper
lorem.
</p>
<p class="p16">
16.
Integer vitae nulla at ante lacinia tempus. Nullam sodales, neque in
sodales ultricies, sapien lorem ornare libero, lobortis tempor ligula
felis quis lorem.
</p>
<p class="p18">
18.
Donec ut arcu lacus. Maecenas scelerisque neque sed bibendum ornare.
Nunc id luctus mi, at suscipit risus.
</p>
<p class="p20">
20.
Sed sodales est urna, non iaculis odio porta non. Maecenas vitae elit
iaculis, placerat est sed, condimentum lacus.
</p>
<p class="p24">
24.
Donec hendrerit nunc in rutrum hendrerit. Donec eu fermentum ipsum.
Etiam scelerisque bibendum ex nec blandit.
</p>
<p class="p28">
28.
Quisque venenatis orci sed nibh ornare, accumsan placerat neque
eleifend. Integer nec consequat turpis, in tincidunt nisl.
</p>
<p class="p30">
30.
Quisque nisl justo, imperdiet quis aliquam ac, iaculis et augue. Morbi
suscipit ante ac velit tincidunt, a tristique ex venenatis.
</p>
<h2>headings</h2>
<h1>H1. Heading 1</h1>
<h2>H2. Heading 2</h2>
<h3>H3. Heading 3</h3>
<h4>H4. Heading 4</h4>
<h5>H5. Heading 5</h5>
<h6>H6. Heading 6</h6>
<h1>H1. Heading 1<br /><small>heading subtitle/sub-text</small></h1>
<h2>H2. Heading 2<br /><small>heading subtitle/sub-text</small></h2>
<h3>H3. Heading 3<br /><small>heading subtitle/sub-text</small></h3>
<h4>H4. Heading 4<br /><small>heading subtitle/sub-text</small></h4>
<h5>H5. Heading 5<br /><small>heading subtitle/sub-text</small></h5>
<h6>H6. Heading 6<br /><small>heading subtitle/sub-text</small></h6>
</body>
</html>