P5 library - Typography

Font family

...

from p5 import * FONTS = ["Serif", "Sans-Serif", "Monospace", "Cursive", "System-UI"] def setup(): size(300, 300) background(240) text_align(CENTER, CENTER) text_size(40) for idx, font in enumerate(FONTS): text_font(font) text(font, width/2, (idx + 1) * height / (len(FONTS) + 1)) run()

Font size

...

from p5 import * TEXT = "P5" def setup(): size(300, 300) background(240) text_align(CENTER, CENTER) # Default size text(TEXT, width*1/8, height/2) # 10-pixel size text_size(10) text(TEXT, width*3/8, height/2) # 30-pixel size text_size(30) text(TEXT, width*5/8, height/2) # 50-pixel size text_size(50) text(TEXT, width*7/8, height/2) run()

Font style

...

from p5 import * STYLES = [NORMAL, ITALIC, BOLD, BOLDITALIC] def setup(): size(300, 300) background(240) text_align(CENTER, CENTER) text_size(40) for idx, style in enumerate(STYLES): text_style(style) txt = style.upper().replace(" ", "") text(txt, width/2, (idx + 1) * height / (len(STYLES) + 1)) run()

Alignment

...

from p5 import * HORIZ_ALIGN = [LEFT, CENTER, RIGHT] VERT_ALIGN = [TOP, CENTER, BASELINE, BOTTOM] combinations = [(h, v) for v in VERT_ALIGN for h in HORIZ_ALIGN] def setup(): size(300, 300) def draw(): horiz, vert = combinations[(frame_count // 60) % len(combinations)] horiz_str = horiz.upper() vert_str = vert.upper().replace("ALPHABETIC", "BASELINE") background(240) text(f"text_align({horiz_str}, {vert_str})", 10, 20) push_style() translate(width/2, height/2) stroke(200) line(-width/2, 0, width/2, 0) line(0, -height/2, 0, height/2) text_align(horiz, vert) text_size(50) text("Go, go, go!", 0, 0) stroke("red") stroke_weight(5) point(0, 0) pop_style() run()

Line spacing

text_leading(#pixels) sets the vertical space between lines of text. Will be reset by subsequent calls to text_size().

from p5 import * TEXT = "L1\nL2\nL3" # 3 lines def setup(): size(300, 300) background(240) text_align(CENTER, TOP) text_size(40) # Default spacing text(TEXT, width*1/8, 30) # 35-pixel spacing text_leading(35) text(TEXT, width*3/8, 30) # 65-pixel spacing text_leading(65) text(TEXT, width*5/8, 30) # 100-pixel spacing text_leading(100) text(TEXT, width*7/8, 30) run()

Font metrics

text_ascent() returns the height of the font above the baseline. text_descent() returns the height of the font below the baseline. Adding the two will give you the total height of the current font (at its current size).

font_height = text_ascent() + text_descent()

text_width(string) returns the width of the string in the current font and size.

Here is an example that uses font metrics to draw a box around some text.

from p5 import * TEXT = "I love P5!" def setup(): size(300, 300) background(240) text_align(CENTER, CENTER) text_font("Cursive") text_size(40) padding = 20 w = text_width(TEXT) + 2 * padding h = text_ascent() + text_descent() + 2 * padding translate(width / 2, height / 2) stroke("red") stroke_weight(5) fill(255) rect_mode(CENTER) rect(0, 0, w, h, 10) no_stroke() fill(0) text(TEXT, 0, 0) run()