Skip to content
  • Digital Marketing
    • Content Marketing
    • Copywriting
    • Email Marketing
    • SEO – Search Engine Optimization
    • eCommerce
    • Web Design
    • Web Development
  • Demand Generation
  • About
Menu
  • Digital Marketing
    • Content Marketing
    • Copywriting
    • Email Marketing
    • SEO – Search Engine Optimization
    • eCommerce
    • Web Design
    • Web Development
  • Demand Generation
  • About
Contact
Web Design and Web Development | MagicLamp
  • Digital Marketing
    • SEO – Search Engine Optimization
    • Content Marketing
    • Copywriting
    • Email Marketing
    • eCommerce
      • eCommerce Web Design
      • eCommerce Web Development
      • Benefits of a Professional eCommerce Web Developer
    • Web Design
      • Mobile & Tablet Web Design
      • Web Design for eCommerce
      • Web Design for Lead Conversion
    • Web Development
      • Web Development for eCommerce
      • WooCommerce and WordPress
      • WooCommerce Web Development and Customization
      • WordPress Experts
  • Demand Generation
  • About
    • Webmail
    • Portfolio
    • Blog
    • Web Development Staff
    • Web & Internet Infrastructure
    • Call Us @ 877 923 4678
  • Contact

Graphic Possibilities With Open Source Web Fonts.

Firefox and Chrome's font display updates make it possible to create a typography-driven website like this one look good on any PC.Back in 2010, Google made big news by releasing their own open source web fonts. Starting with just 19 typefaces, it was a huge improvement for developers and designers who’d been stuck with the same 9-10 web safe typefaces for their font stacks. By 2012, Google Web Fonts (since renamed Google Fonts) had grown to over 500 font families. Adobe typekit became popular around the same time, offering even more web type options. Web creators were no longer limited to a handful of body text fonts, and we all basked in the happy glow of digital progress. Unfortunately, there was a hitch. Most web designers work on Macs, known for their pristine graphic rendering. While the new fonts were looking great on designers’ Mac screens, the letters appeared very differently on the average user’s PC: they were highly pixilated, blurry at the edges, and “crunchy-looking.” Once developers realized they should be testing the sites on PCs, they were shocked to see their new typefaces looked, frankly, awful.

The problem wasn’t with the fonts themselves- PC browsers just weren’t advanced enough to display the new typefaces cleanly. Internet Explorer was the first to optimize character rendering; soon, open source fonts looked better in IE than any other browser. This still wasn’t very crisp, but it was better than everything else out there. Firefox quickly followed suit and improved HTML text appearance even further. The rendering you see in Firefox today is the standard that set the bar for text rendering over the last few years. Chrome’s text looked jagged and pixilated in comparison until just this August, when Google’s Chrome 37 update raised the ante again. The update came with DirectWrite support for Windows, which transformed HTML characters into something crisper and cleaner than PC users had ever seen before.


Same Fonts, Different Browsers: Firefox and Chrome’s text rendering.

(Firefox: Left, Chrome: Right)

Looking at these Chrome and Firefox text displays side-by-side, you can see how Chrome text is distinctly crisper and more resolved, looking a lot like the rendering on a Macintosh, in fact. Chrome’s new super high-resolution type display is a a huge leap for browser technology. Suddenly, all fonts look incredible, no matter who’s supplying them.

We offer the complete inventories of Google Fonts, Adobe Typekit, and Fonts.com for our clients’ web projects. The foundry previews are real HTML, not bitmaps, and they show you exactly how your fonts will look. The right type sends a cohesive message about your company to customers, telling them exactly what “personality” your business has. We alsoCreative typography can communicate an individual style and leave visitors with a memorable impression. offer expert font selection advice if you’re having trouble deciding or want a second opinion. Between these resources, you get an incredibly broad typeface selection- a tool that gives you a fresher-looking site that stands out from the rest.

Graphics and Iconography with Open Source Glyphs

The evolution of typeface display technology actually gives us a powerful opportunity for rendering graphic elements, too. Recently, we’ve actually started replacing traditional graphic elements with HTML glyphs, using characters from font sets as symbols, graphics, or even images. You see glyphs like the TM and copyright symbols implemented this way traditionally, but the level of clarity in web text display now opens up a whole new world of possibilities.

Advantages of HTML Typeface Characters as Graphics:

  • Web font characters come ready to go as live, linkable text.
  • Faster loading than traditional JPG images.
  • Completely resizable as pixel-perfect vector entities.
  • They don’t require any special coding structures, like image files.
  • HTML glyphs are searchable by engines for SEM keyword optimization and visitor queries.
  • Many font packages are specifically designed to use as icons or ornamental elements, targeted to specific graphic styles, like the Adorn typefaces.
  • Now that browser technology has caught up, font-based graphics look just as sharp as any traditional graphic.
  • They cut design time and costs down significantly.

