Skip to content

Commit f4e8c0b

Browse files
ajay-dhangarajay-dhangar
committed
added docs for fonts
1 parent ededda3 commit f4e8c0b

File tree

6 files changed

+509
-6
lines changed

6 files changed

+509
-6
lines changed

‎docs/css/typography/fonts/font-family.mdx‎

Lines changed: 84 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,84 @@
1-
<ComingSoon />
1+
---
2+
title: "The font-family Property"
3+
description: "Learn how to use the CSS font-family property to select fonts for text, create reliable font stacks, and understand the role of generic font families."
4+
keywords: [CSS font-family, font stack, generic font family, typography, web safe fonts, CodeHarborHub]
5+
tags: [CSS font-family, font stack, generic font family, typography, web safe fonts, CodeHarborHub]
6+
sidebar_label: "font-family"
7+
---
8+
9+
The CSS **`font-family`** property is the most essential tool for controlling the typeface of your text. It specifies a **priority list** of font names for the browser to use when rendering text on your webpage.
10+
11+
<AdsComponent />
12+
<br />
13+
14+
## Defining a Font Stack
15+
16+
The browser can only display a font if it is installed on the user's computer or if you provide it (we'll cover that in a later lesson). Because you can't guarantee a user has a specific font, you must define a **font stack**.
17+
18+
A **font stack** is an ordered list of font families separated by commas. The browser checks the list from left to right, using the **first font it finds** on the user's system.
19+
20+
### The Syntax
21+
22+
```css title="styles.css"
23+
selector {
24+
font-family: "Font Name 1", "Font Name 2", generic-family;
25+
}
26+
```
27+
28+
* **`"Font Name 1"`:** The primary, desired font (e.g., `"Helvetica Neue"`).
29+
* **`"Font Name 2"`:** The fallback font (e.g., `"Arial"`).
30+
* **`generic-family`:** The required final fallback (e.g., `sans-serif`).
31+
32+
### Quotation Marks
33+
34+
* Use quotation marks (`""` or `''`) around font names that contain **spaces** (e.g., `"Times New Roman"`).
35+
* Font names that are single words (e.g., `Arial`, `Verdana`) do not strictly need quotes, but using them is harmless.
36+
37+
## Understanding Generic Font Families
38+
39+
The **generic font family** is the last and most critical part of your font stack. It's a required safety net that tells the browser what *kind* of font to pick if none of the specific named fonts are found.
40+
41+
There are five basic generic families:
42+
43+
| Generic Family | Description | Characteristics | Common Examples |
44+
| :--- | :--- | :--- | :--- |
45+
| **`serif`** | Fonts with small decorative strokes (serifs) at the end of letter stems. | Formal, traditional, high readability for long text. | Times New Roman, Georgia |
46+
| **`sans-serif`** | Fonts *without* serifs (clean lines). | Modern, clean, highly readable on screens. | Arial, Verdana, Helvetica |
47+
| **`monospace`** | All characters have the same width. | Technical, used for code blocks and data tables. | Courier New, Consolas |
48+
| **`cursive`** | Fonts that mimic handwriting or script. | Informal, decorative, low readability. | Comic Sans MS, Brush Script MT |
49+
| **`fantasy`** | Highly decorative or stylized fonts. | Novelty display only, not for body text. | Impact, Papyrus |
50+
51+
:::tip Always Use a Generic Fallback\!
52+
Your font stack **must** end with a generic font family. This ensures that the user's text will always display using a legible default font, preventing a visual disaster if all your custom fonts fail.
53+
:::
54+
55+
<AdsComponent />
56+
<br />
57+
58+
### Example Font Stacks
59+
60+
```css title="styles.css"
61+
/* Ideal for body text (clean and modern) */
62+
body {
63+
font-family: "Helvetica Neue", Arial, sans-serif;
64+
}
65+
66+
/* Ideal for headings (strong and decorative) */
67+
h1 {
68+
font-family: "Georgia", "Times New Roman", serif;
69+
}
70+
71+
/* Ideal for code blocks and data displays */
72+
code {
73+
font-family: "Consolas", "Courier New", monospace;
74+
}
75+
```
76+
77+
## Interactive `font-family` Demo
78+
79+
Use the live editor to test different font stacks. See how the browser applies the first font from the list that is available on your computer, falling back to `sans-serif` if the others are missing.
80+
81+
<CodePenEmbed
82+
title="Interactive font-family Demo"
83+
penId="bNpWxBQ"
84+
/>

