Blurry Text Solution

Gallery
1

I was using different text sizes in a recent project and was getting blurry fonts.
I solve this issue by setting the largest text size in setup() and problem solved!

Here is the code I used to test this:

/*
 Project:   Blurry Text
 Author:    GLV
 Date:      2019-05-15
 Version:   01
*/

void settings() 
  {    
  size(1024, 768, P3D);
  }

void setup() 
  {
  textSize(128);     // Set to largest text size used to prevent blurring of text 
  }

void draw()
  {
  background(0);
  text24();
  text36();
  text64();
  text128();
  }
  
void text24()
  {  
  fill(255, 0, 0);
  textSize(24);
  textAlign(CENTER, CENTER);
  text("TEXT SIZE 24", width/2, 1*height/10, 0);
  }
  
void text36()
  {  
  fill(255, 0, 0);
  textSize(36);
  textAlign(CENTER, CENTER);
  text("TEXT SIZE 36", width/2, 3*height/10, 0);
  }
  
void text64()
  {  
  fill(255, 0, 0);
  textSize(64);
  textAlign(CENTER, CENTER);
  text("TEXT SIZE 64", width/2, 5*height/10, 0);
  }  
  
void text128()
  {  
  fill(255, 0, 0);
  textSize(128);
  textAlign(CENTER, CENTER);
  text("TEXT SIZE 128", width/2, 8*height/10, 0);
  }

Try changing textSize() in setup() to observe this; set it to a lower value and the text that is larger will be blurred.

:slight_smile:

9 Likes
2

Thank for you sharing this!

For related discussions of scaling and zooming text, also see:

1 Like
3

Hi, thanks for the solution :smiley: .

It didn’t work for me till I loaded a font, and finally it is not blurry anymore:

public void setup(){
        myFont = createFont("Laksaman Bold", 100, true);
        textFont(myFont);
}
2 Likes