You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Review the concepts below to prepare for the upcoming quiz.
11
11
12
+
## Introduction to Typography
12
13
14
+
-**Definition**: Typography is the art of choosing the right fonts and format to make text visually appealing and easy to read. "Type" refers to how the individual characters are designed and arranged.
15
+
-**Typeface Definition**: A typeface is the overall design and style of a set of characters, numbers, and symbols. It's like a blueprint for a family of fonts.
16
+
-**Font Definition**: A font is a specific variation of a typeface with specific characteristics, such as size, weight, style, and width.
17
+
-**Serif Typeface**: This typeface has a classical style with small lines at the end of characters. Serif typefaces are commonly used for printed materials, like books.
18
+
-**Sans Serif Typeface**: This typeface has a more modern look, without the small lines at the end of characters. Sans Serif typefaces are commonly used in digital design because they are easy to read on screen. Some examples include Helvetica, Arial, and Roboto.
19
+
-**Font Weight**: This is the thickness of the characters, including light, regular, bold, and black.
20
+
-**Font Style**: This is the slant and orientation of the characters, like italic and oblique.
21
+
-**Font Width**: This is the horizontal space occupied by characters, like condensed and expanded.
22
+
-**Baseline**: This is the imaginary line on which most characters rest.
23
+
-**Cap Height**: This is the height of uppercase letters, measured from the baseline to the top.
24
+
-**X-height**: This is the average height of lowercase letters, excluding ascenders and descenders.
25
+
-**Ascenders**: These are the parts of lowercase letters that extend above the x-height, such as the tops of the letters 'h', 'b', 'd', and 'f'.
26
+
-**Descenders**: These are the parts of lowercase letters that extend below the baseline, such as the tails of 'y', 'g', 'p', and 'q'.
27
+
-**Kerning**: This is how space is adjusted between specific pairs of characters to improve their readability and aesthetics. For example, reducing the space between the letters A and V.
28
+
-**Tracking**: This is how space is adjusted between all characters in a block of text. It's essentially the distance between the characters. It affects how dense and open the text will be.
29
+
-**Leading**: This is the vertical space between lines of text. It's measured from the baseline of one line to the baseline of the next line.
30
+
-**Best Practices with Typography**: You should choose clear and simple fonts to make your designs easy to understand. This is particularly important for the main text of your website. Users are more likely to engage with your content if the font is easy to read.
31
+
32
+
## CSS `font-family` Property
33
+
34
+
-**Definition**: A font family is a group of fonts that share a common design. All the fonts that belong to the same family are based on the same core typeface but they also have variations in their style, weight, and width. You can specify multiple font families in order of priority, from highest to lowest, by separating them with commas. These alternative fonts will act as fallback options. You should always include a generic font family at the end of the font-family list.
35
+
36
+
```css
37
+
font-family: Arial, Lato;
38
+
```
39
+
40
+
- **Common Font Families**: Here are some common font families used in CSS: serif, sans-serif, monospace, cursive, fantasy
41
+
42
+
## Web Safe Fonts
43
+
44
+
- **Definition**: These fonts are a subset of fonts that are very likely to be installed on a computer or device. When the browser has to render afont, it tries to find the font file on the user's system. But if the font is not found, it will usually fall back to a default system font.
45
+
46
+
## At-rules and the `@font-face` At-rule
47
+
48
+
- **Definition**: At-rules are statements that provide instructions to the browser. You can use them to define various aspects of the stylesheet, such as media queries, keyframes, font faces, and more.
49
+
- **`@font-face`**: This allows you to define a custom font by specifying the font file, format, and other important properties, like weight and style. For the `@font-face` at-rule to be valid, you also need to specify the `src` property. This property contains references to the font resources.
50
+
51
+
```css
52
+
@font-face {
53
+
font-family: "MyCustomFont";
54
+
src: url("path/to/font.woff2"),
55
+
url("path/to/font.woff"),
56
+
url("path/to/font.otf");
57
+
}
58
+
```
59
+
60
+
-**Font Formats**: For each font resource, you can also specify the format. This is optional. It's a hint for the browser on the font format. If the format is omitted, the resource will be downloaded and the format will be detected after it's downloaded. If the format is invalid, the resource will not be downloaded. Possible font formats include `collection`, `embedded-opentype`, `opentype`, `svg`, `truetype`, `woff`, and `woff2`.
61
+
62
+
```css
63
+
@font-face {
64
+
font-family: "MyCustomFont";
65
+
src: url("path/to/font.woff2") format("woff2"),
66
+
url("path/to/font.otf") format("opentype"),
67
+
url("path/to/font.woff") format("woff");
68
+
}
69
+
```
70
+
71
+
-**`woff` and `woff2`**: `woff` stands for "Web Open Font Format." It's a widely used font format developed by Mozilla in collaboration with Type Supply, LettError, and other organizations. The difference between `woff` and `woff2` is the algorithm used to compress the data.
72
+
-**OpenType**: This is a format for scalable computer fonts developed by Microsoft and Adobe that allows users to access additional features in a font. It's widely used across major operating systems.
73
+
-**`tech()`**: This is used to specify the technology of the font resource. This is optional.
-**Definition**: An external font is a font file that is not included directly within your project files.They're usually hosted on a separate server. To include these external fonts inside your project, you can use a `<link>` element or `@import` statement inside your CSS.
87
+
-**Google Fonts**: This is a Google service that offers a collection of fonts, many of which are designed specifically for web development.
-**Font Squirrel**: This is another popular resource that you can use for adding custom external fonts to your projects.
112
+
113
+
## `text-shadow` Property
114
+
115
+
-**Definition**: This property is used to apply shadows to text. You need to specify the X and Y offset, which represent the horizontal and vertical distance of the shadow from the text, respectively. These values are required. Positive values of the X offset and Y offset will move the shadow right and down, respectively, while negative values will move the shadow left and up.
116
+
117
+
```css
118
+
p {
119
+
text-shadow: 3px2px;
120
+
}
121
+
```
122
+
123
+
-**Shadow Color**: You can also customize the color of the shadow by specifying this value before or after the offset. If the color is not specified, the browser will determine the color automatically, so it's usually best to set it explicitly.
124
+
125
+
```css
126
+
p {
127
+
text-shadow: 3px2px#00ffc3;
128
+
}
129
+
```
130
+
131
+
-**Blur Radius**: The blur radius is optional but will make the shadow look a lot smoother and more subtle. The default value of the radius blur is zero. The higher the value, the bigger the blur, which means that the shadow becomes lighter.
132
+
133
+
```css
134
+
p {
135
+
text-shadow: 3px2px3px#00ffc3;
136
+
}
137
+
```
138
+
139
+
-**Applying Multiple Text Shadows**: The text can have more than one shadow. The shadows will be applied in layers, from front to back, with the first shadow at the top.
0 commit comments