background preloader

Best 20 webfonts from Google Web Fonts and @font-face embedding

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. Basically, there are two implementation models: 1. 2. Web font embedding services Google Web Fonts (GWF) or Typekit are systems which allow the use of fonts hosted on their servers. Implementation It really is quick and simple: 1. 2. 3. Here you can consult a extended manual for styles, script subsets, and using multiple fonts. Top recommended fonts from Google Web Fonts You will find many unfavorable reviews about the quality of GWF’s fonts and the amateur nature of many typefaces. Open Sans Josefin Slab Arvo Lato Vollkorn Abril Fatface Ubuntu PT Sans + PT Serif Old Standard TT Droid Sans

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.

Jules Vernacular Nice Web Type The Creative Way To Maximize Design Ideas With Type Advertisement As with most designers, being sure that we explore and select the most successful, memorable and stimulating designs is a vital aspect that underpins every project we undertake. For us, the beginning of a new challenge has never been as simple as asking ourselves what might be the best avenue to take and then sitting down at a computer and attempting to fulfill that idea. After researching the subject matter, we will almost always begin with a sheet of paper and pencil and draw out a variety of design options to help bring together and develop the breadth of ideas that are maturing in our minds. An example of mark-making that helps to formulate design ideas for working with type and image. Why Textural And Tonal Qualities Of Type Should Be Addressed In Drawing Working with art direction from Liudas Parulskis and Vilmas Narecionis, Jacek Utko has designed some captivating pages for the weekend section of Lithuanias Verslo Zinios. Finding The Right Marking Tools And Paper (al)

iOS Fonts Free fonts - Multicolore Fontfabric type foundry presents Multicolore Free Fonts – unique colored rounded free fonts! With Multicolore font you can easily create short texts for headlines, posters or whatever. Or simply stack few characters to create some random art! Available in .otf font format (black & white ver.) / .eps and .ai vector formats (colored ver.) Designed by Ivan Filipov, Bulgaria | Portfolio link To open this file you need at Adobe Illustrator CS3 or better. Open the Layers Pallette and make Dotted and Inline layers visible for additional effects .OTF file also available! Downloadfree fonts This post is tagged free fonts, multicolore, multicolore fonts

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. Coding Q&A With Chris Coyier: Code Smell and Type on a Grid Advertisement Howdy, folks! Welcome to the new incarnation of Smashing Magazine’s Q&A. It’s going to work like this: you send in questions you have about CSS, and at least once a month we’ll pick out the best questions and answer them so that everyone can benefit from the exchange. Your question could be about a very specific problem you’re having, or it could be a question about a philosophical approach. We’ve done a bit of this kind of exchange before with a wider scope, so if you enjoy reading the Q&A, check out my author archive for more of them. Designing For Email Andrejs Abrickis asks: “Sometimes I face trouble with HTML email design and the proper CSS code. First and foremost, I recommend keeping emails very simple. If you are certain you need to make an HTML email, I’d again err on the side of simplicity. But you wanted to know about cross-client compatibility and testing. The two simple rules of thumb for HTML email development are: Use tables for layout. Type On A Grid “1. 1. 2.

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

Custom Typeface Design by MacFadden & Thorpe A selection of custom designed typefaces for different projects by MacFadden & Thorpe, a San Francisco-based graphic design studio. Dreams Shadow Type Teignmouth Sans Custom Type Reclaim Stencil Custom Type Mission Arts Type Half Poster Block Type Custon Typeface Bellwether Gothic Custom Hawk Typeface based on a classic 80s Tony Hawk Deck Custom Graduation Party Type

Adobe® Edge Web Fonts Designing For Device Orientation: From Portrait To Landscape Advertisement The accelerometer embedded in our smart devices is typically used to align the screen depending on the orientation of the device, i.e. when switching between portrait and landscape modes. This capability provides great opportunities to create better user experiences because it offers an additional layout with a simple turn of a device, and without pressing any buttons. However, designing for device orientation brings various challenges and requires careful thinking. The experience must be as unobtrusive and transparent as possible, and we must understand the context of use for this functionality. Nearly all mobile and tablet applications would benefit from being designed for device orientation. Using Device Orientation For A Secondary Display YouTube’s mobile application is a great example of device orientation design. However, using orientation to display a secondary interface can be confusing for users. YouTube’s mobile interface in portrait and landscape modes. Fluid

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

Related: