A Pocket Guide to Creating Symbol Fonts
By Brian Suda
()
About this ebook
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.
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
Practical Font Design With FontLab 5 Rating: 0 out of 5 stars0 ratingsThe Web Designer's Idea Book, Volume 3: Inspiration from Today's Best Web Design Trends, Themes and Styles Rating: 0 out of 5 stars0 ratingsWriting for Designers Rating: 0 out of 5 stars0 ratingsThe Principles of Beautiful Web Design Rating: 4 out of 5 stars4/5Webfont Handbook Rating: 4 out of 5 stars4/5Graphics In InDesign Rating: 5 out of 5 stars5/5Learning Adobe Muse Rating: 4 out of 5 stars4/5Computers and Typography 2 Rating: 0 out of 5 stars0 ratingsGlossary of Typesetting Terms Rating: 5 out of 5 stars5/5Classic Typefaces: American Type and Type Designers Rating: 4 out of 5 stars4/5Design Mastery: Principles of Page Layout and Typography for Beginners Rating: 0 out of 5 stars0 ratingsA Few Minutes of Design: 52 Activities to Spark Your Creativity Rating: 0 out of 5 stars0 ratingsSelling Graphic and Web Design Rating: 0 out of 5 stars0 ratingsStarting Your Career as a Graphic Designer Rating: 3 out of 5 stars3/5Inside Paragraphs: Typographic Fundamentals Rating: 0 out of 5 stars0 ratingsTypography for the People: Hand-Painted Signs from Around the World Plus 15 Free Fonts Rating: 3 out of 5 stars3/5Outline Alphabets: 100 Complete Fonts Rating: 5 out of 5 stars5/5In Progress: See Inside a Lettering Artist's Sketchbook and Process, from Pencil to Vector Rating: 5 out of 5 stars5/5The Designer's Web Handbook: What You Need to Know to Create for the Web Rating: 0 out of 5 stars0 ratingsCulture+Typography: How Culture Affects Typography Rating: 0 out of 5 stars0 ratingsVisual Grammar: Design Foundations for Editors Rating: 0 out of 5 stars0 ratingsDesigners Don't Have Influences Rating: 0 out of 5 stars0 ratingsCareers by Design: A Business Guide for Graphic Designers Rating: 3 out of 5 stars3/5Above the Fold: Understanding the Principles of Successful Web Site Design Rating: 0 out of 5 stars0 ratingsEditing by Design: The Classic Guide to Word-and-Picture Communication for Art Directors, Editors, Designers, and Students Rating: 0 out of 5 stars0 ratingsThe New Typography Rating: 4 out of 5 stars4/5Design Literacy: Understanding Graphic Design Rating: 4 out of 5 stars4/5The Web Designer's Idea Book Volume 2: More of the Best Themes, Trends and Styles in Website Design Rating: 0 out of 5 stars0 ratingsThe Graphic Designer's Guide to Better Business Writing Rating: 0 out of 5 stars0 ratings
Internet & Web For You
Cybersecurity For Dummies Rating: 4 out of 5 stars4/5More Porn - Faster!: 50 Tips & Tools for Faster and More Efficient Porn Browsing Rating: 3 out of 5 stars3/5Coding For Dummies Rating: 5 out of 5 stars5/5The Mega Box: The Ultimate Guide to the Best Free Resources on the Internet Rating: 4 out of 5 stars4/5The $1,000,000 Web Designer Guide: A Practical Guide for Wealth and Freedom as an Online Freelancer Rating: 5 out of 5 stars5/5Coding All-in-One For Dummies Rating: 4 out of 5 stars4/5Grokking Algorithms: An illustrated guide for programmers and other curious people Rating: 4 out of 5 stars4/5Beginner's Guide To Starting An Etsy Print-On-Demand Shop Rating: 0 out of 5 stars0 ratings200+ Ways to Protect Your Privacy: Simple Ways to Prevent Hacks and Protect Your Privacy--On and Offline Rating: 0 out of 5 stars0 ratingsThe Logo Brainstorm Book: A Comprehensive Guide for Exploring Design Directions Rating: 4 out of 5 stars4/5Hacking : The Ultimate Comprehensive Step-By-Step Guide to the Basics of Ethical Hacking Rating: 5 out of 5 stars5/5How To Start A Podcast Rating: 4 out of 5 stars4/5The Digital Marketing Handbook: A Step-By-Step Guide to Creating Websites That Sell Rating: 5 out of 5 stars5/5Learn JavaScript in 24 Hours Rating: 3 out of 5 stars3/5The Designer's Web Handbook: What You Need to Know to Create for the Web Rating: 0 out of 5 stars0 ratingsRemote/WebCam Notarization : Basic Understanding Rating: 3 out of 5 stars3/5Social Engineering: The Science of Human Hacking Rating: 3 out of 5 stars3/5Six Figure Blogging Blueprint Rating: 5 out of 5 stars5/5The Beginner's Affiliate Marketing Blueprint Rating: 4 out of 5 stars4/5How to Disappear and Live Off the Grid: A CIA Insider's Guide Rating: 0 out of 5 stars0 ratingsThe Internet Is Not What You Think It Is: A History, a Philosophy, a Warning Rating: 4 out of 5 stars4/5Wireless Hacking 101 Rating: 4 out of 5 stars4/5Everybody Lies: Big Data, New Data, and What the Internet Can Tell Us About Who We Really Are Rating: 4 out of 5 stars4/5How To Start A Profitable Authority Blog In Under One Hour Rating: 5 out of 5 stars5/5How To Make Money Blogging: How I Replaced My Day-Job With My Blog and How You Can Start A Blog Today Rating: 4 out of 5 stars4/5
Reviews for A Pocket Guide to Creating Symbol Fonts
0 ratings0 reviews
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