Fonts

Espruino usually has multiple fonts built-in.

• A vector font (scalable to any height, usually works best above 20px high)
• Bitmap fonts (scalable 1x, 2x, 3x, etc)
  • 4x6 is built into all devices, it is 4px wide and 6px high.
  • 6x8 is built into devices like Bangle.js. It is a much more readable 6px wide, 8px high font that contains ISO Latin characters see Character Sets

These fonts are part of Espruino's built-in Graphics library.

You can use g.getFonts() to list the available fonts.

Vector Font

The Vector font is made out of polygons, and it can be resized to any size. This makes it great for displaying big text like numbers.

Note: Some non-official Espruino boards don't have vector font support built-in, so all you'll have available is the bitmap font (see below).

To use it, just use Graphics.setFont("Vector",height) where height is the height in pixels. Assuming you've set up Graphics as a variable called g you can do:

g.clear();
g.setFont("Vector",40);
g.drawString("Hello",0,0); // 40px high
g.setFont("Vector", 60);
g.drawString("World",40,40); // 60px high

Note: g.setFontVector(height) can be used, but is deprecated and g.setFont("Vector", 60); is preferred.

The built-in vector font contains contains the ASCII characters 0-255 in the ISO8859-1 codepage (see Character Sets).

While the vector font is meant to look good at larger sizes, it doesn't scale down in size very well below about 20 pixels high, so there's the Bitmap Font.

Bitmap Font

Bitmap fonts are designed to be small while still legible. These are the default font, but if you've already switched away from a Vector font, you can switch back to it with:

g.setFont("4x6");
g.drawString("Hello",0,0);
// double the size of the font to 8x12 with:
g.setFont("4x6",2);
g.drawString("2x Hello",0,10);

If your device has the 6x8 font built in you can use g.setFont("6x8");

• The 4x6 font contains the ASCII characters 0-127 (eg. English text):

• The 6x8 font contains ISO Latin characters see Character Sets:

Note: g.setFontBitmap() can be used, but is deprecated and g.setFont("Bitmap", scale); is preferred.

Font Modules

Often you may want a font that is bigger than the built-in font, but smaller than the vector font. For this, you can use one of the font modules.

Current modules are:

