4x8 Font

Posted on
  • I was just doing a video

    showing how to display realtime YouTube video views on a 32x8 LED display, and I was having some difficulty fitting any number above 100k on the display with the normal 8 pixel high font (which is also basically 7px for most characters).

    It struck me it'd be really handy to have a proper 8 pixel high number font that fitted into 3 pixels wide (4 pixels with a gap), so I've sketched up what's below. What does everyone think?

    I'm not a big fan of 6, 8 and 9 - any ideas how to make them better? @jose1711 ?

    "███ "
    "█ █ "
    "█ █ "
    "█ █ "
    "█ █ "
    "█ █ "
    "█ █ "
    "███ "
    
    " █  "
    "██  "
    " █  "
    " █  "
    " █  "
    " █  "
    " █  "
    "███ "
    
    " █  "
    "█ █ "
    "  █ "
    "  █ "
    " █  "
    "█   "
    "█   "
    "███ "
    
    " █  "
    "█ █ "
    "  █ "
    " █  "
    "  █ "
    "  █ "
    "█ █ "
    " █  "
    
    "█ █ "
    "█ █ "
    "█ █ "
    " ██ "
    "  █ "
    "  █ "
    "  █ "
    "  █ "
    
    "███ "
    "█   "
    "█   "
    "██  "
    "  █ "
    "  █ "
    "█ █ "
    " █  "
    
    " ██ "
    "█   "
    "█   "
    "██  "
    "█ █ "
    "█ █ "
    "█ █ "
    " █  "
    
    "███ "
    "  █ "
    "  █ "
    "  █ "
    " █  "
    " █  "
    " █  "
    " █  "
    
    " █  "
    "█ █ "
    "█ █ "
    " █  "
    "█ █ "
    "█ █ "
    "█ █ "
    " █  "
    
    " █  "
    "█ █ "
    "█ █ "
    " ██ "
    "  █ "
    "  █ "
    "  █ "
    "██  "
    

    I'll cope up with some code to create a font from this later - it's just convenient to be able to post stuff on the forum so we can see/edit them easily.

  • hello gordon,

    i see nothing wrong about 8, 6 and 9 do not align if you turn one of them upside down - maybe you could fix that. btw.. i can see your preference for serifs, rounded corners, number zero though is breaking this concept. personally - for 3px width i'd go with something way more simple, e. g.:

        "███ "
        "█ █ "
        "█ █ "
        "█ █ "
        "█ █ "
        "█ █ "
        "█ █ "
        "███ "
    
        " █  "
        " █  "
        " █  "
        " █  "
        " █  "
        " █  "
        " █  "
        " █  "
    
        "███ "
        "  █ "
        "  █ "
        " ██ "
        "██  "
        "█   "
        "█   "
        "███ "
    
        "███ "
        "  █ "
        "  █ "
        " ██ "
        "  █ "
        "  █ "
        "  █ "
        "███ "
    
        "█ █ "
        "█ █ "
        "█ █ "
        "███ "
        "  █ "
        "  █ "
        "  █ "
        "  █ "
    
        "███ "
        "█   "
        "█   "
        "██  "
        " ██ "
        "  █ "
        "  █ "
        "███ "
    
        "███ "
        "█   "
        "█   "
        "███ "
        "█ █ "
        "█ █ "
        "█ █ "
        "███ "
    
        "███ "
        "  █ "
        "  █ "
        "  █ "
        "  █ "
        "  █ "
        "  █ "
        "  █ "
    
        "███"
        "█ █ "
        "█ █ "
        "███ "
        "█ █ "
        "█ █ "
        "█ █ "
        "███ "
    
        "███ "
        "█ █ "
        "█ █ "
        "███ "
        "  █ "
        "  █ "
        "  █ "
        "███ "
    
  • Thanks! Yes, I think those probably make more sense given the number of pixels. I'll add that font in now (as Font4x8Numeric)

    For anyone who is interested in trying stuff like this, here's the code I used to make the font:

    var font = ""+
        "### "+
        "# # "+
        "# # "+
        "# # "+
        "# # "+
        "# # "+
        "# # "+
        "### "+
        " #  "+
        " #  "+
        " #  "+
        " #  "+
        " #  "+
        " #  "+
        " #  "+
        " #  "+
        "### "+
        "  # "+
        "  # "+
        " ## "+
        "##  "+
        "#   "+
        "#   "+
        "### "+
        "### "+
        "  # "+
        "  # "+
        " ## "+
        "  # "+
        "  # "+
        "  # "+
        "### "+
        "# # "+
        "# # "+
        "# # "+
        "### "+
        "  # "+
        "  # "+
        "  # "+
        "  # "+
        "### "+
        "#   "+
        "#   "+
        "##  "+
        " ## "+
        "  # "+
        "  # "+
        "### "+
        "### "+
        "#   "+
        "#   "+
        "### "+
        "# # "+
        "# # "+
        "# # "+
        "### "+
        "### "+
        "  # "+
        "  # "+
        "  # "+
        "  # "+
        "  # "+
        "  # "+
        "  # "+
        "### "+
        "# # "+
        "# # "+
        "### "+
        "# # "+
        "# # "+
        "# # "+
        "### "+
        "### "+
        "# # "+
        "# # "+
        "### "+
        "  # "+
        "  # "+
        "  # "+
        "### ";
    
    var fdata = "";
    for (var col=0;col<font.length/8;col++) {
      var i = (col&3)+((col&~3)<<3);
      console.log(i);
      fdata += String.fromCharCode(
        (font[i   ]==" "?0:128)|
        (font[i+ 4]==" "?0:64)|
        (font[i+ 8]==" "?0:32)|
        (font[i+12]==" "?0:16)|
        (font[i+16]==" "?0:8)|
        (font[i+20]==" "?0:4)|
        (font[i+24]==" "?0:2)|
        (font[i+28]==" "?0:1));
    }
    // ...
     g.setFontCustom(fdata, "0".charCodeAt(0), 4, 8);
    

    As it happens I forgot that the font data is column-ordered. If I'd originally made the characters at right-angles to where they are, the code for it would have been amazingly simple.

  • Post a reply
    • Bold
    • Italics
    • Link
    • Image
    • List
    • Quote
    • code
    • Preview
About

4x8 Font

Posted by Avatar for Gordon @Gordon

Actions