‎docs/css/typography/fonts/font-shorthand.mdx‎

Lines changed: 99 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,99 @@
1-
<ComingSoon />
1+
---
2+
title: The font Shorthand Property
3+
description: Learn how to use the font shorthand property to set multiple typography properties (style, weight, size, height, and family) in a single, concise CSS declaration.
4+
keywords: [CSS font shorthand, typography shorthand, concise CSS, font property order, font-weight, font-size, line-height, CodeHarborHub]
5+
tags: [CSS font shorthand, typography shorthand, concise CSS, font property order, font-weight, font-size, line-height, CodeHarborHub]
6+
sidebar_label: font Shorthand
7+
---
8+
9+
The **`font`** property is the ultimate shorthand for typography. It allows you to set up to six related font properties in a single, efficient CSS declaration. Using the shorthand dramatically reduces the length of your stylesheet and improves readability.
10+
11+
<AdsComponent />
12+
<br />
13+
14+
## The Full `font` Syntax
15+
16+
When using the `font` shorthand, you must follow a very strict order for the values, and some properties are optional while others are **required**.
17+
18+
### Required and Optional Order
19+
20+
The simplified, most common syntax looks like this:
21+
22+
```css title="font Shorthand Syntax"
23+
font: <font-style> <font-weight> <font-size> / <line-height> <font-family>;
24+
```
25+
26+
| Property | Required / Optional | Notes |
27+
| :--- | :--- | :--- |
28+
| **`font-style`** | Optional | E.g., `italic`, `normal`. Must come before `font-weight`. |
29+
| **`font-weight`** | Optional | E.g., `bold`, `400`. Must come before `font-size`. |
30+
| **`font-size`** | **Required** | Must be the third value, followed immediately by the line height. |
31+
| **`/ line-height`** | Optional | The `/` is required if you include `line-height`. |
32+
| **`font-family`** | **Required** | Must be the final value. |
33+
34+
### The Critical Requirement
35+
36+
The two **required** values, **`font-size`** and **`font-family`**, must always be the last two items in the list (with `font-family` being the absolute last).
37+
38+
## Practical Examples
39+
40+
### 1. Simple Body Text
41+
42+
This example sets the size and the font stack. All other properties default to `normal`.
43+
44+
```css title="styles.css"
45+
/* Sets size to 1rem and uses the sans-serif font stack */
46+
body {
47+
font: 1rem sans-serif;
48+
}
49+
```
50+
51+
**This is shorthand for:**
52+
`font-size: 1rem;`
53+
`font-family: sans-serif;`
54+
`font-style: normal;`
55+
`font-weight: normal;`
56+
57+
### 2. Heading with Style and Weight
58+
59+
This example includes `font-weight` and `font-style` before the required properties.
60+
61+
```css title="style.css"
62+
/* Italic, Bold, 2.5rem size, using a serif font */
63+
h1 {
64+
font: italic bold 2.5rem serif;
65+
}
66+
```
67+
68+
### 3. Including `line-height`
69+
70+
To specify `line-height`, you must insert a **forward slash (`/`)** immediately after the `font-size` value.
71+
72+
```css title="styles.css"
73+
/* Bold, 18px size, line height of 1.6, using a sans-serif stack */
74+
.article-text {
75+
font: bold 18px / 1.6 "Roboto", Arial, sans-serif;
76+
}
77+
```
78+
79+
<AdsComponent />
80+
<br />
81+
82+
## A Note on Unspecified Values
83+
84+
When you use the `font` shorthand, any omitted optional properties (like `font-style` or `font-weight`) are **reset to their initial default values** (`normal` or `400`).
85+
86+
This is important because if you had set a custom `font-weight: 700;` earlier in your stylesheet, and then later used `font: 1rem sans-serif;` (omitting `bold`), the weight would be **reset to `normal` (400)**.
87+
88+
This is a key difference between shorthand and individual properties.
89+
90+
## Interactive `font` Shorthand Demo
91+
92+
Use the live editor to test different combinations. See how omitting `line-height` or `font-style` affects the text, and observe the strict order requirement.
93+
94+
<CodePenEmbed
95+
title="Interactive font Shorthand Demo"
96+
penId="YPqQZde"
97+
/>
98+
99+
**Challenge:** Remove the `/ 1.8` from the CSS line. The line spacing will instantly snap back to the browser's default, demonstrating that the `line-height` property was successfully reset.

