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 ratingsWriting for Designers 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 ratingsThe Principles of Beautiful Web Design Rating: 4 out of 5 stars4/5Webfont Handbook Rating: 4 out of 5 stars4/5Computers and Typography 2 Rating: 0 out of 5 stars0 ratingsDesign Mastery: Principles of Page Layout and Typography for Beginners Rating: 0 out of 5 stars0 ratingsBeginner’s Guide to Adobe InDesign Rating: 0 out of 5 stars0 ratingsClassic Typefaces: American Type and Type Designers Rating: 4 out of 5 stars4/5Inside Paragraphs: Typographic Fundamentals Rating: 5 out of 5 stars5/5Selling Graphic and Web Design Rating: 0 out of 5 stars0 ratingsGlossary of Typesetting Terms 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/5How to Choose, Brief and Work with Graphic Designers Rating: 0 out of 5 stars0 ratingsCulture+Typography: How Culture Affects Typography Rating: 0 out of 5 stars0 ratingsOutline Alphabets: 100 Complete Fonts Rating: 5 out of 5 stars5/5Starting Your Career as a Graphic Designer Rating: 3 out of 5 stars3/5How to Make Patent Drawings - A Brief Treatise on Patent Drafting for the Use of Students, Draftsmen and Inventors Rating: 0 out of 5 stars0 ratingsAbove the Fold: Understanding the Principles of Successful Web Site Design Rating: 0 out of 5 stars0 ratingsTeach Yourself VISUALLY Web Design Rating: 4 out of 5 stars4/5The Cultural Import of Typography - An Essay: Including an Introductory Chapter by William Skeen Rating: 0 out of 5 stars0 ratingsThe Graphics of Communication: Exploring the Graphic Arts and Design Rating: 5 out of 5 stars5/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 Designer's Web Handbook: What You Need to Know to Create for the Web Rating: 0 out of 5 stars0 ratingsA Typographic Workbook: A Primer to History, Techniques, and Artistry Rating: 0 out of 5 stars0 ratingsUsing Graphics In Books: The Reflowable Edition Rating: 1 out of 5 stars1/5Starting Your Career as a Freelance Illustrator or Graphic Designer: Revised Edition 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 ratingsCareers by Design: A Business Guide for Graphic Designers Rating: 3 out of 5 stars3/5
Internet & Web For You
The Logo Brainstorm Book: A Comprehensive Guide for Exploring Design Directions Rating: 4 out of 5 stars4/5Coding For Dummies Rating: 5 out of 5 stars5/5Coding All-in-One For Dummies Rating: 4 out of 5 stars4/5SEO For Dummies 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/5The Mega Box: The Ultimate Guide to the Best Free Resources on the Internet Rating: 4 out of 5 stars4/5Wireless Hacking 101 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/5Grokking Algorithms: An illustrated guide for programmers and other curious people Rating: 4 out of 5 stars4/5Cybersecurity For Dummies Rating: 4 out of 5 stars4/5Wordpress for Beginners: The Easy Step-by-Step Guide to Creating a Website with WordPress Rating: 5 out of 5 stars5/5The Beginner's Affiliate Marketing Blueprint Rating: 4 out of 5 stars4/5Six Figure Blogging In 3 Months 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 ratingsHacking : The Ultimate Comprehensive Step-By-Step Guide to the Basics of Ethical Hacking Rating: 5 out of 5 stars5/5Python QuickStart Guide: The Simplified Beginner's Guide to Python Programming Using Hands-On Projects and Real-World Applications Rating: 0 out of 5 stars0 ratingsRemote/WebCam Notarization <<Extended>> Commonwealth of Virginia Rating: 0 out of 5 stars0 ratingsCreate Something Awesome: How Creators are Profiting from Their Passion in the Creator Economy Rating: 0 out of 5 stars0 ratingsPodcasting For Dummies Rating: 4 out of 5 stars4/5How To Start A Profitable Authority Blog In Under One Hour Rating: 5 out of 5 stars5/5Get Rich or Lie Trying: Ambition and Deceit in the New Influencer Economy Rating: 0 out of 5 stars0 ratingsHow 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/5Six Figure Blogging Blueprint Rating: 5 out of 5 stars5/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