Everand Logo

Welcome to Everand!

  • Discover millions of ebooks, audiobooks, and so much more with a free trial

    Only $11.99/month after trial. Cancel anytime.

    A Pocket Guide to Creating Symbol Fonts
    A Pocket Guide to Creating Symbol Fonts
    A Pocket Guide to Creating Symbol Fonts
    Ebook45 pages27 minutes

    A Pocket Guide to Creating Symbol Fonts

    By Brian Suda

    ()

    Read preview

    About this ebook

    A new way of creating symbols, glyphs and icons on the web is emerging. The beautifully vectorised images you’re starting to see embedded in sites are called symbol fonts, and they’re smaller, faster, more manageable and smoother than any CSS sprite you might create. Symbol fonts will change the way front-end developers think and code sites. Are you ready?

    In this book, Brian Suda will walk you through five quick chapters about symbol fonts. He’ll explain everything you need to know, from why they’re important, to convincing your boss on why you need to make the switch. You'll learn how to properly and semantically add them into your HTML, as well as follow a step-by-step tutorial on how to convert your vector symbols into a font-face ready to embed into your site. No matter what your level of experience, you should be up and rasterising in less than an afternoon.
    LanguageEnglish
    PublisherBookBaby
    Release dateJan 23, 2013
    ISBN9781907828102
    A Pocket Guide to Creating Symbol Fonts
    Author

    Brian Suda

    Brian Sudadiscovered the Web in 1996 and since then has spend a great deal of each day exploring its nooks and crannies. His own small piece of the web to feed and groom can be found at http://suda.co.uk/

    Related to A Pocket Guide to Creating Symbol Fonts

    Related ebooks

    Internet & Web For You

    View More
    View More

    Related podcast episodes

    Related articles

    • Article

      Adobe Fresco

      Nov 12, 2019

      Adobe Fresco
      2 min read

    • Article

      Why Typography Matters

      Sep 14, 2021

      Why Typography Matters
      2 min read

    • Article

      Visions Of History, Told Through Art

      Mar 12, 2018

      WEIGHING IN AT 8.6 LB., GERMAN creative director Jens Müller’s 480-page tome The History of Graphic Design Vol. 1, 1890–1959 ambitiously traces not only the evolution of an industry, but also the arc of our aesthetics. Told chronologically, with spr

      1 min read

    • Article

      Graphic Design

      Mar 10, 2019

      This issue of C Magazine ushers in a new visual design courtesy of Raf Rennie. Serendipitously, for this issue’s theme, we turn the lens to graphic design. This is a field which tends to be regarded as a prosthesis to art, a facet of commerce, an eff

      3 min read

    • Article

      Lettering Tips And Tricks

      Dec 22, 2021

      Lettering Tips And Tricks
      3 min read

    • Article

      Create Your Own Typeface

      Feb 22, 2017

      Create Your Own Typeface
      3 min read

    • Article

      Explore New Fantasy Worlds

      Nov 21, 2023

      Explore New Fantasy Worlds
      2 min read

    • Article

      For The Love Of Letters

      May 1, 2016

      For The Love Of Letters
      4 min read

    • Article

      ART APPS FOR iPAD

      Mar 9, 2021

      ART APPS FOR iPAD
      5 min read

    • Article

      Creating An Identity

      Jan 28, 2021

      Hopefully you’ve got a clearer idea of your brand basics, firming up what you want to get out of your creative biz, and how you want people to see you. Now it’s time to focus on exactly how you’ll paint that picture to people. Creating an identity fo

      2 min read

    • Article

      The Cost Of Creativity Crisis

      Oct 6, 2022

      With inflation at a forty-year high, we’re surrounded by rising prices. And when it comes to the business of writing, the cost of creativity is increasing, too. There’s also a growing trend in the software industry to move away from one-time purchase

      6 min read

    • Article

      Graphics Capability

      Aug 24, 2021

      Graphics capability covers several angles, such as how frames align text and if images are displayed correctly. You won’t see it done perfectly in terminal browsers because since they aren’t designed for it in the first place. You may also want to ha

      1 min read

    • Article

      Mind Your Language!

      Apr 4, 2023

      Mind Your Language!
      9 min read

    • Article

      10 Amazing AI Tools

      Jul 6, 2023

      10 Amazing AI Tools
      9 min read

    • Article

      Main Features

      Dec 15, 2020

      Main Features
      3 min read

    • Article

      HotPicks

      Jun 30, 2020

      HotPicks
      13 min read

    • Article

      Create A Webpage Or Blog

      Mar 26, 2020

      Create A Webpage Or Blog
      12 min read

    • Article

      Output Quality

      Dec 15, 2020

      Output Quality
      1 min read

    • Article

      It’s Collabora time!

      May 2, 2023

      It’s Collabora time!
      8 min read

    • Article

      Top 10 Programming Languages

      Jan 5, 2023

      Top 10 Programming Languages
      8 min read

    • Article

      The Best Free PC Software

      Sep 2, 2019

      The Best Free PC Software
      12 min read

    Related categories

    Reviews for A Pocket Guide to Creating Symbol Fonts

    0 ratings

    0 ratings0 reviews

    What did you think?

    Tap to rate

    Review must be at least 10 words

      Book preview

      A Pocket Guide to Creating Symbol Fonts - Brian Suda

      Resources

      Chapter 1

      What are symbol fonts?

      We all know what a font is. Some of us might even have a favourite or deplore a certain comical, whimsical font, but you might not know what a symbol font is.

      Do you remember the Wingdings font?

      Do you remember it now? Back in the 1990s Microsoft developed a font called Wingdings which was a series of symbols for each letter. This gave the operating system and applications the ability to display vector images such as arrows, smiley faces, warning signs and various other symbols. This was probably the first introduction to symbol fonts available to the general public, and we abused it. Wingdings was followed by Webdings, which is part of the larger Dingbat family of typefaces. Dingbats are ornamental rather than alphabetic. The place of ornaments made sense when they were part of a printer’s case of metal or wooden blocks, but when typography was translated into the digital world, all of the letters on the keyboard were given digital equivalents and there was no room for these wayward extra symbols. So they got stuck in a font of their own, thereby abusing font semantics and what is to be considered a letter.

      Fast-forward to 2012, and the new symbol fonts are replicating the same intentions. It’s amazing how history repeats itself and sometimes how offbeat innovations, even if they did come from Microsoft, were before their time. Recently, many of the pieces of the puzzle have fallen into place well enough for embedded icon symbol fonts to be viable for display on the web. With browsers’ support of CSS standards, web fonts, OpenType, JavaScript and other rendering technologies, what was a dream in the mid 1990s is now a reality.

      It has taken a while to get here, but the power of smooth vector graphics on the web is a reality.

      Symbol fonts make use of existing font structure and formats. Instead of the characters we expect to be output when we type an A, we get an alternative graphic that could be anything. What we usually call a character, typographers call a glyph. That’s because once you leave the Roman alphabet behind and move into Arabic, Cyrillic, Kanji and others, their symbols are not always characters, but glyphs instead.

      Glyph symbols can be thought of as more like hieroglyphs, where

      Enjoying the preview?
      Page 1 of 1