A CSS Webfont Logotype

A pure text logotype, wordmark or masthead is now very achievable using HTML and CSS in combination with webfonts. Our little demo will introduce you to some of the possibilities and advantages in such an approach.

cookie monsieur
Baked in Goodness

Making a website’s main identifying stamp out of just HTML, CSS and real text is a great idea. We keep talking about how important it is that as much text as possible on your site is indexable and readable by non-human eyes – why shouldn’t that extend to your branding? Your business or project name is there at the top of every page; set it in real text, have it large, scalable and readable. True, many logos are uniquely hand-lettered creations, and have nothing to do with fonts at all, while others take existing fonts as their foundation before being tweaked and adapted during the design stage. But if you’re lucky enough to get a new web branding project with a blank slate in terms of what can be done — and how many new brands nowadays don’t exist on the web? — then consider planning for an HTML/CSS logotype from the outset. There are so many web-ready fonts available now, that achieving standout individuality will be easier than you might think.

For our example we’ve used Fenotype’s Mishka, which in addition to its upright and italic forms has some lovely matching ornaments which we have used to make a decorative frame. Using a font for ornaments isn’t always going to be the best approach — PNG or SVG might be a better idea in some situations — but it does mean that the lettering and graphics have come from the same stylistic concept, and that they’ll scale up or down beautifully as required by either your design or your users’ device and browser constraints.

Ornaments, icons and pictograms are a popular sideline for many font designers. If you plan to use ornaments from a font, check to see if the foundry has made them available in a separate font file. Accessing them through OpenType is still not supported in most browsers, and creating a subset that pulls them out of one of those huge OpenType font files is rather complicated. For this reason, Mishka is a great example. A family of three, its ornaments are found in a separate font, and isolating just the glyphs you need for a subset is a cinch with our kit building tools.

We did our initial design using Adobe Illustrator, making use of the glyph palette to see all the glyphs at once and try out various combinations and arrangements.

When it came time to writing the code, consistent positioning of the elements was the main challenge, while devising a system that would make sure each part would scale and remain relative to its neighbors. The containing div holding the logotype will act as the reference point for absolute positioning of the elements inside. It also specifies a base point size that child divs will use for the em-based sizes that allows each element to scale.

The CSS used to make such a logo is pretty straight forward, however it’s important to have a full understanding of the fundamentals.

Here is a break down of the CSS we used.

div.masthead { width: auto; height: auto; padding: 30px 0 20px 0; font-size: 65px; text-align: center; }

This is the wrapper div that holds all of the text elements that make up the logo. We are making certain that the text is centered and that it's the right size.

.ornament1 { font-family: "MishkaOrnaments" font-size: 3.25em; color: #81A9F5; }

Going over all the CSS would be redundant, but here is the first ornamental, the sideways curly bracket on the top. We used a stripped down subsetted build of Mishka Ornaments, and adjusted the line-height so that our other elements can get nice and close to it.

Taking a similar strategy for each element in the logo, getting it positioned just right, you’ll end up with a really nice logo that is totally CSS and text.

Here are a few examples from our Webfonts in action section. We’d love to see what else is out there. How are designers using webfonts to brand their websites, from mastheads to logotypes and ornaments? Let us know about your projects or others you’ve spotted using our submission form.

Don't fear the internet Kitchen Sink Studios website The Journal Online website Lauren Carvalho website