Font Map	Name	Description
require("Font4x4Numeric").add(Graphics); g.setFont("4x4Numeric");	Font4x4Numeric (About Modules)	Tiny 4x4 fixed width font with no space between characters (only digits 0-9)
require("Font4x4").add(Graphics); g.setFont("4x4");	Font4x4 (About Modules)	Tiny 4x4 fixed width font by jose1711
require("Font4x5Numeric").add(Graphics); g.setFont("4x5Numeric");	Font4x5Numeric (About Modules)	4x5 variable width font (only ./0123456789)
require("Font4x5").add(Graphics); g.setFont("4x5");	Font4x5 (About Modules)	Tiny 4x5 fixed width font
require("Font4x8Numeric").add(Graphics); g.setFont("4x8Numeric");	Font4x8Numeric (About Modules)	4x8 fixed width font (only digits 0-9)
require("Font5x7Numeric7Seg").add(Graphics); g.setFont("5x7Numeric7Seg");	Font5x7Numeric7Seg (About Modules)	5x7 7 segment-style font (only -.0123456789:ABCDEF)
require("Font5x9Numeric7Seg").add(Graphics); g.setFont("5x9Numeric7Seg");	Font5x9Numeric7Seg (About Modules)	5x9 7 segment-style font (only -.0123456789:ABCDEF)
require("Font7x11Numeric7Seg").add(Graphics); g.setFont("7x11Numeric7Seg");	Font7x11Numeric7Seg (About Modules)	7x11 7 segment-style font (only -.0123456789:ABCDEF)
require("FontCopasetic40x58Numeric").add(Graphics); g.setFont("Copasetic40x58Numeric");	FontCopasetic40x58Numeric (About Modules)	40x58 numeric font (only 0123456789) by abhigkar
require("Font6x8").add(Graphics); g.setFont("6x8");	Font6x8 (About Modules)	Variable width 8px high font
require("Font6x12").add(Graphics); g.setFont("6x12");	Font6x12 (About Modules)	Variable width 12px high font
require("Font8x12").add(Graphics); g.setFont("8x12");	Font8x12 (About Modules)	Wider variable width 12px high font
require("Font8x16").add(Graphics); g.setFont("8x16");	Font8x16 (About Modules)	Variable width 16px high font
require("FontDennis8").add(Graphics); g.setFont("Dennis8");	FontDennis8 (About Modules)	An 8 pixel high font by Dennis Bemmann for non-english languages - see Character Sets
require("FontCherry6x10").add(Graphics); g.setFont("Cherry6x10");	FontCherry6x10 (About Modules)	Variable width font with most characters for non-english languages - see Character Sets (originally from https://github.com/turquoise-hexagon/cherry)
require("FontDylex7x13").add(Graphics); g.setFont("Dylex7x13");	FontDylex7x13 (About Modules)	Variable width font with most characters for non-english languages, see Character Sets (originally from https://github.com/dylex/fonts)
require("FontHaxorNarrow7x17").add(Graphics); g.setFont("HaxorNarrow7x17");	FontHaxorNarrow7x17 (About Modules)	Variable width font with most characters for non-english languages, see Character Sets (originally from https://github.com/metan-ucw/fonts)
require("FontSinclair").add(Graphics); g.setFont("Sinclair");	FontSinclair (About Modules)	Fixed width 8x8 Retro Sinclair font by Steve Anderson, Copyright Sinclair Research, non-commercial use approved.
require("FontTeletext10x18Ascii").add(Graphics); g.setFont("Teletext10x18Ascii");	FontTeletext10x18Ascii (About Modules)	Fixed width Teletext / BBC Micro "MODE 7" font, 7-bit ASCII, with interpolated pixels as intended
require("FontTeletext10x18Mode7").add(Graphics); g.setFont("Teletext10x18Mode7");	FontTeletext10x18Mode7 (About Modules)	Fixed width Teletext / BBC Micro "MODE 7" font, UK character set, with interpolated pixels as intended
require("FontTeletext5x9Ascii").add(Graphics); g.setFont("Teletext5x9Ascii");	FontTeletext5x9Ascii (About Modules)	Fixed width Teletext / BBC Micro "MODE 7" font, 7-bit ASCII, with original structural pixels only
require("FontTeletext5x9Mode7").add(Graphics); g.setFont("Teletext5x9Mode7");	FontTeletext5x9Mode7 (About Modules)	Fixed width Teletext / BBC Micro "MODE 7" font, UK character set, with original structural pixels only
require("FontVGA8").add(Graphics); g.setFont("VGA8");	FontVGA8 (About Modules)	Fixed width 8x8 PC VGA-style font
require("FontVGA16").add(Graphics); g.setFont("VGA16");	FontVGA16 (About Modules)	Fixed width 8x16 PC VGA-style font

Use these as follows:

// On initialisation...
require("Font8x12").add(Graphics);

// When drawing...
g.setFont8x12();
// or use: g.setFont("8x12")
g.drawString("Hello World!",0,0);

// Or double-size!
g.setFont("8x12",2);
g.drawString("Hello World!",0,20);

For instance if using FontDennis8 (About Modules), use require("FontDennis8") and g.setFontDennis8(); or g.setFont("Dennis8").

Character sets

Espruino does not support unicode natively (and even if it did there wouldn't be enough memory for every character). Espruino's strings are 8 bits only, so while Espruino can store UTF-8, it doesn't interpret it in any useful way.

To deal with Latin languages, Espruino uses an 8 bit Latin codepage. This is effectively the following:

• ISO8859-1 (otherwise known as ISO Latin)
• ISO10646-1/Unicode (this is UTF-16, but character codes 0..255 are basically the same as ISO8859-1)

There are some minor differences between the two (eg. the Euro symbol at char code 128) but on the whole they are identical.

• The built-in 4x6 small font only includes 0-127 ASCII chars
• The 6x8 font and Vector fonts (where included) contain the full character set
• Many custom fonts contain the full character set (see above)

To convert text to ISO8859-1 on the desktop you can usually just use String.charCodeAt(position). Since character codes returned are Unicode, if the character code is between 0 and 255 it should map directly to Espruino's font.

Custom Fonts

You can also create your own fonts. To do this, see g.setFontCustom(...)

You'll need a string containing a column-first, most significant bit first, 1 bit per pixel bitmap containing the font bitmap. Optionally you can also have another string containing the widths of each character.

We now have a Font Converter page that allows you to create fonts for Espruino based on a Web Font.

Matt Brailsford has made an excellent online font converter specifically for creating fonts for Espruino. ... or for an example of how to create the data programmatically, take a look at the JS file used to make Espruino's font modules.

Font Widths

Often it's extremely useful to know the size of a piece of text - either so that you can position it centrally, or so that you can position other text at the end. For this, you can use g.stringWidth().

For example you may want to draw some small text right after some big text:

function bigThenSmall(big, small, x, y) {
  g.setFont("Vector",20);
  g.drawString(big, x, y);
  x += g.stringWidth(big);
  g.setFont("4x6");
  g.drawString(small, x, y);
}
bigThenSmall("Hello", " World", 0,0);

or you may just want to draw text centrally:

function central(text, y) {
  g.drawString(text, (g.getWidth() - g.stringWidth(text))/2, y);
}
central("Hello", 0);

Doubling Font Size

There might be a case where you need to take a small font and double the size of it (to save memory, or because it can look interesting).

As of Espruino 2v05 can now just use g.setFont(fontName, scaleFactor).

However in older Espruino versions you could use this (slower) code:

// txt=text string, px=>x position, py=>y position, h=height of font
Graphics.prototype.drawStringDbl = (txt,px,py,h)=>{
  var g2 = Graphics.createArrayBuffer(128,h,2,{msb:true});
  // set your custom font here if you need to
  var w = g2.stringWidth(txt);
  var c = (w+3)>>2;
  g2.drawString(txt);
  var img = {width:w*2,height:1,transparent:0,buffer:new ArrayBuffer(c)};
  var a = new Uint8Array(img.buffer);
  for (var y=0;y<h;y++) {
    a.set(new Uint8Array(g2.buffer,32*y,c));
    this.drawImage(img,px,py+y*2);
    this.drawImage(img,px,py+1+y*2);
  }
};


g.clear()
g.drawStringDbl("Hello",0,0,5)
g.flip()

The code works with a maximum text width of 128px, which means 256px in double-size font.