0
# Font Size Styling
1

2
The FontSize extension provides font size styling capabilities, allowing users to apply custom font sizes to text selections with support for all CSS font-size units.
3

4
## Capabilities
5

6
### FontSize Extension
7

8
Extension for applying font sizes to text with full CSS font-size unit support.
9

10
```typescript { .api }
11
/**
12
 * Extension for setting font size on specified node types
13
 * Extends textStyle mark with fontSize attribute
14
 */
15
const FontSize: Extension<FontSizeOptions>;
16

17
interface FontSizeOptions {
18
  /** 
19
   * Node types where font size can be applied
20
   * @default ['textStyle']
21
   * @example ['heading', 'paragraph', 'textStyle']
22
   */
23
  types: string[];
24
}
25
```
26

27
**Usage Example:**
28

29
```typescript
30
import { Editor } from "@tiptap/core";
31
import { FontSize } from "@tiptap/extension-text-style/font-size";
32
import { TextStyle } from "@tiptap/extension-text-style/text-style";
33

34
const editor = new Editor({
35
  extensions: [
36
    TextStyle, // Required dependency
37
    FontSize.configure({
38
      types: ['textStyle', 'paragraph']
39
    })
40
  ]
41
});
42
```
43

44
### Set Font Size Command
45

46
Apply a specific font size to the current text selection.
47

48
```typescript { .api }
49
/**
50
 * Set the font size
51
 * @param fontSize - CSS font-size value with units (px, em, rem, %, pt, etc.)
52
 * @returns Command result indicating success/failure
53
 */
54
setFontSize(fontSize: string): Command;
55
```
56

57
**Usage Examples:**
58

59
```typescript
60
// Pixel units
61
editor.commands.setFontSize("16px");
62
editor.commands.setFontSize("24px");
63

64
// Em units (relative to parent)
65
editor.commands.setFontSize("1.5em");
66
editor.commands.setFontSize("0.8em");
67

68
// Rem units (relative to root)
69
editor.commands.setFontSize("1.2rem");
70
editor.commands.setFontSize("2rem");
71

72
// Percentage
73
editor.commands.setFontSize("120%");
74
editor.commands.setFontSize("75%");
75

76
// Point units (print)
77
editor.commands.setFontSize("12pt");
78
editor.commands.setFontSize("18pt");
79

80
// Keyword values
81
editor.commands.setFontSize("large");
82
editor.commands.setFontSize("x-small");
83

84
// Chain with other styling commands
85
editor.chain()
86
  .setFontSize("18px")
87
  .setFontFamily("Arial")
88
  .setColor("#333")
89
  .run();
90
```
91

92
### Unset Font Size Command
93

94
Remove font size styling from the current text selection.
95

96
```typescript { .api }
97
/**
98
 * Unset the font size, removing fontSize attribute and cleaning up empty textStyle marks
99
 * @returns Command result indicating success/failure
100
 */
101
unsetFontSize(): Command;
102
```
103

104
**Usage Example:**
105

106
```typescript
107
// Remove font size and clean up empty styling
108
editor.commands.unsetFontSize();
109

110
// Chain removal with other operations
111
editor.chain()
112
  .unsetFontSize()
113
  .setColor("#000000")
114
  .run();
115
```
116

117
## HTML Processing
118

119
### Font Size Parsing
120

121
The FontSize extension includes straightforward HTML parsing:
122

123
- **Direct Style Reading**: Reads `font-size` value directly from `element.style.fontSize`
124
- **Unit Preservation**: Maintains original CSS units (px, em, rem, %, pt, etc.)
125
- **Keyword Support**: Supports CSS font-size keywords (small, medium, large, etc.)
126
- **Computed Value**: Uses computed font-size value from the DOM
127

128
### Rendering Output
129

130
- **CSS Format**: Renders as `style="font-size: {value}"` attribute
131
- **Clean Output**: Only adds font-size attribute when a value is present
132
- **Format Preservation**: Maintains exact font-size string including units
133

