Our screen dimensions grow disparate. Our pixels grow fine. The audience we reach continues to broaden. As the conditions we create for become increasingly diverse we need more agile and capable tools. Flexibility, scalability, and accessibility are vital.

What is Symbolset?

Symbolset aims to provide well-crafted symbols using the most suitable methods. This has led us to develop our own semantic symbol webfont. Let’s discuss how we arrived at webfonts and why semantics are important.

There are other techniques for displaying symbols that are suitable under certain conditions. We’ll talk about those another time.

Where did symbol fonts come from?

Proto- symbol fonts are kind of old. They weren’t called fonts, the term was used more conservatively than it is today. They lacked the cohesion, the set-ness, of a typeface. But these pictorial cuts were sold and used alongside type. They were wood, metal, film, and available in type catalogs as individual pieces. The imagery and themes of these old pictorial cuts were different but the relationship with type was the same.

Today, our computers ship with symbol fonts: Zapf Dingbats (1978) which would eventually become part of Unicode; Wingdings (1990); and Webdings (1997) designed by, among others, Vincent Connare of Comic Sans and Trebuchet fame.

Why webfonts?

Fonts are a familiar tool. They’re lightweight and they provide dozens of glyphs with a single HTTP request. Symbol fonts have the same properties as any font on the web: file size, scale, color, transparency, effects, transitions, and more.

Webfonts are becoming a more popular means for displaying symbols and UI elements. The adoption of symbol fonts by the web has been precipitated by a need for resolution-independence and backed by support for webfonts.

How are they used?

Digital symbol fonts commonly map symbols in place of alphabetic characters. This method, still in use by many icon fonts today, is a clever hack for dealing with limitations of early digital font formats. With Symbolset we are removing those limitations.

Each icon font using this technique maps symbols in their own way. “A” will be five different symbols in five different fonts. This arbitrary mapping boxes us in. It prevents conversation between sets and doesn’t allow us to change sets easily.

Digital type has a system. You can set “A” in Helvetica, Georgia, or Verdana. Each will look different, and subjectively beautiful. However each is an “A” and each has Unicode code point U+0041. “A” is not an airplane. It’s not a checkmark nor a paperclip.

Language and systems are vital.

How does Symbolset work?

Elegant solutions are often created with the tools you already have.

Our system uses plain-language keywords and Unicode instead of letter-mapping. They’re baked into our fonts with OpenType.

As we release new sets we reinforce imagery and meaning. We nurture a system that allows us to switch between sets as we would typefaces.

Is this a new idea?

There have been a handful of fonts that use similar OpenType features but nothing that meets the needs of the web.

A handful of people have told us they’ve dreamt of semantic symbol fonts. That’s awesome. That tells us that this makes sense. The semantic font is the logical step given our tools and needs.

Why are semantics important?

Our web is powered by language, a system of structure and syntax.

Type is a system for visualizing language. HTML is a language for describing structure. CSS is a language for describing presentation.

We assemble the web, connecting these building blocks with others. Semantic symbol fonts offer system, language, and most importantly meaning to a tool that is without any.

Let’s invest in type on the web.

Let’s invest in our core tools.

Let’s invest in language.