Beautiful web type — the best typefaces from the Google web fonts directory Lucius Annaeus Seneca60 AD Among the numerous faults of those who pass their lives recklessly and without due reflexion, my good friend Liberalis, I should say that there is hardly any one so hurtful to society as this, that we neither know how to bestow or how to receive a benefit. It follows from this that benefits are badly invested, and become bad debts: in these cases it is too late to complain of their not being returned, for they were thrown away when we bestowed them. Nor need we wonder that while the greatest vices are common, none is more common than ingratitude: for this I see is brought about by various causes. The first of these is, that we do not choose worthy persons upon whom to bestow our bounty, but although when we are about to lend money we first make a careful enquiry into the means and habits of life of our debtor, and avoid sowing seed in a worn-out or unfruitful soil, yet without any discrimination we scatter our benefits at random rather than bestow them.
FFFFALLBACK - A simple tool for bulletproof web typography. 25 Hand Picked Sans-Serif Google Fonts When creating new website designs I always reach the point where I need an extensive font collection to enable me to experiment with different headline and body combinations. When coding the design into the browser I often use Google Fonts, this gives me a vast array of fonts to choose from, all of which are also free to use and download! Take a look and download some of my recently used sans-serif fonts which are compatible with Google Fonts and let me know some of your favorites. Yanone Kaffeesatz Droid Sans Josefin Sans Open Sans Abel Poiret One Quattrocento Sans Dosis Ruluko Muli Quicksand Gudea Advent Pro Chivo News Cycle PT Sans Narrow Economica Antic Marvel Puritan
OpenType OpenType® is a modern font format developed by Adobe® and Microsoft® to provide users with an accessible and advanced typographic toolset. OpenType improves on PostScript and TrueType just as the DVD trumped the video cassette. When deciding what format to choose, using the latest technology simply makes sense, but let’s dig a bit deeper and explore the ways OpenType makes life easier for typographers and graphic designers. OpenType is Efficient One Style = One File The PostScript format is limited to 256 characters per file. Based on Unicode, an OpenType file can contain up to 65,535 characters or glyphs. As a concrete example of the efficiency of the OpenType format, compare the multilingual PostScript version of FF Meta 1, a package of four type styles, with its OpenType successor. Narrow this example down to a single style (FF Meta Book), and we can see that the glyphs and metrics from several PostScript files are all included in one OpenType file. Mac and PC Compatible What’s Inside?
CSS3 @font-face Design Guide Although CSS3 @font-face is supported by most major browsers (IE, Firefox, Chrome, and Safari), but not all. When it doesn't, your custom fonts might break the layout or come out with undesired results. In this article, I will explain the common issues with using custom fonts, picking the matching fallback web safe fonts, and how to create a perfect fallback font style with Modernizr. Common Mistake One common mistake that most people make when implementing custom fonts is not specifying the fallback fonts or picking the wrong fallback fonts. Web Safe Fallback Fonts When using custom fonts, it is important to include the web safe fonts as fallback. Layout Issues Because every font face has its own width, height, weight, kerning (letter-spacing), etc., some fonts are not substitutable with the web safe fonts. This might causes layout issues as shown in the image below where the fallback font extends off the boundary. Modernizr Fallback Font Styles With Modernizr (demo) Including Modernizr
Complete Beginner's Guide to Interaction Design Interaction design has its origins in web and graphic design, but has grown into a realm of its own. Far from merely working with text and pictures, interaction designers are now responsible for creating every element on the screen that a user might swipe, click, tap, or type: in short, the interactions of an experience. Newsletter Sign Up Original UX articles Curated Resources Never miss an issue! This article serves as a good jumping off point for people interested in learning more about Interaction Design. What is Interaction Design? Interaction Design (IxD) defines the structure and behavior of interactive systems. Interaction design began the day the first screen was designed to hold more than static copy. Interaction design has evolved to facilitate interactions between people and their environment. Common Methodologies Although interaction design spans myriad types of web and mobile applications and sites, there are certain methodologies that all designers rely on. Goal-Driven Design
@font-face Solutions & Suggestions In the last post I talked about the design aspect of using CSS3 @font-face, today I would like to extend this topic to the technical side on implementing custom web fonts. So what are the options for implementing web fonts? I'm going to review the three main methods of incorporating @font-face and explain the pros and cons of each method. 1) CSS3 @font-face Standard @font-face First, let's talk about the native way of implementing custom web fonts — @font-face. Bulletproof @font-face Syntax Because every browser supports different font formats (IE supports EOT only, Firefox supports EOT & TTF, and Safari supports OTF, TTF, and SVG), additional font formats are required to be cross-browse. @font-Face Generator If you need to export the fonts in different formats, there is a generator which allows you to generate various font formats from an existing font. Premium @font-Faces Pros & Cons PROS: Full control because the fonts are hosted on your server. 2) Font Service Providers Installing Typekit
Responsive Layouts, Responsively Wireframed Responsive layouts, responsively wireframed Made with HTML/CSS (no images, no JS*) this is a simple interactive experiment with responsive design techniques. Use the buttons top-right to toggle between desktop and mobile layouts. Using simple layout wireframes, this illustrates how a series of pages could work across these different devices, by simulating how the layout of each page would change responsively, to suit the context. Responsive layouts? Producing static wireframes to design layouts for websites, web applications and user-interfaces has worked well for a long time. However, this solution creates a new problem: How should we go about the process of designing these variable layouts? Enter, responsive wireframes? The 'wireframes' on this page (which are only very simple, high-level examples) were created with HTML/CSS, and some argue that this is the answer; to design in the browser. So which is better? Traditional wireframes? HTML? So, what's the answer? Just wondering...
10 Great Google Font Combinations You Can Copy The average man considers which flavor of Doritos will taste good with his Heineken. The sophisticated man considers which cheese will pair well with his choice of wine. The designer of course considers which two fonts will look great on the same page. Today we’re going to use the Google Font API as a playground for mixing fonts and finding ideal pairings. A couple of times each month, we re-publish one of our popular posts from the archives. Why Google Fonts? The web font game was up in the air a few years ago. Here’s why @font-face wins. Now, within the @font-face world there are many competitors. However, I’ve used this solution several times on Design Shack before so I wanted to switch things up today and use something else. Quick Tips for Combining Fonts Before we get started, there are a few basic rules that you can keep in mind when combining fonts. Use Font Families First of all, when possible, check out the various fonts within a single family. Contrast is King Go Easy The Fonts!
10 More Great Google Font Combinations You Can Copy The last time we wrote about Google Web Fonts, it was a fairly new program with a handful of fonts. Today there are nearly 500 font families ready and waiting to be served up to your website completely free of charge. Google has certainly made its mark on web typography and stands as an excellent alternative to premium subscription services. The downside of this growth is that it’s becomingly increasingly difficult to sift through the library to find the best selections. We’ve got your back though and are serving up another great collection of Google Web Font combinations ripe for the stealing. Just copy and paste our code, then tweak the style to fit your needs and you’ll be good to go! Bree Serif & Open Sans The HTML The CSS Bevan and Pontano Sans Abril Fatface & Average Playfair Display and Muli Sansita One & Kameron Istok Web & Lora Pacifico & Arimo Nixie One & Ledger Cantata One & Imprima Rancho & Gudea Conclusion Do you have any great Google Web Font combinations that you’d like to share?
Best Practices of Combining Typefaces Extended Entypo Glyph Set (EPS, PDF, PSD, Typeface, Web Font) Advertisement After endless suplications from the design community Daniel Bruce finally finished his update of the Entypo Glyph Set1 — a free set of universal 284 carefully crafted pictograms for regular design projects. The icons are available as EPS, PDF and Photoshop PSD files as well as desktop typefaces (TrueType, OpenType) and Web fonts. Download The Set For Free! This set contains a large collection of glyphs for all occasions and uses — common pictograms that shouldn’t be missing in anybody’s arsenal. The freebie is licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported license2. Behind The Design As always, here are some insights from the designer: “The first Version was released in February 2012 and had around 120 glyphs. Thanks, Daniel! (jc) It's done.
Best 20 webfonts from Google Web Fonts and @font-face embedding At the moment there are several ways to use non-system fonts on a website. We will focus on the two least complicated, least expensive systems, Google Web Fonts and the @font-face rule. Fear not, we have not ruled out other paid methods such as Typekit, Fonts.com Web Fonts, Fontdeck, Webtype, WebINK or Fontspring for future posts as they certainly offer high quality typefaces and deserve to be considered. It’s important to be aware that web fonts can generate inadequate visualizations on operating systems which have subpixel rendering turned off in the case of Windows XP. They can also be represented differently depending on the browser used to visualize them. The aim of this post is to facilitate the choice of a series of fonts (out of the hundreds available) whose technical and visual characteristics make them more readable and compatible with a wide variety of devices, browsers and operating systems. Basically, there are two implementation models: 1. 2. Web font embedding services 1.