README

×5 (pronounced Times Five) is a simple typeface, constructed from a 5 by 5 grid of squares. This concept is far from new: seasoned Web designers will remember Kottke’s Silkscreen, but examples can even be found in Bauhaus-era tiles. What makes this version different/special, is that the grid is used recursively to construct more complex structures. These structures are self-similar, and behave like fractals in that sense.

Sizes

×5 does not work with font sizes in the traditional sense, but rather with exponents. ×5 being the smallest, and ×5² (pronounced Times Five Squared) being the next size in line.

In theory there is no upper bound, but I have never gone beyond ×5⁶ myself, because the exponential growth makes this impractical for multiple reasons.

×5¹

×5²

×5³

×5⁴

u0020 u0021 u0022 u0023 u0024 u0025 u0027 u0028 u0029 u002b u002c u002d u002e u002f u0030 u0031 u0032 u0033 u0034 u0035 u0036 u0037 u0038 u0039 u003a u003b u003c u003d u003e u003f u0040 u0041 u0042 u0043 u0044 u0045 u0046 u0047 u0048 u0049 u004a u004b u004c u004d u004e u004f u0050 u0051 u0052 u0053 u0054 u0055 u0056 u0057 u0058 u0059 u005a u005b u005c u005d u005e u005f u007b u007c u007d u007e u00b0 u00b1 u00b7 u00f7 u2021 u2026 u20bf u2234 u2235 u221e u22ee u2302 u23cf u23f8 u23fb u25a0 u25a1 u24a3 u25ac u25ad u25ae u25af u25b2 u25b3 u25b4 u25b6 u25b7 u25bc u25bd u25f0 u25f1 u25f2 u25f3 u25c0 u25c1 u25c6 u25c7 u25e2 u25e3 u25e4 u25e5 u25eb u25fb u2609 u2630 u2631 u2632 u2633 u2634 u2635 u2636 u2637 u2661 u2665 u271d u130d1 22 ACJ AF code plusplus feed glider Hb LE notdef TH uni x5 blinker toad squared-circle n network battery identicon custom random tripletau wifi

×5⁵

u0020 u0021 u0022 u0023 u0024 u0025 u0027 u0028 u0029 u002b u002c u002d u002e u002f u0030 u0031 u0032 u0033 u0034 u0035 u0036 u0037 u0038 u0039 u003a u003b u003c u003d u003e u003f u0040 u0041 u0042 u0043 u0044 u0045 u0046 u0047 u0048 u0049 u004a u004b u004c u004d u004e u004f u0050 u0051 u0052 u0053 u0054 u0055 u0056 u0057 u0058 u0059 u005a u005b u005c u005d u005e u005f u007b u007c u007d u007e u00b0 u00b1 u00b7 u00f7 u2021 u2026 u20bf u2234 u2235 u221e u22ee u2302 u23cf u23f8 u23fb u25a0 u25a1 u24a3 u25ac u25ad u25ae u25af u25b2 u25b3 u25b4 u25b6 u25b7 u25bc u25bd u25f0 u25f1 u25f2 u25f3 u25c0 u25c1 u25c6 u25c7 u25e2 u25e3 u25e4 u25e5 u25eb u25fb u2609 u2630 u2631 u2632 u2633 u2634 u2635 u2636 u2637 u2661 u2665 u271d u130d1 22 ACJ AF code plusplus feed glider Hb LE notdef TH uni x5 blinker toad squared-circle n network battery identicon custom random tripletau wifi

Markup

The easiest way to use this typeface on a webpage is by including glyphs as images:

<img alt="A" src="https://x5.acjs.net/images/x5-n<var>power</var>-<var>key</var>.png">

…where {power} represents the number of iterations or size of the image as a number between 1 and 5, and {key} represents the character to be rendered. This is either a Unicode codepoint prefixed with u, or it is the name of one of the special characters.

<!-- Render a capital A at size/iteration 3. -->
<img alt="A" src="https://x5.acjs.net/images/x5-n3-u0041.png">

Installation

×5 can be installed using Composer:

composer require acj/x5

This makes all static image files available in the dist folder, and gives access to the X5 class that can be used to generate characters.

Usage

// Render a letter A, based on its Unicode codepoint.
$x5 = new \Acj\X5\X5(0x41);
$x5->parse();

// Render an Identicon based on a string, like a username of email address.
$username = 'john-doe';

$x5 = new \Acj\X5\X5('identicon');
$x5->setIdentifier($username);
$x5->parse();

// Render a custom glyph based on a binary string, where every 0 represents an empty block.
$x5 = new \Acj\X5\X5('custom');
$x5->setInput('1111110001101011000111111');
$x5->parse();

Website

This font has its own microsite at x5.acjs.net. This has its own codebase at gitlab.com/acjs/x5.acjs.net (private).