JSFiddle - React, Tailwind, and code Playground

HTML

<canvas width=1000 height=1000></canvas>

JavaScript

const font = [54, 61, 55, 62, 51, 19, 39, 29, 42, 26, 38, 53, 56, 44, 60, 31, 47, 22, 45, 43, 52, 24, 63, 33, 27, 30];
const c = document.querySelector('canvas').getContext('2d');
const px = 6;
[
  'abcdefghijklmnopqrstuvwxyz',
  'the quick brown fox jumped over a lazy dog',
  'the sex life of a woodchuck is a',
  'provocative question for most',
  'a very simple readable sentence',
  'to be or not to be',
  'that is the question',
].forEach((s, line) => {
  for (let i = 0; i < s.length; i++) {
    for (let b = 0; b < 6; b++) {
      c.fillStyle = (font[s.charCodeAt(i) - 97] & (1 << b)) ? '#000' : '#fff';
      c.fillRect((i * 3 + (b & 1)) * px, (line * 5 + (b >> 1)) * px, px, px);
    }
  }
});