Moddable SDK and Monotype Spark Deliver Scalable Fonts on Low-Cost Embedded Hardware

Often the best way to interact with a product is using a screen. Computers and mobile phones have long used screens as their primary means of communicating information to the user. As Internet of Things (IoT) products move from the early adopter phase to the mainstream, many of them will incorporate displays to ease configuration by customers, provide additional features, and reduce support costs. To render a modern user interface, scalable fonts are invaluable. They provide users with crisp, readable text at the optimal size, and product designers with the ability to imbue the product with brand character through typography.

While rendering text well is still challenging, particularly on inexpensive hardware, Monotype and Moddable are now offering technology that makes it easier to deliver high-quality scalable fonts to embedded devices without the need for time-consuming integration efforts. By joining forces, we provide designers with the flexibility to use text creatively without burdening embedded software engineers with a myriad of new text challenges including rendering, measuring, internationalization, layout, performance, caching and memory use.

Monotype provides users with an unparalleled library of distinctive fonts, and Monotype Spark™, a remarkably efficient and high-quality rendering engine for embedded devices. Moddable integrates the Monotype Spark engine into its modern Moddable SDK for building rich, animated user interfaces for low-cost embedded devices that incorporate a display. Unlike most embedded GUI solutions, the Moddable SDK uses standard JavaScript for UI development—the same language used to bring web pages to life—with all source code openly available.

Design flexibility

The integration of Monotype Spark into the Moddable SDK provides designers of IoT products with unmatched flexibility and breadth of text rendering options. Benefits include:

  • Anti-aliased rendering, ensuring smooth edges on all glyphs
  • Works with any TrueType or OpenType font: For best results on embedded devices, Monotype offers fonts optimized to reduce memory use and improve rendering performance.
  • Combine several fonts on a single screen
  • Scale fonts to arbitrary size
  • Mix multiple font sizes on a single screen
  • Combine multiple fonts, font sizes, and colors in a single line
  • Smoothly animate text
  • Fade text in and out
  • Blend text against any background
  • Render glyphs using outlines for scale, squash, stretch, and rotate effects
  • Space characters precisely with kerning
  • Control leading between individual lines of text

Demonstrations

These demonstration videos show the Monotype Spark engine running on an ESP32 microcontroller powered by the Moddable SDK. The display is QVGA (320 x 240) operating at 16-bits per pixel.

Logo Tween - The characters of the Moddable logo animate into place, smoothly scaling as they enter and exit.

Text Styles - The text layout capabilities of the Piu user interface framework are exercised using the Open Sans TrueType font. All glyphs are rendered on-demand on the embedded microcontroller.

Bouncing Glyphs - Four glyph outlines from the Burlingame Pro font animate in real time by independently modifying their horizontal and vertical scales.

Word Clock - A text based clock that allows the user to select their preferred font weight and size.

Engineering power

Moddable has integrated the Monotype Spark engine with the Moddable SDK, so IoT application developers can immediately start building their user interface. Because the Moddable SDK uses JavaScript as its primary programming language, developers implement user interfaces more quickly than in traditional embedded development tools in C or C++.

High quality anti-aliased text at all sizes

Additional features include:

  • Build simple user interfaces using the Poco rendering engine
  • Deliver sophisticated animated touch user experiences using the Piu user interface framework
  • Use fonts directly from flash memory - no file system required
  • Use any Unicode glyph because all text is stored in UTF-8
  • Render most languages directly, including Japanese, Simplified Chinese, and Traditional Chinese
  • Render complex languages and bi-directional text (e.g Thai, Arabic, Hebrew) using Monotype's Shaper Spark
  • Support multiple languages easily using the localization framework built into Moddable SDK
  • Learn from the extensive documentation for the Poco rendering engine and Piu user interface framework
  • Get started using dozens of example applications
  • Check out the source code to the Moddable SDK runtime and tools on on GitHub

Embedded resource use

When evaluating software for embedded devices, numbers are essential to understand whether a technology can be used in your project. Of course, each deployment is unique so the numbers will vary. These numbers should only be used as approximate guidelines.

  • Rendering anti-aliased animated text at 60 FPS
  • 20 KB RAM for renderer (only needed when rendering new glyphs into cache)
  • 4 to 6 KB for rendered glyph cache (uses Moddable's unique weighted run-length algorithm)
  • 100 KB code for Monotype Spark rendering engine
  • 300 to 600 KB code for Moddable SDK (including graphics renderer, user interface engine, JavaScript engine, etc)
  • 160 MHz MCU. All software running from flash ROM (XIP)

Note: These numbers are for an ESP32 MCU. Similar results are seen on ARM MCUs and x86 processors.

Supports all screen orientations with no impact on memory use or performance

TrueType/OpenType fonts work efficiently for embedded

A common challenge in embedded software development is adapting standard technologies from computer and mobile for use on microcontrollers that have at least an order of magnitude less power. The benefits of using standard technologies include the re-use of proven designs, access to powerful tools, and lower total cost of development. Unfortunately, many standards used on computers and mobile are not designed for products powered by embedded processors. JavaScript was created for computers and has continued to evolve with the expectation it will be used only on computers and powerful mobile devices. Moddable has done considerable work to allow the modern JavaScript language to be used on embedded microcontrollers. Similarly, Monotype has invested heavily to render TrueType/OpenType fonts efficiently on embedded microcontrollers, even optimizing the fonts for embedded systems.

Monotype extended TrueType fonts to optimize their use in embedded products:

  • Fonts may be compressed with a Monotype's CCC algorithm to reduce the amount of flash storage memory required. Compressing fonts does not significantly impact rendering performance. Compression results vary by font. The fonts in the Monotype SDK compress by approximately 15%.
  • Fonts may be optimized for the product's screen depth - for example, including data only required for 1-bit rendering or 8-bit gray rendering.
  • For fonts with composite glyphs such as those used in many Asian languages, the size of rendering hints is reduced by hinting the components of a composite glyph separately and then hinting the overall composite glyph, to just make some adjustments.
  • The font can be optimized to include only the glyphs required by the product.
  • Standard TrueType hints are inefficient on embedded so Monotype embedded hinting may be applied instead. And, if no hints are available, auto-hinting is applied.
  • To support complex international layouts, including Thai and Arabic, Monotype transforms standard layout tables in TrueType to a more compact, more efficient format.

 

Monotype created the Spark font rendering engine to meet the needs of embedded product designers:

  • Fonts can be rendered at 1, 2, 4, and 8 bit gray to eliminate unnecessary format conversation on the embedded device.
  • Fonts can be rendered rotated at 0, 90, 180, and 270 degrees to match the display, eliminating the need to rotate during rendering.
  • Implements fast Monotype hints and drop-out control to deliver high quality anti-aliased glyphs
  • Performs all calculations using fixed point math so no FPU is required
  • Pure ANSI C implementation for ease in porting

Availability

The Moddable SDK with support for the Monotype Spark engine is available now.

An evaluation kit for the Monotype Spark integration with the Moddable SDK is available. To request an evaluation kit, contact Moddable Licensing. Monotype Spark integration is available only to commercial licensees of the Moddable SDK.

Support

Both Monotype and Moddable offer development support for customers building products using their respective technologies.


As part of this partnership, Monotype offers:

  • Font tuning
  • Custom font design
  • Rendering engine enhancements


As part of this partnership, Moddable offers:

  • Embedded application development
  • UX design for IoT products
  • Custom text rendering to achieve branding goals
  • Moddable SDK porting