Font basics

This section explains how fonts work when using displays on the Toit SDK.

Introduction

There is a selection of freely usable fonts available in packages.

The fonts are in the form of bitmaps, rather than scalable fonts. For some fonts that were originally scalable, a selection of pixel sizes have been created ahead of time. They can be displayed in any of 4 orientations. Most of the fonts are variable-width, but there are also some typewriter-style fixed-width fonts.

In order to save space on the device, you must select which blocks of glyphs (letters) you require for each font you are using. This will depend on the languages you wish to support on the display, and which special characters you need. For English language text it will be enough to include the ASCII block. For the accented characters used in Western Europe you will need to add the LATIN_1_SUPPLEMENT block. See the full list of blocks at Wikipedia. Toit packages use a capitalized version of the official names of the blocks, replacing spaces and dashes with undercores. The exception is the "Basic Latin" block, which is called ASCII. Not all blocks are available in every font.

Right-to-Left writing systems and Abugida writing systems are not currently suported.

Example

In the following example we assume the font_x11_adobe package has been installed in your project.

// Import the font and size that you need, and give it a name.
import font_x11_adobe.sans_14_bold as s14b

// Other imports we need.
import font show Font
import pixel_display show TwoColorPixelDisplay

// Select the Unicode blocks you need from the font. In this
// case we have the coverage needed for Western Europe, plus
// the Euro sign, which is in the CURRENCY_SYMBOLS block. We
// call our subset of the font sans_10_bold.
sans_14_bold ::= Font [s14b.ASCII, s14b.LATIN_1_SUPPLEMENT, s14b.CURRENCY_SYMBOLS]

// For this example the display is black-and-white, and is called "eink"
display ::= TwoColorPixelDisplay "eink"

// Create a graphics context that uses this font. Whenever we
// add a text texture to a display using this context, the given
// font will be used.
context := display.context --landscape --font=sans_14_bold

// An example function that adds a text to a display.
my_fish_adding_function:

  // Add the fish text to the display at coordinates (50, 50).
  display.text context 50 50 "Ål, 3€/kg"

  // Update the display with the latest addition.
  display.draw

Available Fonts

The fonts are arranged according to their origin.

Fonts from X11

These are taken from the X11 Windowing system commonly used with Linux. They have been hand-optimized for low-resolution screens and are suitable for use cases where individual pixels are visible to the naked eye.

sans

This font is from the font_x11_adobe package. It is a modified version of the Adobe font named "Helvetica". "Helvetica" is a trademark of Monotype Imaging Inc.

A clean sans-serif variable-width font, available in sizes 6, 8, 10, 12, 14, 18, and 24. The styles are default, oblique, bold and bold_oblique. For example the default style is found with import font_x11_adobe.sans_14 and the bold style can be found with import font_x11_adobe.sans_14_bold. Coverage includes mainly Latin letters, including accented variants. See the copyright message.

book

This font is from the font_x11_adobe package. It is a modified version of the Adobe font named "New Century Schoolbook". "New Century Schoolbook" is a trademark of Monotype GmbH.

A serif variable-width font, available in sizes 6, 8, 10, 12, 14, 18, and 24. The styles are default, italic, bold and bold_italic. For example the default style is found with import font_x11_adobe.book_14 and the bold style can be found with import font_x11_adobe.book_14_bold. Coverage includes mainly Latin letters, including accented variants. See the copyright message.

serif

This font is from the font_x11_adobe package. It is a modified version of the Adobe font named "Times New Roman". "Times New Roman" is a trademark of The Monotype Corporation.

A serif variable-width font, available in sizes 6, 8, 10, 12, 14, 18, and 24. The styles are default, italic, bold and bold_italic. For example the default style is found with import font_x11_adobe.serif_14 and the bold style can be found with import font_x11_adobe.serif_14_bold. Coverage includes mainly Latin and Greek letters, including accented variants. See the copyright message.

typewriter

This font is from the font_x11_adobe package. It is a modified version of the Adobe font named "Courier".

A serif fixed-width font, available in sizes 6, 8, 10, 12, 14, 18, and 24. The styles are default, oblique, bold and bold_oblique. For example the default style is found with import font_x11_adobe.typewriter_14 and the bold style can be found with import font_x11_adobe.typewriter_14_bold. Coverage includes mainly Latin letters, including accented variants. See the copyright message.

clear

This font is from the font_clear package. It is a modified version of the Bigelow and Holmes font named "Lucida Bright". "Lucida" is a trademark of Bigelow and Holmes, Inc.

A serif variable-width font, available in sizes 8, 10, 12, 14, 18, 19, and 24. The styles are default, italic, bold and bold_italic. For example the default style is found with import font_clear.clear_14 and the bold style can be found with import font_clear.clear_14_bold. Coverage includes mainly Latin letters, including accented variants. See the copyright message.

clear_sans

This font is from the font_clear package. It is a modified version of the Bigelow and Holmes font named "Lucida Sans". "Lucida" is a trademark of Bigelow and Holmes, Inc.

A sans-serif variable-width font, available in sizes 8, 10, 12, 14, 18, 19, and 24. The styles are default, italic, bold and bold_italic. For example the default style is found with import font_clear.clear_sans_14 and the bold style can be found with import font_clear.clear_sans_14_bold. Coverage includes mainly Latin letters, including accented variants. See the copyright message.

Clearly-U

This font is from the font_clearly_u package.

A sans-serif variable-width font, available only in size 12. The styles are default and autobold, where the autobold variant has been generated automatically by Toit, so it can be a little crude-looking. For example the default style is found with import font_clearly_u.clearly_u_12 and the bold style can be found with import font_clearly_u.clearly_u_12_autobold. It has good coverage of left-to-right alphabets, including Roman, Greek, Cyrillic, Armenian, Georgian, Ge'ez (Ethiopic), Cherokee, Unified Canadian Aboriginal, Runes, and Braille. It also has some symbols, arrows and geometric shapes. See the copyright message

Matthew Welch

The font designer Matthew Welch has designed some freely available fonts, one of which we have chosen for inclusion.

tiny

This font is from the font_tiny package.

The tiny font has a normal height of only 4 pixels, plus one pixel for descenders. Toit also provides a modified version of this font to expand digits into the descender area, which makes them 5 pixels high, and slightly more readable. It covers only the ASCII area and so has no accented or non-English characters. Use with import font_tiny.tiny or import font_tiny.tiny_bigger_digits. See the copyright message.

Google

The fonts in the Google Fonts project are distributed as TrueType scalable fonts. We have converted one of them to our bitmap format. Some refinements, for example kerning of individual letter pairs, are not feasible to implement in a small platform, and have not been included in the version available here.

Roboto

This font is from the roboto package.

This is a scalable sans-serif font used on Android phones among other places. The bitmap versions here have been automatically generated, and can be a little rough around the edges, especially on low resolution displays. They are available in larger sizes than the hand-optimized bitmap fonts. The styles are thin, light, regular, medium, bold, and black. Each style is also available in an italic variant. Sizes are 10, 11, 12, 14, 16, 18, 20, 22, 24, 28, 32, and 36. For example the regular style is found with import roboto.roboto_14_regular and the italic style can be found with import roboto.roboto_14_regular_italic. Roboto has good coverage of Roman, Greek, and Cyrillic alphabets. See the copyright message.