In the real world, responsive design is nothing new. Products adapt to our needs. Technology monitors local environments to adjust lighting, temperature and even physical spaces. But what about web? In designing with words, the desire to bind content to a device has been around as long as there have been books. Mark will take you from desire to implementation, from theory to practice. How can we build upon what we know from literally hundreds of years of responsive design practice to define a new era of online publishing? An era where we strive for the same level of human / technology connection that started with the monks.

FontShop's Best Typefaces of 2011
Another year has whizzed by! While last year saw the real breakthrough for webfonts, this year we witnessed the introduction of mobile fonts and the promise of more diversity and typographic refinement in mobile apps. Yet the news in type was not dominated only by technology. Our beloved type designers cooked up delicious new digital faces for FontShop’s menu of typographic treats.

To celebrate the end of another exciting year in type, our type experts put their heads together to compile our annual “Best Of” list, highlighting the typefaces that surprised, impressed, and delighted us. (And if the “Best Of“ list whets your appetite for fonts, check our Newsletter Archive for more morsels. All this year’s new typefaces are in there.)

Drop caps have been around for years in the print industry, but they are still pretty rare in the web world despite the :first-letter selector having been around for a fair few years. Let’s take a look at how we can create a cool drop cap for our web designs and spice it up with some stylish CSS3 text-shadow effects.

The minimalist style is rampant in the design industry. But just because it has become increasingly popular doesn’t mean that it’s that simple to practice. Anyone can try doing it, but not everyone can achieve it.
One of the most essential elements in a minimalist design is typography. Let’s face it, you can’t do justice to minimalism with pre-installed fonts like Arial, Century Gothic, Georgia, Verdana, Times New Roman, and etc. But frown no more! Here are 30 sleek fonts you can download for free that could fit perfectly on your minimalist designs.
Just remember that each of these fonts will blend differently with different elements. Try out several samples for your design and don’t be afraid to experiment with your font’s sizes, spacing, leading or kerning as well. Enjoy!

Great type design remains hidden in the jungle as it isn’t promoted by a type foundry. Fontseek features these hidden treasures. It links you to the designer’s website by clicking on the specimen, where you will find purchasing information or how to get in touch directly. You can filter the selection by using the category tags. Check out the list of selected  F O U N D R I E S  distributing quality fonts. These I N S T I T U T I O N S offer Typedesign Education. C O N T A C T me.

The present & future of web fonts is looking awfully bright. Quality and Quantity are increasing, though there are still a few fonts I have to pass over when designing for the web. While I don’t know if all of these are in the pipeline to become web fonts, I have to believe that all type foundries are moving in that direction so that their fonts remain useful. It’s important to note that this shouldn’t be read as a “what’s the holdup” post. Creating high quality web fonts is no simple task. The only thing worse than a font you can’t use on the web is one that can be used but renders poorly.

Case in point: I recently replaced Futura served by an unnamed service with the relatively new Futura PT from ParaType served via Typekit. There was a significant improvement in tracking as well as rendering. Here’s a short, non-comprehensive list of fonts I’d love to put on a webpage.

The “Fontspring @Font-Face Syntax”
This is the way the code should have been all along. Clean, clear and simple:

@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot#') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#webfontFqDaNIX6') format('svg');
}
What? I don't get it.
The hack trick that makes this work is the '#' following the EOT filename. Seriously.

How it works
Internet Explorer <9 has a bug in the parser for the src attribute. If you include more than one font format in the src, IE fails to load it and reports a 404 error. The reason is that IE attempts to load as a file everything between the opening parenthesis all the way to the very last closing parenthesis. To deal with that wrong behavior, you merely declare the EOT first and append a single hash mark. The hash fools IE into thinking the rest of the string is a URL fragment and loads just the EOT file. The other browsers follow the spec and select the format they need based on the src cascade and the format hint.

Browser compatibility
I see no reason why any browser would fail with this syntax. Please report your findings though. Once we feel that there are no issues, we'll change the syntax for the Fontspring webfonts.

We've tested on:

Safari 5.03, IE 6-9, Firefox 3.6-4, Chrome 8, iOS 3.2-4.2, Android 2.2-2.3, Opera 11

It all began with a simple web foray to Designing Monsters. Their simple, typographic design was beautiful. But why? Their combination of the beautiful League Gothic font, use of Lettering.JS, and some simple font scaling gave the page a wonderful consistent vertical alignment. Like the Million Dollar Homepage, I wanted to rebuild it — but I didn’t want to spend a lot of time manually adjusting font sizes. So I did what any programmer with the jQuery Golden Hammer would do, I turned my problem into a nail.


At it’s simplest, the BigText jQuery plugin takes a single element and sizes the text inside of its child <div>s to fit the width of the parent element. Gives the text that lovely vertical alignment.

I see this comment as a sign that Apple will not fix this, because to the dismay of typography experts (and mine), most people out there without significant reading impairment cater to justified text for aesthetic reasons only. Those are Apple clients, and Apple will please them before the typography experts.

Is there a way to know what fonts will work together? Building a palette is an intuitive process, but expanding a typographic duet to three, four, or even five voices can be daunting. Here are four tips for navigating the typographic ocean, all built around H&FJ's Highly Scientific First Principle of Combining Fonts: keep one thing consistent, and let one thing vary.

Historien bakom "smarta citattecken", Smart Quotes, i macen.