Tag Archives: Typography

Google’s look, evolved

The “G” has a new style! Today Google announced a simplified logo that emphasizes its four major colors. The new logo is already in place on Google Drive and Google Search.


Today we’re introducing a new logo and identity family that reflects this reality and shows you when the Google magic is working for you, even on the tiniest screens. As you’ll see, we’ve taken the Google logo and branding, which were originally built for a single desktop browser page, and updated them for a world of seamless computing across an endless number of devices and different kinds of inputs (such as tap, type and talk).

It doesn’t simply tell you that you’re using Google, but also shows you how Google is working for you. For example, new elements like a colorful Google mic help you identify and interact with Google whether you’re talking, tapping or typing. Meanwhile, we’re bidding adieu to the little blue “g” icon and replacing it with a four-color “G” that matches the logo.

Read more from the source: Official Google Blog

Google releases Material Design icons on Google Fonts

Google creates icons that use ligatures instead of CSS classes


Material design system icons are simple, modern, friendly, and sometimes quirky. Each icon is created using our design guidelines to depict in simple and minimal forms the universal concepts used commonly throughout a UI. Ensuring readability and clarity at both large and small sizes, these icons have been optimized for beautiful display on all common platforms and display resolutions.

Instead of the syntax popularized by Bootstrap:
<i class=”icon icon-thing”></i>

Google Material Design icons use ligatures:
<i class=”material-icons”>thing</i>

It’s a boon to screen readers.

Read more at google.github.io

FF Chartwell – taking ligatures to a whole new level

Create bar charts and pie charts by only typing numbers: these chart fonts make ligatures look like magic


FF Chartwell is a set of three fonts* that together create a remarkable set of tools for creating bar, line, and pie charts. It uses OpenType ligatures to perform its magic – a series of numbers can be transformed into clean, perfectly rendered graphs, as you type.

Read more at Typographica

Why You Should Consider A Ligature Icon Font For Your Next Project

Taking advantage of ligatures allows you to create an icon font where the text “Cart” renders a shopping cart


From the article by Dudley Storey

However, there are three fundamental disadvantages to icon fonts, two of which are also shared by image sprites:

1. Most icon fonts are not accessible: typing “L” to produce a Like button means that visitors who use a text-to-speech service to read your site will only hear “L” as a description of the icon. While there are solutions to this issue, they use CSS tricks that are, in this author’s humble opinion, somewhat convoluted and better left behind.

2. Search engines are confronted with the same issue, as they read text, not icons, and “L” makes little sense to Google.

3. Looking up codes for icons and typing in HTML entities to produce them is a pain: as an example, see the character map for Entypo.

Ligature icon fonts eliminate both of these issues. As I’ve explained previously, ligatures are joined or merged letter forms that are generated to produce smoother type with better spacing: a single glyph to replace the otherwise ungainly “fi” letter pairing, for example.

Read more from the source: demosthenes.info