This repository has been archived by the owner on Nov 25, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtypography.html
99 lines (88 loc) · 4.05 KB
/
typography.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Typography</title>
</head>
<body>
<header>
<h1> Typography</h1>
<p> <img src="https://www.alpha.ca.gov/img/ca-light.png" alt="CA logo"
style="height: 2ch; vertical-align: middle; display: inline-block;" /> <strong>Typography</strong> for the CA
Design System</p>
</header>
<main>
<article>
<br>
<p>Rather than define the type ramp with traditional pixel sizes, and different sizes on mobile vs. desktop; use
relative sizes to scale based on view width, using <a href="https://grtcalculator.com/">golden-ratio</a>-esque
sizing.</p>
</article>
<p><strong>Noto Sans Type ramp:</strong></p>
<article>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<br>
<lt>Lead text (Use for intro text)</lt>
<br>
<br>
<p>Base text (Use for paragraph text)</p>
<st>Small text (Use for breadcrumbs, side nav text, utility nav? Footer?)</st>
</article>
<br>
<p><strong>Page content example:</strong></p>
<article>
<h1>Typography</h1>
<Lt>Typography refers to the art and technique of arranging and designing type, which includes selecting
typefaces, arranging typefaces, and organizing them in a visually pleasing and effective manner. It involves the
creation and arrangement of letters, numbers, symbols, and other characters to form written communication,
whether in print or digital form.</Lt>
<h2>Elements</h2>
<p>Typography encompasses various elements such as typefaces, fonts, point sizes, line spacing, letter spacing,
and alignment. These elements are used to create hierarchy, readability, and aesthetic appeal in written
communication. Typography plays a crucial role in enhancing the readability and legibility of text, conveying
meaning and tone, and evoking emotions.</p>
<h3>Typefaces</h3>
<p>Typefaces, also known as fonts, are designed sets of characters with consistent visual characteristics. They
can range from traditional serif typefaces to more modern sans-serif or decorative typefaces. Each typeface has
its own personality and conveys a different mood or message. Typeface selection is an important aspect of
typography as it helps establish the overall tone and visual style of the text.</p>
<h4>Usage</h4>
<p>Typography is utilized in various mediums such as books, magazines, newspapers, posters, websites,
advertisements, user interfaces, and more. It involves careful consideration of factors like readability,
legibility, alignment, spacing, and contrast to ensure that the text is clear, engaging, and visually appealing
to the intended audience.</p>
<p>Overall, typography is a powerful design tool that combines artistic creativity with practical functionality to
effectively communicate through written language.</p>
<br>
<p><strong>Page text examples:</strong></p>
<st>Breadcrumbs / Link / Link </st>
<br>
<st><strong>Side navigation</strong></st>
<br>
<st>Side navigation item</st>
</article>
<h4>List</h4>
<ul>
<li>"I'm not asking Ron for anything," Harry said flatly.</li>
<li>He was sitting right next to Albus Dumbledore.</li>
</ul>
<h4>Blockquote</h4>
<blockquote>
<p>Harry looked down at his own wand. He could see finger marks all over it. He gathered a fistful of robe from
his knee and tried to rub it clean surreptitiously. Several gold sparks shot out of the end of it. Fleur
Delacour gave him a very patronizing look, and he desisted.</p>
</blockquote>
<h4>Links and buttons</h4>
<p>This is a <a href="#">link</a>. and this is a <button>button</button></p>
</main>
<footer>
<p>This is the <a href="#">end</a>.</p>
</footer>
</body>
</html>