ESP32 Arduino SSD1306: Changing font size

In this tutorial we will check how to change the font size of the text written to the SSD1306 display. We will be using the Arduino core and this library, which makes it easier to interact with the display using a very simple API.

Introduction

In this tutorial we will check how to change the font size of the text written to the SSD1306 display. We will be using the Arduino core and this library, which makes it easier to interact with the display using a very simple API.

By default, we only have access to 3 font sizes (10, 16 and 24) for the ArialMT font. So, we will be testing these 3 sizes. You can use this online tool to obtain more fonts and sizes.

I’ll be using an AnalogLamb Fish32 board, which already includes a ready to use SSD1306 OLED display. This way, we don’t need to worry about the connections between the ESP32 and the display.

If you need to do the wiring, please check this previous tutorial, which contains the electronic schematic.

The code

To get started, we will include the Wire.h library. This library allows to establish communication with other devices using the I2C protocol. This is the protocol used by the SSD1306 display.

#include "Wire.h"

Besides the previous one, we will also need the SSD1306.h library. This library makes available a higher level API to interact with the display.

 
#include "SSD1306.h" 

After doing all the library includes, we will use the #define macro to specify the values of the SDA and SDL pins. In the board I’m using, SDA corresponds to pin 22 and SDL to pin 23.

#define SDA 22
#define SCL 23

Then we will need an object of class SSD1306, which will expose the higher level methods to interact with the display.

As first parameter, the constructor of the mentioned class receives the I2C address of the display. The address is 0x3c. As second and third parameters, it receives the number of the SDA and SDL pins.

SSD1306 display(0x3c, SDA, SCL); 

Moving on to the setup function, we will start by initializing the display. This is done with a call to the init method of our display object.

display.init();

Then, we will write the same string with the 3 different default font sizes available. To set a font, we simply need to call the setFont method, passing as input a constant representing that font.

The 3 default font constants available are:

• ArialMT_Plain_10
• ArialMT_Plain_16
• ArialMT_Plain_24

These correspond to font sizes of 10, 16 and 24, respectively. You can check the header file for this fonts here.

So, we will start by setting the font size to 10 and and then writing some text. To draw text on the screen, we simply need to call the drawString method.

As first and second inputs, the method receives the x and y coordinates, respectively, where to write the string. As third input, the method receives the string to write.

display.setFont(ArialMT_Plain_10);
display.drawString(0, 0, "Hello World");

Then we will do the same for the size 16 and 24. We will always write the same string, so it is easier to compare on the screen. Note that we will be increasing the y coordinate, in order for the strings to not overlap on the screen.

display.setFont(ArialMT_Plain_16);
display.drawString(0, 10, "Hello World");

display.setFont(ArialMT_Plain_24);
display.drawString(0, 25, "Hello World");

Finally, we need to call the display method on our object, for the content to be drawn in the display.

display.display(); 

The final source code can be seen below.

#include "Wire.h"
#include "SSD1306.h" 

#define SDA 22
#define SCL 23

SSD1306 display(0x3c, SDA, SCL);

void setup() {

  display.init();

  display.setFont(ArialMT_Plain_10);
  display.drawString(0, 0, "Hello World");

  display.setFont(ArialMT_Plain_16);
  display.drawString(0, 10, "Hello World");

  display.setFont(ArialMT_Plain_24);
  display.drawString(0, 25, "Hello World");

  display.display();
}

void loop() {}

Testing the code

To test the code, simply compile it and upload it to your board, using the Arduino IDE. You should get an output similar to figure 1, which shows the text with different font sizes being drawn in the display.

Figure 1 – Multiple font sizes drawn on the SSD1306.