Published: 2023 / 07 / 26
Summary: I show how to use Python to analyze glyphs from SVG and fonts. I compare the new X.com logo to the corresponding glyph in a few different fonts. There are no exact matches, but some features closely match those in the Noto Font.
A few days ago, Elon Musk changed the name of Twitter to X.com and replaced the iconic little blue bird logo with something that looks like this: 𝕏
He was rightfully ridiculed for throwing away a good brand to chase some long-simmering dream of an "everything app" that no one seems to want. More criticism came when he unveiled the logo, with comments like "he just used a Unicode character!".
While the spirit of this criticism was right, some comments confused a few terms. Unicode defines a set of characters and their properties, but does not specify their visual appearance. (Although official code charts do include one representative glyph for each character). So, if he did just "steal" something, it would be a glyph from a font used to represent this character.
The character in question is U+1D54F, whose name is MATHEMATICAL DOUBLE-STRUCK CAPITAL X, and appears in the Mathematical Alphanumeric Symbols block. The official code chart for this block, U1D400.pdf, calls this group of characters Double-struck symbols.
The goal of this post is to investigate the actual shape of the logo and compare to the 𝕏 glyphs found in some common fonts. As usual, Python (with some third-party packages) makes this pretty easy.
Now, if you go to
x.com, it redirects you to
twitter.com but does
display the new logo. Open Developer Tools and inspect the logo. You can see that it is an SVG element, consisting of a single svg path.
You can use the Python package svg.path to parse the path data into its components.
from svg.path import parse_path #copied from <path d=___> d = "M18.244 2.25h3.308l-7.227 8.26 8.502 " \ "11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 "\ "2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" for item in parse_path(d): print(item) #output: # Move(to=(18.244+2.25j)) # Line(start=(18.244+2.25j), end=(21.552+2.25j)) # Line(start=(21.552+2.25j), end=(14.325+10.51j)) # ...
from matplotlib.path import Path from svg.path import Move, Line, Close verts,codes = , for item in parse_path(d): verts.append( (p.end.real, p.end.imag) ) if type(p) == Move: codes.append(Path.MOVETO) elif type(p) == Line: codes.append(Path.LINETO) elif type(p) == Close: codes.append(Path.CLOSEPOLY) else: raise NotImplmementedError(repr(p)) verts = np.array(verts) path = Path(verts,codes)
macOS system, I found two fonts
that have this glyph,
Both are STIX fonts; one regular and one bold.
I will use fontTools library to get the glyphs from the fonts. After getting
the glyph, we again create the
arguments we need for
from fontTools.ttLib import TTFont from fontTools.pens.ttGlyphPen import TTGlyphPen from fontTools.pens.recordingPen import RecordingPen font_path = "NotoSansMath-Regular.ttf" font = TTFont(file_path) glyphSet = font.getGlyphSet() glyph = glyphSet['u1D54F'] pen = RecordingPen() glyph.draw(pen) verts,codes = , for cmd,pts in pen.value: if cmd == 'moveTo': pt, = pts codes.append(Path.MOVETO) verts.append(pt) elif cmd == 'lineTo': pt, = pts codes.append(Path.LINETO) verts.append(pt) elif cmd == 'closePath': codes.append(Path.CLOSEPOLY) verts.append((0,0)) else: raise NotImplmementedError(cmd) verts = np.array(verts,np.float64)
SVG and TTF files use different coordinate systems and we don’t know how the
X.com logo may have been scaled or transformed, so to compare everything, lets scale and shift our vertices to fill the unit square,
def normalize_verts(v,c): """ v,c are the vertices and codes arguments to matplotlib.path.Path return new vertices with x and y scaled and translated to the range [0,1] """ y = v.copy() # ignore CLOSEPOLY vertex because its not a real point, ii = [i for (i,cc) in enumerate(c) if not cc == Path.CLOSEPOLY] xmin,ymin = y[ii,:].min(axis=0) y[:,0] -= xmin y[:,1] -= ymin xmax,ymax = y[ii,:].max(axis=0) y[:,0] /= xmax y[:,1] /= ymax return y
We plot and save image using
import matplotlib.pyplot as plt dpi = 100 Wp = 1600 Hp = 1600 fig = plt.Figure( (Wp/dpi, Hp/dpi), ) ax = fig.add_axes([0,0,1,1]) linewidth = 3 ax.add_patch( patches.PathPatch( Path(verts1, codes1), facecolor=(1,0,0,0.2), #red,transparent edgecolor='red', linestyle = '--', lw = linewidth, )) ax.add_patch( patches.PathPatch( Path(verts2, codes2), facecolor=(0,0,1,0.2), #blue,transparent edgecolor='blue', linestyle = ':', lw = linewidth, )) ax.set_xbound(-.2, 1.2) ax.set_ybound(-.2, 1.2) ax.grid(True) ax.figure.savefig("fig.png")
So, in the following figures,
X.com logo is in transparent-blue, with blue-dotted border.
The font glyph is in transparent-red, with red-dashed border.
A also checked my Ubuntu machine for
fonts with this glyph and found 17:
Noto Sans Math font,
STIX fonts, and 11 variations
of DejaVu fonts.
Some of the variations have
Here’s a GIF of all them:
For these commonly-used fonts, the logo
does not match exactly any of the 𝕏 glyphs.
Noto Sans Math glyph has some
pretty strong similarities:
The slopes of the lines are nearly
identical, some of the lines
almost perfectly line-up,
and the width of the double-struck line
is basically identical (click the above images for higher resolution). Coincidence …?
This, of course, does not answer the question, Did Musk steal his new X logo? - there are countless more fonts out there (although the amount of fonts that support this character is probably relatively small).
It is also possible that Musk didn’t steal it and he actually paid a designer for 10 minutes of work to draw two lines.
Anyways, it was a good excuse to do some glyph analysis in Python.