134
## Type System Integration
135

136
### Module Augmentation
137

138
The FontSize extension augments TipTap's type system:
139

140
```typescript
141
// Extends core Commands interface
142
declare module '@tiptap/core' {
143
  interface Commands<ReturnType> {
144
    fontSize: {
145
      setFontSize: (fontSize: string) => ReturnType;
146
      unsetFontSize: () => ReturnType;
147
    }
148
  }
149
}
150

151
// Extends TextStyleAttributes interface  
152
declare module '@tiptap/extension-text-style' {
153
  interface TextStyleAttributes {
154
    fontSize?: string | null;
155
  }
156
}
157
```
158

159
## Configuration Examples
160

161
### Basic Configuration
162

163
```typescript
164
import { FontSize } from "@tiptap/extension-text-style/font-size";
165

166
const fontSizeExtension = FontSize.configure({
167
  types: ['textStyle']
168
});
169
```
170

171
### Extended Node Type Support
172

173
```typescript
174
const fontSizeExtension = FontSize.configure({
175
  types: ['textStyle', 'heading', 'paragraph']
176
});
177
```
178

179
This allows font sizes to be applied directly to headings and paragraphs in addition to inline text styling.
180

181
## Font Size Unit Examples
182

183
### Absolute Units
184

185
```typescript
186
// Pixels (most common for web)
187
editor.commands.setFontSize("12px");  // Small text
188
editor.commands.setFontSize("16px");  // Body text
189
editor.commands.setFontSize("24px");  // Large text
190
editor.commands.setFontSize("32px");  // Heading size
191

192
// Points (print-oriented)
193
editor.commands.setFontSize("10pt");  // Small print
194
editor.commands.setFontSize("12pt");  // Body text
195
editor.commands.setFontSize("18pt");  // Large text
196
```
197

198
### Relative Units
199

200
```typescript
201
// Em units (relative to parent element)
202
editor.commands.setFontSize("0.8em");   // 80% of parent
203
editor.commands.setFontSize("1.2em");   // 120% of parent
204
editor.commands.setFontSize("1.5em");   // 150% of parent
205

206
// Rem units (relative to root element)
207
editor.commands.setFontSize("0.875rem"); // 14px if root is 16px
208
editor.commands.setFontSize("1.125rem"); // 18px if root is 16px
209
editor.commands.setFontSize("1.5rem");   // 24px if root is 16px
210

211
// Percentages
212
editor.commands.setFontSize("90%");     // 90% of parent
213
editor.commands.setFontSize("110%");    // 110% of parent
214
editor.commands.setFontSize("150%");    // 150% of parent
215
```
216

217
### CSS Keywords
218

219
```typescript
220
// Absolute size keywords
221
editor.commands.setFontSize("xx-small");
222
editor.commands.setFontSize("x-small");
223
editor.commands.setFontSize("small");
224
editor.commands.setFontSize("medium");   // Default size
225
editor.commands.setFontSize("large");
226
editor.commands.setFontSize("x-large");
227
editor.commands.setFontSize("xx-large");
228

229
// Relative size keywords
230
editor.commands.setFontSize("smaller");  // Smaller than parent
231
editor.commands.setFontSize("larger");   // Larger than parent
232
```
233

234
## Responsive Font Sizing
235

236
For responsive designs, consider using relative units:
237

238
```typescript
239
// Use rem for consistent scaling
240
editor.commands.setFontSize("1rem");     // Base size
241
editor.commands.setFontSize("1.25rem");  // Slightly larger
242
editor.commands.setFontSize("1.5rem");   // Medium heading
243

244
// Use em for contextual scaling
245
editor.commands.setFontSize("1.1em");    // Slightly larger than context
246
editor.commands.setFontSize("0.9em");    // Slightly smaller than context
247
```