We can also create HTML iconography through typeface packages now. Whether you’re developing a web app, branding a new product line, or want some simple icons for your homepage navigation, we can offer you a whole new playground to experiment with.

These techniques not only open up possibilities for designers and creatives, they also empower developers, who can now use typography instead of graphics to stylize web apps, create brand identities, and unroll fresher-looking sites. Having access to all of these symbols opens up a whole new field programmatically. Instead of designing a graphic, resizing it to optimize loading times, coding it for html, and uploading it, programmers can literally just hit one key, paste in a character that’s already an html entity, and keep on trucking.

We've come a long way since wingdings! (Circa 1990)
We’ve come a long way since Wingdings!

Interested in updating your site’s typefaces? Want to see what we can do for your icons and graphic elements? We would be happy to give you a free consultation.
Contact us today.

Tags
Adaptive Design (1) Awards (1) CRM (1) Cross-indexed merchandising (1) Custom CMS (1) Customer Expectations (1) Customer Service (1) Custom Theme (2) Digital Marketing (7) Faceted Classification (3) Graphics (3) HTML (1) IIS (1) Internet Explorer (1) Locator Integration (1) Magic Shopping Cart (1) Merchandising (1) Minimalist Design (3) Mobile Optimization (3) Online Credibility (1) PayPal (1) Programming (1) Responsive Design (3) Security (2) SEO (4) Social Media Integration (1) Spam (1) Tags (1) Usability (4) Visitor Conversion (6) Visual Appeal (3) Web Development (10) Web Fonts (1) WooCommerce (1)
Articles and Reviews
  • Science Fiction or Science Future? Web Design Meets Mobile Tech
  • The Future is Mobile: Which Kind of Responsive is Right for You?
  • Graphic Possibilities With Open Source Web Fonts.
  • Faceted Classification Part 3: The Power to Merchandise
  • Faceted Classification Part 2: Doing It Right
Ready to talk to us?

We are an account based marketing agency.

Twitter Facebook-f Linkedin

Digital Marketing

  • Demand Generation
  • Search Engine Optimization
  • Content Marketing
  • Copywriting & Messaging
  • Email Marketing

Websites

  • Web Design
  • Web Development
  • eCommerce
  • Mobile Design
  • Woocommerce

About

  • Portfolio
  • Staff
  • Blog
  • Infrastructure
  • Contact

©2022 MagicLamp Inc. -- All rights reserved

Made with ❤ by Elementor

Posting....
Scroll back to top
We use information collected through cookies and similar technologies to improve your experience on our site, analyse how you use it and for marketing purposes.
Privacy Policy

Your privacy settings

We and our partners use information collected through cookies and similar technologies to improve your experience on our site, analyse how you use it and for marketing purposes. Because we respect your right to privacy, you can choose not to allow some types of cookies. However, blocking some types of cookies may impact your experience of the site and the services we are able to offer. In some cases, data obtained from cookies is shared with third parties for analytics or marketing reasons. You can exercise your right to opt-out of that sharing at any time by disabling cookies.
Privacy Policy
Allow all

Manage Consent Preferences

Necessary
Always ON
These cookies and scripts are necessary for the website to function and cannot be switched off. Theyare usually only set in response to actions made by you which amount to a request for services, suchas setting your privacy preferences, logging in or filling in forms. You can set your browser to block oralert you about these cookies, but some parts of the site will not then work. These cookies do notstore any personally identifiable information.
Analytics
These cookies and scripts allow us to count visits and traffic sources, so we can measure and improve the performance of our site. They help us know which pages are the most and least popular and see how visitors move around the site. All information these cookies collect is aggregated and therefore anonymous. If you do not allow these cookies and scripts, we will not know when you have visited our site.
Embedded Videos
These cookies and scripts may be set through our site by external video hosting services likeYouTube or Vimeo. They may be used to deliver video content on our website. It’s possible for the video provider to build a profile of your interests and show you relevant adverts on this or other websites. They do not store directly personal information, but are based on uniquely identifying your browser and internet device. If you do not allow these cookies or scripts it is possible that embedded video will not function as expected.
Marketing
These cookies and scripts may be set through our site by our advertising partners. They may be used by those companies to build a profile of your interests and show you relevant adverts on other sites. They do not store directly personal information, but are based on uniquely identifying your browser and internet device. If you do not allow these cookies and scripts, you will experience less targeted advertising.
Confirm my choices Allow all
Verified by ConsentMagic