Google is throwing its own hat into the web fonts ring with the Google Font Directory and the Google Font API. While it appears it doesn’t have any partnerships with the big names in typography like TypeKit does, just a handful of open fonts, it does have a partnership with TypeKit itself (as you’ll see below).
How the Google Font API works
Once you pick a font, you can embed it on a webpage by grabbing code that looks like this:
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light' rel='stylesheet' type='text/css'>
And use it in your stylesheet like this:
h1 { font-family: 'Josefin Sans Std Light', arial, serif; }
You can also use other fonts using the WebFont Loader, which is a JavaScript library developed by Google and TypeKit.
Bane or Boon?
Although I won’t be ditching Font Squirrel anytime soon, one great thing about this new development is that the fonts are hosted on the most reliable servers in the world, just like the different JavaScript libraries are. The even greater thing is that this is Google, one of the strongest forces on the Web, is placing a stake another aspect of web standards.
Of course those things are scary at the same time. Google can just pick any endeavor under the sun, spend resources on it, and possibly dominate, if not dictate the market in no time. It may not get the purist designer types on board, since Google doesn’t exactly have the best reputation for great design, and its presentation has a bit of a developer slant, but it knows its web design technologies well. And in the case of web standards, where new practices are being adopted and old browsers are being discarded at a snail’s pace, Google’s massive resources and influence can only do well to speed things up.
The three-dimensional, folded look hailing from the fascinating art of origami has been circling my design radar for a while now now. Let shop around for a bit of inspiration and see how you can inject it in your own work.
A really short history of Origami
Origami is a Japanese word that literally means “folded paper”. While the term itself showed up only as recently as 1926, it’s been around much longer, as the use of cut and folded paper was first used in religious rituals. It was during the Heian period, when paper became a more abundant commodity, that origami branched out into a form of entertainment. There is documented proof that paper folding developed independently in Europe as well.
Get the look
The easiest way to go origami is to use imagery that actually follow how folded creatures and objects look like. In this case, the website Tori’s Eye uses birds. It takes a step further and gives different textures to the background to match the playful, crafty feel. Top it off with some JavaScript animation and you’ve got yourself a stunning origami-inspired website.
This one is a less literal interpretation of the origami look. The idea is to use a lot more diagonal lines instead of just perpendicular and parallel ones. The shapes behind the main content area seem to be mimicking sheets of paper stacked together, but keep it abstracted with transparency effects. This happens again in the background.
Ian Soper’s site looks it has a long sheet of paper with many folds standing upright. Spreads for iPad does the same thing, but vertically.
Fonts
Choose more angular, abstract typefaces for a nice origami effect in text. There are a ton of origami-inspired alphabets out there, so I’ll just list fonts you can actually use:
Origami font by Formfound (Peter Fritzsche) (free for personal use)
Cube font by Fontfabric
Cube 02 font by Fontfabric
Quad font by Fontfabric
Facet font by Fontfabric
You can also use dingbats and other similar accents:
Origami Bats dingbat font by Lauren Ashpole (free for personal use)
Logos
Color and shade are playing a bigger part in current logo trends so it’s no surprise that illusions of three-dimensional effects, including folded shapes, are popular right now. The logo for Simpla CMS is one such example.
These logo concepts by TKhoury actually use the folded effect to convey more meaning.
Some closely related techniques to be inspired by: cubism, facets, hexahedrons, ribbons, quilts, mosaics, optical illusions.
Icons
This social media icon set by Paddy Donnelly is a breath of fresh air from all the other ones out there. Adding these to websites short of mandatory lately and if you’re adventurous enough, why not go for this almost abstract look? Or make your own—it’s a great exercise for deconstructing recognizable logos.
Buttons
I know that rounded corners, especially with “the new (CSS3) hotness”, are not only trendy but have also been psychologically proven to appear more friendly and thereby more clickable, but you can still apply the basic idea of making sure a button looks like a button while retaining a more geometric, less marshmallowy feel: use gradients, bevels, and shadows.
You could even go the opposite route and apply the sharper edges on buttons you don’t want users to click, which Jeff Atwood calls The Opposite of Fitts’ Law:
Uncommon or dangerous UI items should be difficult to click on!
The spiky button is an exaggerated example, but the idea is sound: apply the less welcoming look of hard edges on the buttons you don’t want users to click on.
Backgrounds
It’s the easiest and most recognizable way to incorporate a certain look in a design, and you can pick from a variety of options: patterns, textures, or photographs.
Mediasoldier uses a folded paper pattern in the header background that really captures that origami feel but also matches the grungy and grid-loving look of the site. It also mixes with two other backgrounds: the striking cracking concrete wall, and the subdued diamond fence.
Other Design Touches
Will graphics be prominent in your design? Give them a 3D twist. The illustration on Cogaoke is an excellent style. Bonus points for imitating Japanese character styles in the text “happy”.
Dog ears and page curls can be elegant additional touches instead of distracting and annoying. And although Cleverclick’s design isn’t so obviously origami-like anymore, the still exudes its minimalist, organic sensibilities.
Fold away
Origami is a great design concept to build upon. Experiment with shapes, shadings, and space to come up with an edgy look—literally.
What does it mean for Dell to choose Exljbris’ Museo and Museo Sans as its new corporate fonts? Maybe not much for some people, but as one who has enjoyed using the almost (some characters were modified for the company) the same fonts as freely as can be (some weights are paid), I feel like I’m sharing in Jos Buivenga’s triumph too.
A triumph for the little guy. A triumph for freedom, sharing, open standards. A triumph for hard work and talent that deserves to be recognized in the best possible way.
Museo and the other Exljbris fonts are also as ubiquitous as the Microsoft and Apple system fonts, at least on the Web, because they’re good and free. They’re like the new generation of default fonts to play with, since they’re the most accessible. Same case with The League of Movable Type.
Coming Together is a font consisting entirely of different ampersands designed created by 400 artists and designers to help the Haiti earthquake victims. It’s available for $20 from leading font distributors and all proceeds go to Doctors Without Borders.
The “Coming Together” font contains over 400 glyphs and is supplied as a single, cross-platform OpenType font. All glyphs are accessible using OpenType-savvy applications, Unicode-savvy utilities, the Character Map utility on Windows, and FontBook on Mac OS X.
This is the fourth Font Aid initiative by the Society of Typographic Aficionados, the first one in 1999.
While it’s a bit late to write about this, it’s never too late to help Haiti out. What is unfortunate, however, is that another major earthquake has struck, this time in Chile. Tsunami warnings have been hoisted across the Pacific as well. I hope the Type Society and other groups extend their help for this particular disaster too.
I’ll get straight to my answer: very.
More specifically, I’m quite excited about what this league is doing for a branch of typography which seems almost mythical. We know about paid fonts and free fonts, but what’s buzzing big right now is the use of fonts on the web with the emergence of @font-face embedding, webfonts, and services like TypeKit. But what about usage and modification of fonts in general?
The open source debate is always tricky when creative works are in question, but the case shouldn’t be different for typefaces. The League is going beyond that debate, but still has some tough questions to be answered:
Is open source typography important enough to fight for? Are we all brave enough to do something to change the status quo? Is the status quo okay, do we really need to change anything at all?
What is the status quo? If this 3-year old post is any indication, it looks like a sleepy town that needs some jazzing up. The Open Font Library is more closely linked to the open source software community than with the open source design community, but they mentioned Lettercase being a Github-like tool, so it looks like they’re taking steps towards that already.
Should we fight for open source typography and change the status quo? It could potentially compete alongside the hosted font embedding services and create a fine alternative for web designers using custom web fonts. Options are good.
Sound off with your thoughts there!
Meet Laika, a dynamic font that throws out typographical conventions out the window. Serif, sans serif, bold, italic, old style, or new—Laika can be anything you want it to be. Check out the video below or play with it yourself!
There is such a rigid and finite nature to typography that it is staggering to imagine what the implications of a “dynamic font” would be. Is this how future fonts will be made and how they will behave?
You can never run out of things to talk about when it comes to cascading style sheets or CSS, but lately there have been developments that are more than worth your while. CSS3 is slowly but surely becoming mainstream thanks to several browser updates, while the gurus continue to think up smart ways to code those stylesheets.
Update: Ajaxian blogs that WebKit will support CSS variables. Amazing news that has come out just in time with this blog post. I’ve listed it below as well.
Tools and Frameworks
I’m not going to mention every imaginable CSS framework and piece of software out there, but these are worth looking at.
Stylizer: Skybound Software comes out with perhaps one of the most interesting (read: intuitive) CSS editors to date. It helps that it has a free version with a 14-day trial for its Ultimate counterpart.
YAML: Smashing Magazine shows how it is possible to create a flexible layout using Dirk Jesse’s HTML/CSS framework called YAML. The YAML Builder is an excellent plus.
CSS Cacheer: Shaun Inman releases a mini-application for CSS caching.
Best Practices
Here are some great nuggets of advice that will help guide you when writing your own CSS.
Font Stacks: The Unit Interactive blog lists various scenarios in which you should order your CSS font stacks. A PDF file is available for download, too.
Fun With Floating in the Grid: Devlounge recommends several practical CSS classes and layout techniques to achieve hassle-free floats and grids.
Performance Testing: jpsykes reports how the different browsers fare using different CSS selectors and attributes.
Faux Absolute Positioning: A List Apart comes up with a new layout technique that does away with hacks.
Nesting Specifics: DZone goes into the nuances of CSS selector specificity.
CSS3 and Beyond
If you’re still hesitant to use CSS3, you might change your mind now that some of the most popular browsers are slowly incorporating support for it.
Firefox 3: Killian Valkhof and David Baron write about support for several CSS3 features in the latest version of Mozilla Firefox. These include ligatures, kerning, font-size-adjust, inline-block/inline-table, and even text-shadow—coming in Firefox 3.1. The complete list is on Mozilla’s official page.
Opera 9.5: The Opera Developer Community discusses the CSS3 features its own browser supports, namely, @media, text-shadow, opacity, HSL values, overflow-x/overflow-y, :firstof-type, :nthchild, -o-background-size. Not to mention HTML 5 elements and SVG. Don’t forget to check out Opera’s debugging tool, Dragonfly.
Safari 3 has been out for a while now, but it’s Internet Explorer that we’re really waiting for. Unfortunately, IE8 will continue to lag behind.
Qualified Selectors: Shaun Inman proposes a different breed of CSS selectors.
CSS Variables: David Hyatt announces that WebKit now supports CSS variables as documented here.
A great product sells itself. In the case of FontStruct, which is a Flash-based tool for font design, its creators took no chances and went all out to promote it in the latest issue of their email newsletter: one full page showing what you can do with FontStruct.
Beautiful fonts created with FontStruct are put on display using powerful praises.
(The image above emphasizes only one testimonial. It would be too long if I put everything on the right side in full size.)
This is how you sell your product. You show it in action. And because we’re talking about typography here, nothing goes with beautiful type better than beautiful words. It also happens to be the smartest way to spice up testimonials, or similarly short pieces of text.
As long as you build a good product, you won’t have to worry about either the by-products or marketing copy. I mentioned “by-products” because aside from being a web-based tool, FontStruct is also a user-generated website. I know user-generated sites suffer from high noise-to-signal ratios and people are starting to doubt the “wisdom of the crowds”. But in creative environments like FontStruct, you tend to attract talented producers and enthusiastic consumers. Especially when coupled with a tool that works well.
If you’re looking for cool new fonts to play with, try FontStruct. You’re in for a pleasant surprise.
*/
