Text & Fonts

Learn how to display text, create UI elements, and use custom fonts in your p5.js games.

Basic Text Display

Draw text on the canvas:

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  // text(string, x, y)
  text("Hello!", 200, 200);
}

Breaking it down

• text(content, x, y) - Draws text at position
• By default, (x, y) is the bottom-left corner of the text
• Text color uses current fill() color
• Outline uses current stroke() color

Text Color

Change text color with fill():

function draw() {
  background(220);
  
  // Red text
  fill(255, 0, 0);
  text("Red Text", 200, 150);
  
  // Blue text
  fill(0, 0, 255);
  text("Blue Text", 200, 200);
}

Breaking it down

• Use fill() just like with shapes
• Set color before drawing text
• Each color change affects following text

Text Size

Make text bigger or smaller:

function draw() {
  background(220);
  
  // Small text
  textSize(16);
  text("Small", 200, 150);
  
  // Medium text
  textSize(32);
  text("Medium", 200, 200);
  
  // Large text
  textSize(48);
  text("Large", 200, 270);
}

Breaking it down

• textSize(pixels) - Sets the height of the text
• Default size is usually 12-16 pixels
• Larger numbers = bigger text
• Set size before drawing text

Text Alignment

Change where text is positioned:

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  // Draw center point
  stroke(255, 0, 0);
  line(200, 0, 200, 400);
  line(0, 200, 400, 200);
  
  // LEFT alignment (default)
  textAlign(LEFT);
  fill(0);
  text("Left", 200, 150);
  
  // CENTER alignment
  textAlign(CENTER);
  text("Center", 200, 200);
  
  // RIGHT alignment
  textAlign(RIGHT);
  text("Right", 200, 250);
}

Breaking it down

• textAlign(horizontal) - Sets horizontal alignment
• LEFT - x position is left edge of text
• CENTER - x position is center of text
• RIGHT - x position is right edge of text

Vertical Alignment

Align text vertically too:

function draw() {
  background(220);
  
  // Draw center point
  stroke(255, 0, 0);
  line(200, 0, 200, 400);
  line(0, 200, 400, 200);
  
  // Center horizontally AND vertically
  textAlign(CENTER, CENTER);
  fill(0);
  noStroke();
  text("Perfectly Centered", 200, 200);
}

Breaking it down

• textAlign(horizontal, vertical) - Sets both alignments
• Vertical options: TOP, CENTER, BOTTOM, BASELINE
• CENTER, CENTER puts the exact middle of text at (x, y)
• Great for centering text on buttons

Displaying Variables

Show numbers and variables as text:

let score = 0;
let health = 100;

function draw() {
  background(220);
  
  // Combine strings and numbers
  text("Score: " + score, 20, 30);
  text("Health: " + health, 20, 60);
  
  // Or use backticks (template literals)
  text(`Level: ${currentLevel}`, 20, 90);
}

function mousePressed() {
  score = score + 10;
}

Breaking it down

• Use + to combine strings and numbers
• "Score: " + score joins text and variable
• Template literals with ${} are cleaner for multiple variables
• Variables automatically convert to strings

Text with Multiple Lines

Display multiple lines of text:

function draw() {
  background(220);
  
  // Method 1: Multiple text() calls
  text("Line 1", 100, 100);
  text("Line 2", 100, 130);
  text("Line 3", 100, 160);
  
  // Method 2: Use \n for newlines
  text("Line 1\nLine 2\nLine 3", 250, 100);
}

Breaking it down

• \n creates a newline (line break)
• Each line appears below the previous one
• Line spacing depends on text size

Text Styling

Bold and Italic

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  
  // Normal
  textStyle(NORMAL);
  text("Normal Text", 200, 150);
  
  // Bold
  textStyle(BOLD);
  text("Bold Text", 200, 200);
  
  // Italic
  textStyle(ITALIC);
  text("Italic Text", 200, 250);
}

Breaking it down

• textStyle(style) - Changes text appearance
• NORMAL, BOLD, ITALIC are built-in constants
• Not all fonts support bold/italic

Custom Fonts

Load and use custom fonts:

let customFont;

function preload() {
  customFont = loadFont('font.ttf');
}

function setup() {
  createCanvas(400, 400);
  textFont(customFont);
}

function draw() {
  background(220);
  textSize(32);
  text("Custom Font!", 200, 200);
}

Breaking it down

• loadFont('filename.ttf') - Loads a font file in preload()
• textFont(font) - Sets the current font
• Upload .ttf or .otf font files to p5.js editor
• Once set, all text uses that font

Text Width

Measure how wide text will be:

function draw() {
  background(220);
  
  let message = "Click me!";
  let w = textWidth(message);
  
  // Draw a box exactly around the text
  rectMode(CENTER);
  textAlign(CENTER, CENTER);
  
  fill(100, 150, 250);
  rect(200, 200, w + 20, 40);
  
  fill(255);
  text(message, 200, 200);
}

Breaking it down

• textWidth(string) - Returns width of text in pixels
• Useful for creating buttons with text
• Width depends on current font and size
• Add padding for better appearance

Text Stroke (Outline)

Add outline to text:

function draw() {
  background(220);
  
  textSize(48);
  textAlign(CENTER, CENTER);
  
  // White fill with black stroke
  fill(255);
  stroke(0);
  strokeWeight(3);
  text("Outlined!", 200, 200);
}

Breaking it down

• Use stroke() and strokeWeight() on text
• Creates outlined effect
• Good for text that needs to stand out
• Use noStroke() to remove outline

Common Patterns

Score Display (Top Corner)

let score = 0;

function draw() {
  background(220);
  
  // Score in top-left
  fill(0);
  textAlign(LEFT);
  textSize(24);
  text("Score: " + score, 10, 30);
}

Centered Title

function draw() {
  background(220);
  
  // Big centered title
  fill(100, 150, 250);
  textAlign(CENTER, CENTER);
  textSize(48);
  text("MY GAME", width/2, 100);
}

Game Over Message

let gameOver = true;

function draw() {
  background(220);
  
  if (gameOver) {
    // Semi-transparent overlay
    fill(0, 0, 0, 150);
    rect(0, 0, width, height);
    
    // Game Over text
    fill(255);
    textAlign(CENTER, CENTER);
    textSize(64);
    text("GAME OVER", width/2, height/2);
    
    textSize(24);
    text("Click to restart", width/2, height/2 + 60);
  }
}

Button with Text

function draw() {
  background(220);
  
  let buttonX = 200;
  let buttonY = 200;
  let buttonW = 120;
  let buttonH = 50;
  
  // Check hover
  let isHover = mouseX > buttonX - buttonW/2 && 
                mouseX < buttonX + buttonW/2 &&
                mouseY > buttonY - buttonH/2 && 
                mouseY < buttonY + buttonH/2;
  
  // Draw button
  rectMode(CENTER);
  fill(isHover ? 150 : 100);
  rect(buttonX, buttonY, buttonW, buttonH);
  
  // Draw text
  fill(255);
  textAlign(CENTER, CENTER);
  textSize(20);
  text("PLAY", buttonX, buttonY);
}

Timer Display

let startTime;

function setup() {
  createCanvas(400, 400);
  startTime = millis();
}

function draw() {
  background(220);
  
  // Calculate elapsed time
  let elapsed = millis() - startTime;
  let seconds = floor(elapsed / 1000);
  
  // Display timer
  fill(0);
  textAlign(CENTER);
  textSize(32);
  text("Time: " + seconds, 200, 50);
}

Health Bar with Text

let health = 75;

function draw() {
  background(220);
  
  // Health bar background
  fill(100);
  rect(50, 50, 200, 30);
  
  // Health bar fill
  let healthWidth = map(health, 0, 100, 0, 200);
  fill(255, 0, 0);
  rect(50, 50, healthWidth, 30);
  
  // Health text
  fill(255);
  textAlign(CENTER, CENTER);
  textSize(18);
  text(health + " HP", 150, 65);
}

Tips & Tricks

1. Always set alignment - Makes positioning predictable
2. textAlign(CENTER, CENTER) - Best for buttons and titles
3. Add padding - Give text some space from edges
4. High contrast - White text on dark backgrounds (or vice versa)
5. Consistent sizing - Use same sizes for similar text types
6. Web-safe fonts - Test if custom fonts load properly

Common Gotchas

⚠️ Position is corner - By default (x, y) is bottom-left of text
⚠️ textAlign persists - Set it again if you need different alignment
⚠️ Loading fonts - Use preload() not setup()
⚠️ String concatenation - Use + to join strings and numbers
⚠️ Special characters - Some characters need escaping: \n for newline

Related p5.js Functions

• text() - Display text
• textSize() - Set text size
• textAlign() - Set text alignment
• textFont() - Set font
• textStyle() - Set bold/italic
• textWidth() - Measure text width
• textAscent() - Get text height above baseline
• textDescent() - Get text height below baseline
• loadFont() - Load custom font file

Font Resources

Free fonts for games:

• Google Fonts - Huge selection, free to use
• DaFont - Many game-style fonts
• Font Squirrel - Commercial-free fonts
• 1001 Fonts - Large variety

Popular game fonts:

• Press Start 2P (8-bit style)
• VT323 (Terminal/retro)
• Russo One (Bold titles)
• Righteous (Modern game UI)

Try It Yourself

Experiment with these ideas:

• Create a score counter that increases when you click
• Make a title screen with your game name
• Build a pause menu with text options
• Display a countdown timer
• Create a dialogue box for game characters

Ready to learn about collision detection? Check out the Collision guide! 💥