tobireif.com / posts Twitter Logo

Creating a Logo using Custom Fonts

What?

A logo consisting of selectable & searchable text and one font per character. The logo as a whole has a basic symmetry, and each rendered character is unique.

A screenshot:

Why?

For a project I needed a logo. The main heading of the page should be text marked up as h1, it shouldn't be an image, and it should consist of lettering forming a logo. No two characters should look the same, so that the word looks less like an inline word where eg all three "e"s would normally be rendered using the same glyph.

I could've created one custom font for the set of characters in the logo word, but then it wouldn't be straightforward to get different glyphs for the three "e"s. By creating one font per character, I can also directly give the logo the symmetry it has, where the first and last character are rendered using glyphs that are partly symmetrical.

How?

I'll list the steps, as a high level overview.

Using Inkscape → Text → SVG Font Editor, I created one font for each of the eleven characters in the word "Centerslate". Each font contains the glyph for just one character. From the SVG font file for the "C":

<glyph unicode="C" [...] d="M368 818 [...]"/>

Then I converted each SVG font to WOFF and TTF using a web-app. The loading phase was awful, so I inlined each file as a base64 string.

Each font face gets defined in the CSS

@font-face { font-family: centerslate_01_C; src: url([...]) format("woff"), url([...]) format("truetype"); font-weight: normal; font-style: normal; }

and gets applied to one of the 11 characters, eg

.logo_01_C { font-family: centerslate_01_C; }

The Result

The logo is here.

P. S.

The code which applies the "3D-block":

function makeBlock(blockSpecs) { var layerCount = 0; var blocks = []; blockSpecs.forEach(function(spec){ var count = 0; while (count < spec.thickness) { var stringPart = (layerCount + 0.5) + "px"; var block = [stringPart, stringPart, spec.color].join(" "); blocks.push(block); count += 0.5; layerCount += 0.5; } }); return( ["text-shadow", blocks.join(", ")] ); } var style = document.createElement("style"); document.head.appendChild(style); function setBlock(thickness1, thickness2) { var block = makeBlock([ {thickness: thickness1, color: "#abff93"}, {thickness: thickness2, color: "#a5eaff"} ]); style.innerHTML = "#logo h1 {" + block.join(": ") + "; " + "color: #369cdb;" + "}"; }

If you enjoyed this post, follow me on Twitter Twitter Logo