Tag: web development series
The Future of Web Fonts
by Ranju Chaudhary on May.28, 2010, under Latest Web Technologies, Trends, What's Happening?
This series is supported by Rackspace, the better way to do hosting. Learn more about Rackspace’s hosting solutions here.
Over the last 15 years, web design and development has evolved tremendously. The introduction of CSS, advancements with HTML, the ever-increasing power of JavaScript, and technologies like Flash and Silverlight, have made the visual world of the 2010 web very different from the web from even five or six years ago. Except of course, for typography.
Typography is an important design element that can drastically alter the look and even the feel of content. However, because of technical (and licensing) restrictions, dynamic fonts used on the web have been limited to a small subset of styles. On the positive side, over the last twelve months the landscape for web typography has changed dramatically.
New technologies and services, including Google’s
recently announced Google Font API, are making it possible for designers and developers to finally start experimenting with typography on the web.
Where We’ve Been
The history of typography and the web is long and often frustrating. Web-standards godfather Jeffrey Zeldmanwrote extensively about web fonts and standards last year and provides a good overview of the situation.There have been two main barriers keeping variable font choices from reaching the web:
- Browser support. CSS3 re-introduced the @font-face selector — allowing designers to specifically embed certain fonts into their stylesheets — but browser compatibility with the format of those fonts varies. There are some formats that virtually every web browser except Internet Explorer
supports. Conversely, the one format Internet Explorer supports isn’t supported by any other browser. - The font foundries. The people that create and license fonts, have been reticent to license fonts for use on the web. The big fear is that depending on how fonts are served, users can examine the source code and steal fonts for use offline.
Until last year, these two issues pretty much left designers and font enthusiasts in a bit of a quagmire. Fortunately, things have changed and are continuing to improve.
Where We’re Going
Last May, a service called TypeKit was announced as a way to help foundries become comfortable licensing fonts, while also offering web designers embeddable fonts for their designs in a way that could work across web browsers.
TypeKit opened to the public in November and has since partnered with a growing list of foundries to give Typekit users a wider array of options.
Other web type services exist, like Kernest, Typotheque and Fontdeck (Fontdeck is still in private beta).
Most of these services use JavaScript as a way to get around the fact that not all web browsers support CSS3’s @font-face selector and to also obfuscate the original font file.
Last week, Google announced its Font API and the Google Font Directory of open source fonts that are free for developers to use in their designs.
I spoke with Jeffrey Veen, founder and CEO of Typekit, via e-mail right after Google’s Font API announcement about what Google is doing, Typekit’s role in the process, and the future of type.
At first, I, like many, assumed that the Google Font API was a swipe directly at Typekit. This isn’t the case at all. In fact, Typekit and Google worked together to get Typekit Font Events into the open source projectWebFont Loader, giving designers complete control over how fonts are loaded.
Additionally, Google’s web fonts can be accessed from Typekit, meaning that switching between services is very easy.
This is what Veen had to say about working with Google:
“Working with Google was a great experience, and having them host the library is a great win for fonts on the web. Being able to use fonts on the web is incredibly exciting for designers and developers and has been a long time coming. But, like most new web technologies, the way browsers have implemented it is pretty inconsistent. The WebFont Loader library gives you a consistent want to handle what the browser does while the fonts are being loaded. If you think about how jQuery smoothed out browser inconsistency for JavaScript, that’s what the Web Font Loader does for @font-face.”
When I asked Veen to expand on the biggest hurdles in getting foundries to embrace web licensing, this is what he had to say:
“The type industry has been understandably cautious with putting their fonts on the web. A family of fonts can take years to develop, and having those files sitting on open web servers was a tough step for the foundries to accept. In addition, every foundry had its own set of terms and conditions for how licensed fonts could and couldn’t be used. So much of the innovation at Typekit has been to find a careful balance between the needs of foundries and the excitement of web designers. We did this by building a hosted service that adds some measure of protection to the fonts, and simplifying the licensing. Designers can now pay a yearly subscription and get access to literally thousands of fonts without having to worry about legalities.”
There Are Still Some Hurdles
While Typekit and other web font services are pushing the adoption of web fonts forward as well as getting more and more foundries (and designers and developers) comfortable with using and licensing fonts for the web, the proliferation of more web fonts does lead to some additional hurdles.Last November, Tim Brown and Jason Santa Maria both wrote fantastic articles for A List Apart about web typography.
Santa Maria discussed readability and correctly pairing fonts together. Brown talked about what the emerging web space means for how fonts are designed and the nuances of how different browsers render the same font.
These are important issues to take into consideration when you use fonts in your own designs. Just because you can use a script font to display your primary content doesn’t mean that you should. Save that for headings and accents, keep main content readable and clear.
The world of web typography is quickly evolving but this evolution means that web developers and end users now have more choices than ever before.
5 Fantastic iPhone Apps for Web Developers
by neetika on Mar.20, 2010, under Latest Web Technologies
Contrary to popular belief, web developers do sometimes leave their desks, and when they do, that’s always when clients seem to call or disaster seems to strike.
We’ve highlighted some iPhone apps here that will help you out in those situations, and a few others that will stash several neat tricks up your proverbial sleeve for when you’re away from the office.
Have a look, and if you’re an iPhone-owning web dev, let us know which apps you find useful for your work in the comments below.
1. Code Cheat Sheets