‎docs/css/typography/fonts/font-size.mdx‎

Lines changed: 67 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,67 @@
1-
<ComingSoon />
1+
---
2+
title: "The font-size Property"
3+
description: "Learn how to use the CSS font-size property to control the size of text and understand the critical difference between absolute (px) and relative (em, rem, %) units for creating accessible and responsive layouts."
4+
keywords: [CSS font-size, font units, px vs em vs rem, responsive typography, web accessibility, CodeHarborHub]
5+
tags: [CSS font-size, font units, px vs em vs rem, responsive typography, web accessibility, CodeHarborHub]
6+
sidebar_label: "font-size"
7+
---
8+
9+
The CSS **`font-size`** property is used to specify the height of the characters in a font. Choosing the right font size and unit is one of the most critical decisions in web design, directly impacting **readability** and **accessibility**.
10+
11+
<AdsComponent />
12+
<br />
13+
14+
## Units for `font-size`
15+
16+
Font sizes can be set using several different types of units, which fall into two main categories: **absolute** and **relative**.
17+
18+
### 1. Absolute Units (Fixed)
19+
20+
Absolute units are fixed measurements that do not change based on any other element or user setting.
21+
22+
| Unit | Description | Best Use Case |
23+
| :--- | :--- | :--- |
24+
| **`px`** (Pixels) | A fixed number of dots (pixels) on the screen. | Small elements that must be pixel-perfect, such as thin borders or box shadows. **Avoid for font size.** |
25+
26+
:::danger Accessibility Warning
27+
Avoid using `px` for font sizes on body text. If a user tries to zoom their browser text using system settings, `px`-based fonts will often fail to resize, creating an accessibility barrier.
28+
:::
29+
30+
### 2. Relative Units (Scalable)
31+
32+
Relative units are the **best practice** for typography because they allow the text to scale up or down relative to another size, respecting user settings and promoting responsiveness.
33+
34+
| Unit | Description | Calculation | Best Use Case |
35+
| :--- | :--- | :--- | :--- |
36+
| **`em`** | Relative to the **font size of the parent element**. | $1\text{em} = 1 \times (\text{Parent's Font Size})$ | Component-level scaling (e.g., a button inside a card). |
37+
| **`rem`** | Relative to the **font size of the root element** (`<html>`). | $1\text{rem} = 1 \times (\text{Browser's Default Font Size})$ | Global sizing consistency, main typography. **The recommended unit.** |
38+
| **`%`** (Percent) | Relative to the **font size of the parent element**. | $100\% = \text{Parent's Font Size}$ | Similar to `em`, but `%` is often used for explicit scaling. |
39+
40+
<AdsComponent />
41+
<br />
42+
43+
## Why `rem` is Recommended
44+
45+
Using `rem` (Root EM) is the modern standard because it prevents sizing issues caused by complex nesting.
46+
47+
1. **Browser Control:** By default, $16\text{px}$ is the browser's root font size (i.e., $1\text{rem} = 16\text{px}$). If a user changes their browser's default font size to $20\text{px}$, then $1\text{rem}$ automatically becomes $20\text{px}$ across your entire site.
48+
2. **Predictability:** Unlike `em`, where the size multiplies on every nested parent (the "compounding problem"), `rem` always refers back to the single `<html>` root size, making calculations simple and predictable.
49+
50+
### Example Scaling with `rem`
51+
52+
If your site's root size is set to the default $16\text{px}$:
53+
54+
| Desired Size | `rem` Value | Calculation |
55+
| :--- | :--- | :--- |
56+
| Standard Body Text | `1rem` | $1 \times 16\text{px} = 16\text{px}$ |
57+
| Large Heading | `2.5rem` | $2.5 \times 16\text{px} = 40\text{px}$ |
58+
| Small Caption | `0.875rem` | $0.875 \times 16\text{px} = 14\text{px}$ |
59+
60+
### Interactive `font-size` Demo
61+
62+
Use the live editor to change the `font-size` values for both the parent (`.parent-box`) and the child (`.child-text`). Observe how the `em` value scales relative to its parent, while the `rem` value remains constant relative to the root ($16\text{px}$).
63+
64+
<CodePenEmbed
65+
title="Interactive font-size Demo"
66+
penId="xbVrqag"
67+
/>

‎docs/css/typography/fonts/font-style.mdx‎

Lines changed: 85 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,85 @@
1-
<ComingSoon />
1+
---
2+
title: "The font-style Property"
3+
description: "Learn how to use the CSS font-style property to control the slant and style of text, primarily setting it to normal, italic, or oblique."
4+
keywords: [CSS font-style, italic text, oblique font, typography, font styling, CodeHarborHub]
5+
tags: [CSS font-style, italic text, oblique font, typography, font styling, CodeHarborHub]
6+
sidebar_label: "font-style"
7+
---
8+
9+
The CSS **`font-style`** property is used to control the visual slant of the text. It determines whether the text is displayed in a **normal** (upright) style, or in an **italic** or **oblique** style.
10+
11+
<AdsComponent />
12+
<br />
13+
14+
## `font-style` Values
15+
16+
The property accepts three main keywords, which cover virtually all use cases.
17+
18+
### 1. `normal`
19+
20+
This is the **default value** for almost all HTML elements. It displays the font face upright, without any slant.
21+
22+
```css
23+
p {
24+
font-style: normal; /* Ensures paragraphs are not italic, overriding any inherited style. */
25+
}
26+
```
27+
28+
### 2. `italic`
29+
30+
The `italic` value is used to select the font's true **italic typeface**.
31+
32+
* True italic fonts are designed specifically with different letter shapes (e.g., the lowercase 'a' often changes to a single-story form).
33+
* If the font family you chose does **not** have an actual italic typeface file available, the browser will often synthesize it by slanting the normal face, but this is less visually appealing than the true italic version.
34+
35+
```css title="styles.css"
36+
/* Makes text inside elements with the class 'emphasis' use the italic font face */
37+
.emphasis {
38+
font-style: italic;
39+
}
40+
```
41+
42+
:::info HTML Default
43+
Note that the HTML tags `<em>` (emphasis) and `<i>` (idiomatic text) automatically have the browser's default style of `font-style: italic;`.
44+
:::
45+
46+
### 3. `oblique`
47+
48+
The `oblique` value is primarily used to tell the browser to simply **slant the normal font face** programmatically.
49+
50+
* `oblique` does not look for a separate, designed italic typeface; it just artificially skews the upright letters.
51+
* In most modern browsers, if the font family has a true italic face, the browser will often use it even if you specify `oblique`. If no italic face is available, `oblique` is the best instruction for a synthesized slant.
52+
53+
54+
```css title="styles.css"
55+
.note {
56+
font-style: oblique; /* Applies a programmatic slant */
57+
}
58+
```
59+
60+
<AdsComponent />
61+
<br />
62+
63+
## Italic vs. Oblique (The Design Difference)
64+
65+
While the visual difference can be subtle, the distinction is based on design intent:
66+
67+
| Style | Design Intent | Implementation | Result |
68+
| :--- | :--- | :--- | :--- |
69+
| **`italic`** | A **separate typeface** created by the font designer. | The browser looks for a font file named something like `MyFont-Italic.woff`. | Superior, authentic typography. |
70+
| **`oblique`** | The **same upright typeface** is digitally skewed by the browser. | The browser calculates a slant (e.g., 10-14 degrees) and applies it to the `MyFont-Regular.woff` file. | Functional, but often less polished. |
71+
72+
**Best Practice:** Always use **`italic`** unless you specifically know your desired font does not offer a true italic face, or if you need to specify an angle (e.g., `oblique 14deg;` is supported by some browsers).
73+
74+
:::tip Browser Behavior
75+
In most cases, if you specify `italic` and the font doesn't have a true italic file, the browser will automatically substitute it with the **oblique** version (a simple slant). For practical web design, specifying `italic` is generally the best choice, as it defaults to the best available slanted version.
76+
:::
77+
78+
### Interactive `font-style` Demo
79+
80+
In the live editor, try setting the `font-style` property to `normal`, `italic`, and `oblique` for the `.text-box` element to observe the slight variations.
81+
82+
<CodePenEmbed
83+
title="Interactive font-style Demo"
84+
penId="VYaWpXM"
85+
/>

0 commit comments

Comments
 (0)