0
# Typography
1

2
Text rendering, font loading, text measurement, and typography control for creative text applications and user interfaces.
3

4
## Capabilities
5

6
### Text Display
7

8
Functions for drawing text to the canvas with various formatting options.
9

10
```javascript { .api }
11
/**
12
 * Draw text to the canvas
13
 * @param {string} str - Text string to display
14
 * @param {number} x - X coordinate
15
 * @param {number} y - Y coordinate
16
 * @param {number} [x2] - Width of text box (for wrapped text)
17
 * @param {number} [y2] - Height of text box (for wrapped text)
18
 */
19
function text(str, x, y, x2, y2);
20

21
/**
22
 * Set the current font
23
 * @param {string|p5.Font} font - Font name, web font, or p5.Font object
24
 * @param {number} [size] - Font size in pixels
25
 */
26
function textFont(font, size);
27

28
/**
29
 * Set the text size
30
 * @param {number} size - Font size in pixels
31
 */
32
function textSize(size);
33

34
/**
35
 * Set the text style
36
 * @param {string} style - Text style (NORMAL, ITALIC, BOLD, BOLDITALIC)
37
 */
38
function textStyle(style);
39
```
40

41
### Text Measurement
42

43
Functions for measuring text dimensions and font metrics.
44

45
```javascript { .api }
46
/**
47
 * Calculate the width of text string
48
 * @param {string} str - Text string to measure
49
 * @returns {number} Text width in pixels
50
 */
51
function textWidth(str);
52

53
/**
54
 * Get the ascent of the current font
55
 * @returns {number} Font ascent in pixels
56
 */
57
function textAscent();
58

59
/**
60
 * Get the descent of the current font
61
 * @returns {number} Font descent in pixels
62
 */
63
function textDescent();
64
```
65

66
### Text Attributes
67

68
Functions for controlling text alignment, spacing, and wrapping behavior.
69

70
```javascript { .api }
71
/**
72
 * Set text alignment
73
 * @param {string} horizAlign - Horizontal alignment (LEFT, CENTER, RIGHT)
74
 * @param {string} [vertAlign] - Vertical alignment (TOP, BOTTOM, CENTER, BASELINE)
75
 */
76
function textAlign(horizAlign, vertAlign);
77

78
/**
79
 * Set line spacing (leading) for multi-line text
80
 * @param {number} leading - Line spacing in pixels
81
 */
82
function textLeading(leading);
83

84
/**
85
 * Set text wrapping behavior
86
 * @param {string} wrapStyle - Wrapping style (WORD, CHAR)
87
 */
88
function textWrap(wrapStyle);
89
```
90

91
### Font Loading
92

93
Functions for loading and working with custom fonts.
94

95
```javascript { .api }
96
/**
97
 * Load a font from file
98
 * @param {string} path - Path to font file (TTF, OTF, WOFF)
99
 * @param {function} [callback] - Success callback
100
 * @param {function} [onError] - Error callback
101
 * @returns {p5.Font} Font object
102
 */
103
function loadFont(path, callback, onError);
104
```
105

106
### p5.Font Class
107

108
Font object with advanced typography capabilities.
109

110
```javascript { .api }
111
/**
112
 * Font object for advanced typography
113
 */
114
class p5.Font {
115
  /**
116
   * Get font family name
117
   * @returns {string} Font family name
118
   */
119
  family();
120
  
121
  /**
122
   * Get font style
123
   * @returns {string} Font style
124
   */
125
  style();
126
  
127
  /**
128
   * Get font size
129
   * @returns {number} Font size in pixels
130
   */
131
  size();
132
  
133
  /**
134
   * Calculate width of text with this font
135
   * @param {string} str - Text string
136
   * @returns {number} Text width in pixels
137
   */
138
  textWidth(str);
139
  
140
  /**
141
   * Get font ascent
142
   * @returns {number} Font ascent
143
   */
144
  textAscent();
145
  
146
  /**
147
   * Get font descent
148
   * @returns {number} Font descent
149
   */
150
  textDescent();
151
  
152
  /**
153
   * Convert text to paths/points
154
   * @param {string} txt - Text string
155
   * @param {number} x - X coordinate
156
   * @param {number} y - Y coordinate
157
   * @param {number} fontSize - Font size
158
   * @param {object} [options] - Path options
159
   * @returns {object} Path data
160
   */
161
  textToPoints(txt, x, y, fontSize, options);
162
}
163
```
164

165
## Constants
166

167
```javascript { .api }
168
// Text alignment constants
169
const LEFT = 'left';
170
const RIGHT = 'right';
171
const CENTER = 'center';
172
const TOP = 'top';
173
const BOTTOM = 'bottom';
174
const BASELINE = 'baseline';
175

176
// Text style constants
177
const NORMAL = 'normal';
178
const ITALIC = 'italic';
179
const BOLD = 'bold';
180
const BOLDITALIC = 'bolditalic';
181

182
// Text wrap constants
183
const WORD = 'word';
184
const CHAR = 'char';
185
```
186

187
See complete usage examples and detailed typography documentation in the p5.js reference.