Concentric Sky offers a range of code “cheat sheets” ideal for when your mind just goes blank and you’re away from your usual reference material. Priced at $0.99 each, there are apps available for CSS, mySQL, JavaScript, php, RegEx, jQuery and HTML — the last three of which let you write and test code inside the app. Searchable, and clearly laid out, the info in the apps is available offline, unlike other options that link out to external references. Whether you want to brush up on the bus, or need to code on-the-go, these will be a useful weapon in your web design arsenal. Another great alternative is jQuery 1.4.
Cost: $0.99 each
2. Color Stream

A little bit like Adobe’s Kuler on your handset, Color Stream is an app that will help you narrow down the correct color, or palette of colors, for a project. The Lite version of the app is available for free, and lets you create a palette of five colors side-by-side using a slider bar in either RGB or CMYK modes. You can then identify your chosen shades by their hexadecimal values for use on the web. This is handy enough, but the paid-for option (priced at $2.99) offers even more functionality, such as the ability to save palettes, use the built-in color schemes, or even match colors perfectly by creating a palette based on elements from an image or photo.
Cost: Lite version is free, full version is $2.99
3. FTP on the Go

If you need to be able to securely log-in to a server away from your desk, then this app — which emulates desktop FTP clients on your mobile — might well be the answer. As well as offering the ability to edit text on the fly and make those changes live quickly, there’s the option to view common file types, download them to your iPhone, e-mail them, and upload videos and correctly-sized pics from your mobile device too. Meanwhile, cleverly getting around the iPhone’s multi-tasking issues, there’s a built-in web browser so you can see changes without leaving the app, allowing for speedy work — which as far as we know, no client has ever complained about.
If you don’t need access to your FTP server, don’t forget about Dropbox for the iPhone, which will let you view your Dropboxfolder while on the go.
Cost: $6.99
4. Ego

For an on-the-go, at-a-glance look at you site’s stats, either for your own consumption, or to keep a customer satisfied, Ego is a one-stop-shop for such data. This app does not go into extreme detail, but it will summarize data from Ember, Feedburner, Google Analytics, Mint (with an additional download), Squarespace,Twitter and Vimeo. Data such as how many Twitter followers an account has racked up, feed subscription totals, and visitor numbers are all at your fingertips in an easy-to-use app that saves you logging into to a plethora of individual services. The developer, Garrett Murray, says Ego offers a flexible framework for adding support for other services, and welcomes suggestions on adding other stat-tracking options.
Cost: $1.99
5. Read & Note
In addition to offering a full-screen browser (as opposed to the iPhone’s Safariwindow), this app allows you to make notes on, or copy and paste text from, web pages. Whether you’re browsing around for inspiration or assessing a site for changes/improvements, being able to easily annotate the web with a mobile app is simply brilliant. Other functionality includes the ability to upload .txt .doc .pdf .ppt .xls .rtf .jpg files, bookmark sites, and share uploaded documents over Wi-Fi to any web-enabled computer.
Cost: $1.99

