Create a Settings Page for Your WordPress Website

This tutorial is long and in-depth, but it’s worth a read. The subject material isn’t simple either – recommended for somewhat experienced WordPress developers.

WebPutty

In their own words, a “less craptacular” option to editing/writing CSS. Have one window that has a live preview as well as the editable stylesheet; one click publishing of your changes. Oooh, aahh.

Chosen

Turn your select forms into a thing of beauty with this easy-peasy plugin.

10 Fresh & Free Fonts

Everyone likes free fonts! There are some new ones in here (to me, anyways), so I thought it was worth a share.

Skeleton

Responsive web design is the new black; here’s a great boilerplate to get you on your way!

See you next week!

Go to Source

To host or not to host. That is the question. Let’s dive in and see if we can answer it for ourselves: is it better to self-host your own webapps or use hosted webapps as a service?

What’s the Big Difference?

First, what are we talking about? What’s the big difference between hosted webapps and self-hosted webapps. Here, we’ll define hosted webapps as:

Webapps that are Software as a Service where you use the app while hosted on the company’s own hosting and cannot tweak the basic core parts of the app.

On the other hand, self-hosted webapps are:

Webapps that you run on your own server or hosting account and can tweak the core app to your liking, but you are the one responsible to make sure the app stays running.

With these definitions, Gmail is a hosted webapp. It’s Software as a Service from Google, and while you can change your theme and settings, you cannot change the basic way Gmail works or run it on your own server. On the other hand, Exchange Web Access is usually a self-hosted webapp for many companies. They run it on their own server, can change the basic way the app runs, but are also responsible to keep it online.

Hosted Webapps: Taking the Easy Road

Hosted webapps let you outsource running programs to companies that are dedicated to running your apps smoothly. Google has massive server farm that run Google Search, Google Apps, and many more services we’ve all grown to rely on. Most web developers have used Google Analytics, Google Webmaster tools, and Google Fonts to improve their websites, and our editor and I discussed this very post via Gmail and Google Docs. Hosted webapps are the mainstay of Web 2.0, and most of us rely on many of them daily.

While Google’s apps are free, not all hosted apps are free. 37signals charges for their apps, and Typekit costs if your site has significant traffic. So why do most of us choose hosted services? Because hosted apps are much more convenient. You don’t have to worry about installing the latest updates on Basecamp. If Twitter’s down, it’s up to the Twitter team to get it back up; you don’t have to go scramble and see why the site isn’t working.

Google Apps: The hosted webapps most of us use daily

Self-Hosted Webapps: Tweaker’s Paradise

On the other side of the spectrum are self-hosted webapps. Most CMS apps are self-hosed: WordPress, Drupal, Joomla, and more. With self-hosted webapps, you’re installing them on your own server and managing them yourself. This is great for power users, as you can tweak the apps to work like you want. If you have a blog on the hosted WordPress.com service, you’re pinned in and can only use the tools provided by Automattic. If you host your own WordPress blog with the self-hosted WordPress.org app, you can change anything you want, add themes that entirely change your site, or write a new plugin to turn WordPress into anything you want.

The downside is, you’re responsible for all of your self-hosted apps’ maintenance. You have to install updates, backup your data, make sure they’re secure, and more. It’s a risk many of us are willing to take to get more control of our webapps, but you must consider the extra time and resources it can take to maintain self-hosted apps. The good thing is, many self-hosted webapps are free, and the for-pay ones usually only cost a one-time fee unlike hosted webapps. Plus, you own your own data, so the service can’t just shut down without you knowing.

WordPress offers the best of both hosted and self-hosted services

Taking the Middle Road

Now, is it really self-hosting your apps if you’re running them on a managed server? After all, isn’t hosting from DreamHost or Amazon S3 a service, essentially a hosted webapp? To a certain degree, it is. By using a hosting service, you’re outsourcing the maintenance of the main server itself; you don’t have to dust out the server’s fans, or install the latest version of Apache. It gives you the middle road: the most critical stuff is maintained for you, while the stuff you enjoy tweaking is left for you to handle. In the end, it’s a matter of choice. You can use hosted services for everything, host all of your own stuff, or host your own apps on managed hosting.

Are webapps on a hosting account still self-hosted?

Localhost Webapps?

You can even take this even farther and host your own webapps on your PC. Microsoft’s made it easy to install many popular webapps, including WordPress, MediaWiki, and more, in only a couple quick steps. Even by hand on a Mac or Linux computer, though, it only takes minutes to get MySQL, PHP, Ruby on Rails, and more running on your computer so you can run all of the “cloud” services you want on your local machine. While this takes the “cloud” part out of webapps, it’s a great way to use webapps just like a normal program that works whether or not your ISP is doing their job.

Plus, you can even deploy local apps after testing, or sync them to other computers. This works especially good with simple webapps like TiddlyWiki; just put it in Dropbox and you’ve got a personal wiki ready to use wherever you need. Who said you need Evernote to keep your notes with you?

The Windows Web Platform Installer makes installing webapps locally simple

Conclusion

So, is there just one system you should choose and stick to? Should you use hosted services for everything, or host everything yourself? No! The greatest thing about webapps is how flexible web technologies are. You can run them locally on your computer, host them on a dedicated server, VPS, or share hosting account, or just pay a fee to another firm to keep up with everything for you. Plus, there are some apps that are self-hosted only, such as Mint Analytics, while others are only hosted services, like Gmail.

Instead of being tied in with one type of webapp, there’s room for all to flourish. I personally enjoy the ability to tweak my own site, so I have it self-hosted on my Dreamhost shared hosting account. But, I don’t want to deal with my email on my own, so I use Google Apps for all of my email, calendar, and contacts needs. With other webapps I use, I take a similar approach. If I want more power or want to customize more, then self-hosted works better; otherwise, hosted services are often much simpler.

There’s no perfect answer, and you’re always best to choose what’s best for yourself or your business. So, what type of webapps do you prefer? Do you try to always use roll-your-own solution, or would you rather have someone else manage your services so you don’t have to worry about it? We’d love to hear your insight in the comments!

Go to Source

Whether you’re looking for fonts to create an online magazine or want to evoke a playful feel, choices are plentiful and you should have no problem finding the right font to match your needs. The ten fonts listed below provide a selection of interesting options that will capture your visitors’ attention, but not overwhelm the page. They’re a great starting point for designers looking to add a fresh and distinctive look to their website.

1. Kontrapunkt

What a typewriter’s font might look like in the contemporary world. Still a compressed, relatively short typeface, the letters are no longer clunky, but thin and light, with attenuated connections between lines. Can be used to create a forward-thinking business website or for an artistic endeavor.

Demo | Download

2. Covington

Covington recalls conventional magazine typeface. Not too heavy, not to light, neither clunky nor precious, it’s a nice middle ground. With letters that show gradations between thinner lines and wider ones, its other distinctive feature is the branching out small horizontal bar that serves as base and top. Good if you want to make a website that mirrors an editorial aesthetic.

Demo | Download

3. NeoRetro Draw

Fonts that mimic handwriting or children’s drawing can often appear messy and prove difficult to read, especially when set against a distracting web page background. NeoRetroDraw, however, is an exception. Three dimensional block letters are clearly legible, yet retain that home-made feel.

Demo | Download

4. Eight One

A nice mixture of fun and a straightforward, clear aesthetic, Eight One features extremely rounded letters. The bulbous quality of the typeface is counteracted by the slimness of the lines and the ample spacing between letters. It’s slightly retro chic style might pair well with a digital portfolio.

Demo | Download

5. Quicksand Dash

Here’s another font that’s creative but in the same time remain clear and easy to read. Quicksand Dash mimics stitches, with little dashes comprising the letters. A rounded font, with plenty of space between letters, the clarity of the font’s shape helps to make this typeface fun, yet effective, so that it could even work for a business, not just a personal website.

Demo | Download

6. Grandesign

This simple, neutral font can be used for a wide variety of purposes when you make a website. Grandesign looks like an elegant upgrade of a default typeface, with a truly subtle, yet rich mixture of curve and angle, thinness and thickness, and matched with small, unobtrusive flourishes. It is visually interesting.

Demo | Download

7. Urban Sketch

An artistic option. One that is less frilly, more urban. This lightly scribbled-in font looks like the result of coloring in stencils. Equally useable for educational, contemporary art, architectural, or street and pop culture websites. Use sparingly and forgo large chunks of text in favor of logos or tags for an art portfolio.

Demo | Download

8. Bobel

The balloon-like letters of the Bobel typeface can swing two ways. In the first sense, they can appear childlike, fun, and simple. In the second, they present themselves as contemporary and tuned into pop culture. This font jumps off the page, so it can be great for lighthearted sites that are image-heavy and text-light. Select a bubbly color or keep it chicly neutral against your web page.

Demo | Download

9. Auctoritas

The name itself is the Latin origin of the word "authority". Created by graphic designer and typographer Doug Sheets in 2010, Auctoritas was intended to look commanding and authoritative, and gives an extra sense of weight to the words it is used for. Auctoritas is fresh, crisp and clear, which makes it a great selection for body copy. If you’re looking for a sleek and classy way to make your text appear more powerful, Auctoritas is a stunning choice.

Demo | Download

10. Androgyne

Here’s a playful twist of a comic-style font. Perfect for adding a splash of personality to an event invitation, artist portfolio or a website targeted at a young audience. Androgyne is warm and inviting, with a distinctly playful feel. Created by Dimitri Castrique and also known as Androgyne, this font is as versatile as its name implies.

Demo | Download

(bellefoong)

Go to Source

Perhaps “unleashing” captures the moment better than the word “introduction.”

Facetiousness aside, these additional fonts obviously give users multiple options; and in a cyberworld overrun with Verdana and Arial text, a little variety goes a long way…

Just ask Dan Gilbert.

Besides the number of fonts introduced, Blogger boasts all of the new styles are web-safe, going as far to call them “Web Fonts.”  With the 35 new fonts, Blogger’s total is now up to 77, all of which are listed here. 

Incidentally, Comic Sans is not one of the available fonts, so the next time Dan Gilbert wants to write a fiery dismissive of LeBron James (image H/t), he should probably look into Blogger’s service.

The new fonts are available for all Blogger users, and the text alterations can be applied to an  entire blog.  Members are encouraged to experiment in the composition WYSIWYG before applying any blog-wide changes.

Go to Source

The best way to keep track of our tweets is simply to follow us on Twitter, however, in case you missed some here’s a quick and useful compilation of the best tweets that we sent out this past week.

Note that this is only a very small selection of the links that we tweeted about, so don’t miss out.

To keep up to date with all the cool links, simply follow us @DesignerDepot

Coding Flexible Web Layouts in HTML5 and CSS – http://ow.ly/3jJuf

The Evolution of The Blogger (Infographic) – http://ow.ly/3j8p1

Make Your Facebook an Actual Book – http://ow.ly/3k1sW

Many new fonts added to the Google Font Directory (all free!): http://ow.ly/3jYYG

Dutch designer creates wind-powered iFan case-charger for iPhone – http://ow.ly/3kTOV

Creating Meaningful Web Design – http://ow.ly/3nnJE

Make Your Designs Stand Out with Unconventional Color Combinations – http://ow.ly/3lxVz

26th Annual Editors’ Choice Awards: the complete list – http://ow.ly/3lybl

When Is The Right Time To Redesign Your Blog? – http://ow.ly/3mdFZ

Thumbnail Based Web Design? – http://ow.ly/3meey

Logo Design Trends for Big Companies – http://ow.ly/3lyTA

Building on Opportunity … Sketches! http://ow.ly/3mSdQ

Are Male and Female Designers Designed Differently? – http://ow.ly/3mR23

The Creative Flow in a Web Design Studio – http://ow.ly/3mR60

Want more? No problem! Keep track of all our tweets by following us @DesignerDepot

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: O1Rs1S

5300+ Icons from IconDemon for $39 – save 61%

Source
Go to Source

Setting the Mood With Type

Typography can be very powerful. Using certain fonts can inspire images or feelings. For example, using the type Manhattan evokes a classic 1920s feeling. Typography is very important for graphic designers going into advertising and marketing, because they have to make advertisements that encourage the viewer to do something. It’s not as easy as it sounds. You have to know what you are trying to portray. If you aren’t sure when you’re picking colors, fonts and shapes, then your viewer won’t be either. Have a clear idea of what mood you want before you start.

Typography Trends

In recent years, the use of dramatic typography in advertisements has grown. Pictures draw in the viewer’s eyes more than type. Typography has gotten flashier because it has to compete with other media advertising. The average viewer is bombarded with bright colors, flashy effects, and anything else that might grab his attention. Keeping someone’s attention with typography requires some really good skills and flashier typography.

Top 10 Trendy Typography Fonts

New fonts are made yearly, and more than 50,000 separate fonts are floating around. Not all of them are worth using, but certain fonts become trendy and popular. Most of these fonts are new, but classics such as Helvetica are still in the top choice. Each font has a sort of personality to it. By combining the fonts with other design aspects, the possibilities are infinite. Here are some of the fonts seen in the top 10 most popular font lists:

• 1. Helvetica
• 2. Frutiger
• 3. Myriad Pro
• 4. Avenir Std
• 5. Trajan
• 6. Optima Std
• 7. Futura
• 8. Bickham Scritp Std
• 9. Universe
• 10. Eurotile

Colored Typography

Color is very powerful when combined with typography. Certain colors evoke certain emotions. How you use the color is just as important as the color itself. Warm colors can bring feelings of comfort and passion, where as cool colors can cause a calm or sad feeling.

• • Red is angry or passionate.
• • Pink is playful or flirty.
• • Blue is peaceful or sad.
• • Yellow is cheerful or comforting.
• • Orange is exciting and energetic.
• • White is empty or open.

Once you have the basics down, you can get to work. Try working on your typography art when you are feeling the emotion you are trying to convey or listen to music that fits your theme – whatever you do, you want to add a feeling to your work that will move your viewers to tears or smiles. Even if you just page through a symbolism book and find something that tells the message you want to tell, it will give you something to work with. From there, use your creativity to evoke emotion.

You might also like…

18 Super Quick Web Typography Tips for Newbies →
21 Typography and Font Web Apps You Can’t Live Without →
50 Essential Web Typography Tutorials, Tips, Guides and Best Practices →
The Classification of Fonts →
Typography as Art →
Five Alternative Methods for Typography Inspiration →
45 Creative Examples of Typography in the Wild →
50 Examples of Effective Uses of Typography Within Web Design →
A Showcase of 35 Beautiful Typographical Illustrations →
45 Stylish and Creative Typographical Desktop Wallpapers →

Go to Source

That’s why every month we research and showcase some of the best and latest resources available for web designers.

Here’s the newest installment of what’s new for web designers in the past few weeks. This month we’ve covered everything from new fonts to useful web apps to some new resources for you to use in your own designs, all recently launched!

As always, if we’ve missed something, let us know in the comments. And if you know of an app you’d like included in the next roundup, please tweet it to @cameron_chapman.

Please feel free to share your views on the products and services that we’re featuring this month, in the comments area below…

The Great Typekit Table

Sleepover has published this chart that shows us which Typekit fonts are good for long blocks of text. In addition to listing appropriate fonts, it also tells us whether the fonts are OK for Windows, whether they include extra weights and opticals, and more. All the fonts included had to meet certain criteria: they had to be available in bold, italic, and bold italic styles, and they couldn’t be handwriting, script or monospace.

Instagram

Instagram is a new camera app for iPhone. It’s free, and lets you snap a photo and then apply filters to it before sharing it via Facebook, Twitter or Flickr.

Curio 7

Curio 7 is the newest version of the Curio app for Mac, which allows for better organization of creative projects. This version adds a bunch of new features, and is easier to use than previous versions.

Sublime Video

Sublime Video is a new embeddable HTML5 video player, still in private beta. It will be a paid app once the beta is over, but aims to be more cost-effective than free apps by removing the need to manage or maintain the app, or go through complicated integration procedures.

Alertful

Alertful is a simple, free reminder service. Just enter a task, holiday, meeting, or other event and your email address, and it will remind you on the appropriate day. You can tell it whether to just remind you once or on a daily, weekly, monthly, or yearly basis.

BrushLovers.com

BrushLovers.com is a new sister-site to Webdesigner Depot that offers a huge collection of both free and premium Photoshop brushes. The brushes included are all exclusive, so you won’t find them anywhere else!

MailerLite

MailerLite is a low-cost email newsletter program that uses a drag-and-drop content editor and doesn’t require HTML skills. Pricing starts at just over $.01/email sent, and goes down from there, depending on volume.

Wibba

Wibba is a new social sharing service for tech products, both online and off. You can share anything related to the tech industry: news, apps, videos, and more, and follow people to see what they’re sharing.

PicsEngine

PicsEngine is a new photo storage and sharing service. They offer a 30-day trial, but after that the charge is 5 Euros per month (or 50 Euros per year) for unlimited storage and up to 10GB of bandwidth per month. Photo galleries can be viewed with any browser, while the library service only works on Chrome, Safari and Firefox.

Observer

Observer is a new analytics app, currently still in private beta. It has a very elegant UI, and can give both a high-level view as well as a detailed view of what you need to know about your website traffic.

Weet for iPhone

Weet is a new, $.99 Twitter app for iPhone. It offers a clean interface, a number of built-in services (like Bit.ly, Posterous, Twitpic and TwitVid), and Read Later support. It also supports multiple accounts, and supports twitmore.

Awesome Fontstacks

Awesome Fontstacks is a great site for finding and creating failsafe font stacks that can be used with @font-face. Just pick a font to start, and the site will then show you compatible fonts.

Gitwrite

Gitwrite is “Blogging. For Nerds. Done right.” It’s basically a blogging platform built on Git. You sign up with Github and can then can update either via git or using their web interface.

Desks Near Me

Freelancers often work from home, which is great. Except when you’d like to get out of the house and work somewhere else for the day. That’s where Desks Near Me comes in. Enter your location and it will tell you of available places nearby where you can work for the day.

Owe Me Cash

Owe Me Cash is an online “collections” service that will send reminders via phone, text and email to those who owe you money.

RailsWizard

RailsWizard simplifies the creation of new Rails apps, by using a wizard to walk you through setting up the initial elements of your app. You can enter everything from the Database/ORM to the JavaScript framework and plugins to the templating engine and more.

foxGuide

foxGuide is a Firefox plugin that lets you add Photoshop-esque guides to webpages. It saves the guides you make for each page, too, so you don’t have to recreate them the next time you need them.

NULL Free Font

NULL is a new free font from Font Fabric. It’s a bold, sans-serif, display-style font, perfect for headlines.

Roke 1984

Roke 1984 is a new display-style font with a really unique look. It’s based on a geometric forms and mathematical symbols, and includes both numerals and accents.

Spatha Serif

Spatha Serif is a beautiful, slightly-rounded serif font with a vintage feel to it.

Unobtrusive Ajax Free Ebook

Here’s a free ebook from Jesse Skinner, and published by O’Reilly, for learning to use Ajax and JavaScript unobtrusively.

Verify

Verify is a new app for gathering feedback from users on mockups or screens. It gives clear, actionable results, and can be used for A/B testing among other types of tests. They offer a 30-day free trial, and then plans start at $9/month.

Cirkel Pro Font Family

Cirkel Pro is a funky new font family, that includes a number of unusual forms, all based on circles.

Skyhook Mono Font Family

The Skyhook Mono font family includes a variety of font weights and styles of this angular, monospace typeface. The regular weight is free to download, though other styles run about $20 each.

I Slabbed the Seriff Font

I Slabbed the Seriff is a new free font created with FontStruct. It’s a slab serif typeface, and includes numerals and accents.

Simple Booklet

Simple Booklet is an easy-to-use flipbook creator, that lets you include images, text, video, audio, and other content in your flipbooks, without any coding knowledge.

WordPress Snippets

WordPress Snippets simplifies theme creation and customization by providing pre-built code for a variety of functions and features. You can browse or search included code, or share your own code snippets.

The Square Grid

The Square Grid is a new CSS framework that works based on 35 equal-width columns. It also provides a 28px baseline-grid for smooth vertical rhythm.

Ai -> Canvas

Ai -> Canvas is a plug-in that lets Adobe Illustrator export vector and bitmap artwork directly to an HTML5 canvas element for rendering in a canvas-enabled browser. It provides drawing, animating, and coding options for creating interactive and well-designed canvas-based apps.

Markup

Markup is a bookmarklet that lets you draw on any webpage to share your ideas with others. You can draw with the Magic Marker or write with the Text tool, and then publish your ideas.

yfrog Widget Personalization

yfrog now lets you create a customized, personalized widget for sharing your yfrog photos in a blog or website sidebar.

Twilert

Twilert is a free app that lets you create automated email alerts for tweets. Just enter the search term, hashtag, or other criteria, and the time you want to receive your alerts, and Twilert will email you with any mentions.

Ontwik

Ontwik is a site that showcases lectures, screencasts, and conferences for web designers and developers. You can search or browse by tag (like creativity, Django, Github, JavaScript, jQuery, etc.). You can also submit videos of your own.

Yogile

Yogile is a new photosharing service that lets you create both private and public albums. Yogile stands out, though, by allowing friends and family to also submit images to your albums.

Capturely

Capturely makes it easy to create coming soon pages for your unlaunched websites aimed at getting visitors to submit their email address for updates.

Written exclusively for WDD by Cameron Chapman.

What do you think of these new tools for designers? If we missed something, please share it in the comments below!

If you find an exclusive RSS freebie on this feed or on the live WDD website, please use the following code to download it: F4qA0v

Source

Go to Source

Combine that with some of the fancy new fonts available through web services like Typekit and Fonts.com and you’re well on your way to replicating the kind of fine-tuned typography control print designers have long enjoyed. However, targeting individual letters and words can still be tricky.

That’s where Lettering.js comes in. The JQuery plugin can wrap your text with span tags, allowing you to target CSS rules to individual letters, words or sentences.

If you wondered how the designers behind the Lost World’s Fairs CSS experiment did it, well, look no further than Lettering.js. The other showcase examples on the Lettering.js website are no less impressive.

The library, which requires JQuery, can be downloaded from Github. Using it is as simple as selecting the element you want to target and applying the appropriate function — basically, whether to wrap the letters, words or lines of your target element.

One thing to note, the developers recommend putting Lettering.js in your head tags to avoid the unsightly flash of unstyled content that can occur if you include it at the bottom of your page.

See Also:

• Typekit Teams Up With Adobe to Offer More Web Fonts
• Typekit Gets an API
• A Guide to Internet Explorer 9’s HTML5/CSS 3 Support
• Review: Typekit Delivers Custom Web Fonts to the Masses

Go to Source

With that said, creative designers always search for new fonts and techniques to improve and implement their favorite typography to their websites. Below we’re excited to cover 7 helpful tips on how to improve the typography of your websites.

Contrast and Color

Color and contrast are a very important piece to the typography puzzle. Many tend to keep typography color in the same color wheel as their main design is. For instance, having a dark blue background means they tend to set a light blue typography color. Sometimes this is an issue as the colors may blend too much making it viewable but rather difficult to read causing eyestrain.

For your readers or viewers, this makes them less inclined to read articles or to browse around your website for a longer period of time. Therefore, the color contrast between the background and the foreground text or typography should generally be quite significant to keep things apparent, like black on white, or white on blue.

Font Size

The font size is a very important key to keeping text readable, clear, and precise. A general tip is to keep font in a comfortable cushion where it is not too large that can cause unnecessary used space, but not smaller than a usual textbook font size.

A good way to emphasize your body content from your sidebar or side-focus content is to generally have the font size of the body content larger than the side content as your viewers will spend more time reading the body text than the side text.

Therefore, keeping the side content out of focus from the body content enables the viewer to easily browse and read about, this is also referred to as a hierarchy between content.

Emphasis

Let us look back at the hierarchy concept discussed earlier, by it, we can easily identify between many bodies of text. For example, if the largest text in size on your web page is up top, while other bodies of text are significantly smaller, your eyes will naturally land on the larger object, in this case the larger text size. What this means is, by emphasizing certain keywords or text blocks, you increase its visibility across that page.

With that said, throughout your body text, highlighting or emphasizing key aspects from your text helps keep your long text blocks clear and understandable. Additionally, it gives your design or website a nice touch to the typography, keeping it unique and organized at its best.

Proofreading

Proofreading in this case does not correlate to assuring your text contains correct spelling and is grammatically correct, but rather correlates to tying the misconnection between your design and the typography. Typography is not always about how it looks from a design perspective but also how it appears in clarity and readability when it comes down to actually reading the text.

Many usually tend to post a dump of the lorem ipsum dummy text and make it look good at a design perspective, but do not actually go in depth to the reading level to read the text to understand if their implementation of the typography is actually suitable and comfortable for reading. With that said, do not just style and layout the typography based on what looks good for the design, but also assure the typography is clear, well spaced, and organized for the general audience to easily read through.

Too Many Fonts

I have seen this as a commonality across many websites as if the designer was a kid in a candy store and decided to pick out one of each to put in their baggy. We all have bundles of favorite font faces and we tend to use many of them across many different projects. However, using multiple font faces causes confusion to your reader, as each font face has its own style for each character, making it difficult for them to read through. Instead, stick to one or two font faces across your website, and use your favorites for other projects.

Good Whitespace

Cramming everything together is a viewer’s nightmare, let alone a pet peeve to any designer. Leave a good whitespace gap between sets of text to keep other bodies of text the viewer may not be reading out of focus from what they are reading. This generally helps viewers from running on to different segments of text or from unintentionally skipping lines. Remember, spacing is key to good readability, so use whitespace wherever needed.

Use Font Stacks

You may have a favorite font face and decide to use it on your website, however, you need to understand that not everyone may have that font installed on their system or device, thus, it will not display properly. Instead, use CSS’ font stacks rather generously as a fallback to your viewers that do not have the font you originally intended the website to use.

A good fallback font would be something similar to what you implemented for utilization, and a fallback to that would be a font that is generally used across most platforms and devices. It is a great way to assure your website’s typography does not significantly change across different platforms and devices, leaving your typography exactly or close to the way you intended it to appear.

Overall typography for the web is an interesting topic with many tips and DO’s and DON’T’s arising across the web. The main thing to note is that the way the typography appears should be user friendly as well as compliment your website’s design. This includes color and contrast, size, font face, and the likes. Do not overdo it and complicate it with the typography, but also have it fit in with your design well enough for it to look great as well as be great for your viewers.

Go to Source

abipti

Glasser Italic

bubbleboddy light

D3 Globalism

Corpuscare

CollageAl

MANABU

Gayatri

Bobel

Val

OvalSingle

Cyclo Trial

Aunchanted

Zorque

Synthetic BRK

Steiner Light

Quarantine BRK

Nyamomobile

Diebel

EXCEED Medium

Go to Source

[T]here are no bad fonts — only inappropriate ones.

— Jason Beaird

The majority of computer users became aware of Microsoft Windows Vista on January 30, 2007, when the company released the new operating system publicly.

You and I of course knew about it well beforehand. Once Vista was available for beta, many web designers adopted it early to begin trying — with varying levels of success — to figure out if they can incorporate Vista fonts into their designs.

Three things quickly became clear:

1. They are beautiful typefaces.
2. They are unusually — and, for designers, unacceptably – blurry unless you have ClearType or another anti-aliasing protocol enabled; but there are serious issues with ClearType.
3. With some exceptions, they are markedly smaller in size than most fonts, making them difficult to incorporate into font stacks.

Trust Microsoft to create something attractive and potentially valuable like this set of spiffy new fonts (or an operating system like Vista), and then take steps to ensure they can’t be used easily.

But I like these fonts: they’re beautiful and they are available in many of our user’s computers (as much as 92% of all PCs use Windows as of May 2010^[1]). In addition, the design community deserves some thought as to how to use them in their work.

Let’s see what we’re up against.

Breaking Down the Fonts

Vista "C" fonts.

Let’s examine the fonts themselves, starting with the best known of the group: the 6 "C" fonts — their nickname derived from the fact that all their names start with the letter C, and officially, because they are part of the Microsoft ClearType font collection.

John Hudson, the font designer who made one of the C" fonts (Constantia), shares some insights on how the "C" font names were picked:

"One of the Microsoft managers had come up with the idea that all the CT [Vista] fonts should have names that started with C. I can’t remember all the possible names I came up with, each of which ended up rejected after international trademark searches. Microsoft probably spent more money on lawyers doing trademark searches than they spent on the typeface development! As I recall, the day before the penultimate choice came back rejected, I’d been singing some psalms during vespers, and noticed the word constantia. Hey, I thought, that starts with C!"

If you have Vista, Windows 7, MS Office 2007 for Windows, or MS Office 2008 for the Mac, you have these fonts already. If you don’t have them yet, keep reading!

The "C" List

Here is a bit of information about each of the "C" Vista fonts.

Calibri

The new default font for MS Office apps  — replacing the tired old warhorse, Times New Roman — Calibri is a softer, more rounded sans-serif font.

Calibri’s designer Lucas de Groot says, "Its proportions allow high impact in tightly set lines of big and small type alike."

When anti-aliasing is applied, it is an attractive and very reader-friendly font; when it is not applied, Calibri looks like something I’d draw with my foot.

Font maven Megan McDermott observes that Calibri "looks terrible in Opera and Firefox," an observation I don’t agree with, but since I respect her work, I’m passing along her opinion.

Cambria

There are only two serif fonts in the "C" collection, and Cambria is, to my eye, the lesser of the two.

Microsoft states that Cambria was "designed for on-screen reading and to look good when printed at small sizes.

Designer Jelle Bosma calls it a "robust, all-purpose workhorse text face." Van Wagener calls it "sturdy" and "formal." I think the font lacks a certain elegance, though it is solid enough and is very strictly spaced.

If you’re interested in rendering mathematical equations, check out Cambria Math.

Candara

This sans-serif font incorporates some decorative flourishes, along the lines of Trebuchet MS and therefore is less useful in body text.

Consolas

The only monospace font of the set, Consolas is as appealing as any monospaced font out there. I cordially despise everyone’s default monospace fault, Courier New, much preferring Andale Mono and other more stylish monospaces. Like Calibri, Lucas de Groot designed this font.

Constantia

The other serif font of the collection, Constantia, is elegant without being overtly ornate. It’s clean, readable, and overall an excellent and versatile font.

Creator of the font, John Hudson, says he designed it to work in both print and electronic display formats.

On the screen, it looks very similar to Palatino Linotype or Book Antiqua, but with a bit more modern feel. Dan Cederholm of SimpleBits — in his quest to provide the best ampersand ever for use in your designs — finds Constantia’s ampersand (&) works well as a companion to Palatino/Palatino Linotype in the ampersand beautification code.

Corbel

Corbel is the last of the sans-serif fonts in the collection. It is clean and readable, but to me, it suffers from some of the same design limitations as Cambria. Microsoft calls Corbel’s appearance "uncluttered and clean" on screen, and claims it is "legible, clear and functional at small sizes."

"C" Fonts On Mobile Devices

It’s worth noting that mobile/handheld advocate Alexander Turcic says the "C" fonts are "gorgeous" on handheld devices. In 2005, he submitted 6 screenshots of the fonts in use on his iSilo device, including this example of Constantia in use below.

Constantia on iSilo.

The Odd Ones Out: Segoe UI and Nyala

The Vista font collection contains two more fonts that are often forgotten in discussions of the collection: Segoe UI and Nyala.

Segoe UI

A sans-serif font, Segoe UI is a member of a larger "Segoe" (pronounced "SEE-go" according to Microsoft designer, Jensen Harris) family of fonts. It has a lighter and more rounded feel than the "Swiss" fonts such as Helvetica and Arial, and is less linear than Tahoma.

It is Microsoft’s designated system font, replacing Tahoma in most Windows displays.

Microsoft blogger Saveen Reedy calls it a "beautiful" font, an assessment I agree with.

Some controversy over the font erupted in 2006, when the European Union declared Segoe UI to be a ripoff of another font (Frutiger Next) and refused to accept Microsoft’s registration applications for the font.

To be sure, there are slight but discernible differences between the two, but most people believe that Microsoft admitted some form of plagiarism when it decided not to appeal the EU’s decision. Designer Steve Matteson says Segoe UI is an entirely original design.

All legalities and disputes aside, Segoe UI is a terrific design choice if you have ClearType enabled, and if you’re comfortable with the heavy-handed anti-aliasing the technology provides. Without proper anti-aliasing, Segoe UI goes from strong yet delicate, to almost brutishly crude.

Nyala

The least known of the eight Vista fonts, Nyala, is supplied with Windows Vista and Windows 7, as well as with Windows Server 8. It’s a restrainedly ornate serif font that — to my rather blurry eyes — appears a bit jagged in many displays. It’s also the only one of the eight Vista fonts that is virtually impossible to find for free if you don’t have it as part of your Windows installation.

According to Microsoft, "[t]he Nyala typeface is named for the mountain nyala (tragelaphus buxtoni) a species of great African antelope native to the highlands of Ethiopia."

It was created by veteran font designer John Hudson (who, just as a reminder, also created Constantia) and is designed to reference native Ethiopian typography and lettering.

Design Issues in Using Vista Fonts

Designing with Vista fonts — both the "C" font collection and the two redheaded stepchildren — is problematic at best.

Certainly, by looks alone, most all of the fonts make excellent design choices, being elegant, attractive, and readable at a variety of font sizes.

And since they’re not the same old Web-safe font choices we see every single boring day, it gives both designers and users something fresh and different to see on their screens.

Market Penetration is Decent

Font embedding aside, we all know that it’s all but pointless to design with a font that no one has.

Microsoft is probably the only computer technology company in existence that can introduce a font — or in this case a group of fonts — that will achieve serious market penetration in the Windows user community within only a year.

That’s because the Vista fonts were included with Microsoft Windows Vista, Office for Windows 2007, and Office for Mac 2008. Suddenly, hundreds of thousands of potential Web users were gifted with almost a dozen new fonts.

So how many Windows users have them? The savants at CodeStyle can answer that question. Periodically, they issue an update of their survey of the fonts being used "in the wild" and what percentage of what users have what fonts.

As of CodeStyle’s June 2010 font survey results, the various "C" fonts seem to have a 60-61% market penetration among Windows users.

Segoe UI has a bit less, at around 51%. Nyala comes in a good bit lower, at around 43% of Windows users having that font on their machines.

A small but significant number of Mac users — about 13-15% — have the "C" fonts on their systems. For some perspective, that’s twice the percentage of Windows users who have Helvetica (the Mac equivalent of Arial) on their machines.

Linux users, which accounts for around 4.8%^[2] of all Web users, pretty much don’t have any of these fonts: even the most common of the fonts, Calibri, doesn’t show up at all on the Linux font listing.

Is market penetration growing? The numbers for Windows users went up about 5% in just a month (from May to June) — a significant increase. This tells us that market penetration for these fonts is going up.

Quick recap: We can expect well over half of our Windows users to have the Vista "C" fonts, about 14% of our Mac users to have the "C" fonts, and our Linux visitors won’t have the fonts, period. There are signs that this will increase relatively rapidly.

What this means for web designers, though, is that while you can lead off with a Vista font in your font stack, you should have it followed (backed up) by fonts that are more universally available (Web-safe fonts) until these numbers reach higher percentages.

Size Really Does Matter

Unfortunately, the Vista fonts are tremendously small (think x-heights) in comparison to fonts that would ordinarily be used in font stacks with them, making it tough to design for them.

Or at least seven of them are; Segoe UI is larger than its seven siblings, and in its size, compares fairly well with fonts that it would likely be paired with, such as Verdana, Helvetica/Arial, and Tahoma.

Also, the size differential seems more pronounced on the "C" sans-serifs: Calibri, Candara, and Corbel. Some of the Vista fonts are so much smaller than their confreres that using them in front of your font stacks might throw off your design, especially if you’re designing a tightly structured, "count-the-pixels" layout.

You’ll probably find yourself compensating for their small sizes by increasing the font size of your designs, which may come back to bite you when your site displays on machines without these Vista fonts.

That’s a problem that has no real solution just yet, though it may be somewhat addressed when the @font-size-adjust property becomes more widespread.

Unfortunately, even @font-size-adjust won’t allow for adjustment for different fonts within a stack.

The guys at NeoSmart observe:

"They just don’t fit. The new fonts are mostly too small to be plugged right in to an existing CSS file. If you tweak the CSS so that it looks right for, say, Calibri; ten minutes later someone that doesn’t have that font is going to come around and ask your server for that CSS file — but since they don’t have Calibri installed, their browser will use the next one on the list, and unfortunately, your sizes are going to be all wrong."

They eventually did tweak some stylesheets to accept Vista fonts, but it took some time, some testing, and a willingness to compromise on font sizing. They do note that Consolas works nicely in their designs without a lot of tweaking.

Brownspank at SixThings observes: "It may seem trivial for some, but if you’re aiming for consistency within your font-family, or are relying on subtle font size differences to enforce hierarchy, Vista fonts may adversely affect your layouts."

McDermott notes: "It does make you wonder why this came about. Was it just ignorance on the part of their type designers? Negligence? Some underhanded way to make web pages look bad in other browsers so everyone has to use IE?"

Brownspank advises designers to set their font-size at a minimum of 14px or even 16px to ensure readability, and try to use Vista fonts that match their non-Vista cousins as closely as possible.

The ClearType Issue

Then there’s Microsoft’s ClearType. ClearType (CT for short) is an anti-aliasing (sometimes called font smoothing) utility first developed for Microsoft Reader in 2000, and is incorporated (turned off by default) in Windows XP.

It is enabled by default in Vista, Office 7, IE 7, and Windows Live Messenger. If you’re familiar with Adobe’s CoolType, Microsoft’s version is relatively similar.

Microsoft made the decision — foolishly, in my opinion — requiring ClearType to be enabled for these fonts to display properly, and designed them to CT specifications.

By doing so, they took 8 very usable fonts and made it much more difficult to justify using them in font stacks that are constructed to work on 99.9% of the browsers and displays out there.

Web designers, whether using Vista fonts or not, absolutely need to test their designs in Windows displays with ClearType enabled and again with it disabled.

Mac users have font smoothing operating all the time, so it will be less of an issue (or at least the same issue) for Mac folks. Mac font smoothing is pretty standard, with OS X using the Quartz anti-aliasing filter and Mac OS 8 and 9 systems using an older utility, QuickDraw^[3]. Mac blogger Matt McErvin gives some more detailed information on both Quartz and QuickDraw’s anti-aliasing techniques.

The difference between fonts rendered in Quartz and ClearType. Source: Smashing Magazine.

ZDNet’s George Ou, writes that CT is superior to Quartz in rendering fonts on-screen. Blogger, Joel Spolsky, disagrees to an extent, positing that Quartz does a better job of rendering the typeface as it was originally designed, at the cost of a bit of blurriness. This debate addresses why some Safari for Mac users find the font displays unacceptably blurry.

Opinion is strongly split for and against anti-aliasing in general — and ClearType in particular. Personally, I like font smoothing because my eyes are bad and both my computer monitor and my glasses are old. I’ll take what I can get to help me see clearly.

Those with sharper vision and better monitors can, and do, disagree. Notable designer, Jon Tan, has a particularly acerbic take on ClearType, especially how it is implemented in IE 7. He concludes, "ClearType fails to deliver good anti-aliasing. In my view it is a backward step from the old Windows Standard rendering. I am at a complete loss to explain why it is allowed to persist."

I might agree with Tan if my eyes were better.

ClearType For Programmers

Blogger, Jeff Atwood at Coding Horror would love to use Consolas as his default fixed-width programming font, if it wasn’t for the ClearType issue. He writes, "I’ll definitely agree that Consolas is one of the best looking ClearType fonts I’ve ever seen. That’s probably because it is part of the first font family designed from scratch with ClearType hinting in mind. However, I prefer not to use font smoothing on my programming fonts. And Consolas looks like crap without ClearType! Consolas appears to lack any kind of hinting for reasonable display at small point sizes. Consolas isn’t just optimized for ClearType, it can barely be used without it."

Programmer Rick Stahl agrees with Atwood’s position, saying Consolas works for him only with ClearType enabled, and then only at 15pts.

However, programmer and math professor John Cook has a different view, saying that Consolas is his "favorite monospace font" in part "because it exaggerates the differences between some characters that may easily be confused." He does not address the ClearType issue; presumably he’s enabled it and moved on (or he doesn’t use Windows).

Tweaking ClearType For You

It’s worth mentioning that Microsoft has a "power toy" available to fine-tune ClearType for XP and Vista users. Windows 7 folks have the utility in their Control Panel’s Appearance and Personalization applet. XP users also have an online version of the CT Power Toy available for their use.

Not For Printing

With the possible exceptions of Constantia and Corbel, these fonts are designed for the screen, not for print. I wouldn’t run to change my print stylesheets to incorporate these fonts.

Using the "C" Fonts to Set the Theme of Your Designs

[W]rite down a general description of the qualities of the message you are trying to convey, and then look for typefaces that embody those qualities.

– Jason Santa Maria

Designers should also recognize their visitors’ perceptions of the fonts they select. Most designers and users agree that the font, Helvetica, projects a cool, somewhat detached, mood when used in designs while Times New Roman projects a solid, if perhaps a bit stodgy, feel.

A 2006 Microsoft-funded study by the Software Usability Research Laboratory had subjects detail their feelings about a list of 20 fonts, including all of the "C" fonts, with an eye to the implications towards their use in Web designs and other areas.

After sorting through the responses, the 6 fonts were classified as follows:

Calibri’s Usability

• An "all purpose" font.
• 70% of subjects said they would use this font on the Web.
• 70% said they would use this for texts.
• 64% said they would use this font in Instant Messaging software.
• 63% said they would use this font in emails.
• 62% said they would use this font in magazines.
• 54% said they would use this font in a PowerPoint presentation.
• 53% said they would use this in advertisements.
• None said they would avoid it entirely.

Cambria’s Usability

• A "traditional" font; "stable," "polite," "mature," and "practical."
• 76% said they would use this font for business purposes.
• 70% of subjects said they would use this font on the Web.
• 70% said they would use this for texts.
• 66% said they would use this font for their assignments.
• 65% said they would use this font in magazines.
• 64% said they would use this font in textbooks.
• 64% said they would use this for news articles.
• 63% said they would use this font in letters.
• 61% said they would use this for short stories.
• 61% said they would write tests with this font.
• 59% said they would use this in books.
• 59% said they would use this for scientific purposes.
• 53% said they would use this font in brochures.
• 45% said they would use this for math.
• 41% said they would use this font for computer programming.
• None said they would avoid it entirely.

Candara’s Usability

• An "all purpose" font.
• 61% said they would use this font in emails.
• 55% said they would use this in advertisements.
• None said they would avoid it entirely.

Consolas’ Usability

• A "plain" font; "unimaginative" and "dull."
• None said they would avoid it entirely.

Constantia’s Usability

• A "traditional" font.
• 59% said they would use this font in letters.
• 58% said they would use this for short stories.
• 55% said they would use this font in brochures.
• 54% said they would use this in books.
• None said they would avoid it entirely.

Corbel’s Usability

• An "all purpose" font.
• 61% said they would use this font in emails.
• 54% said they would use this font in IMs.
• None said they would avoid it entirely.

What This Means for the Usability of "C" Fonts

The researchers noted, "The results from the online survey resemble previous research based on print samples. Users consistently attributed personalities to fonts displayed onscreen."

For what it’s worth, my take on the data: All of the fonts — with the possible exception of the monospace font Consolas — came across as appealing to one degree or another.

Calibri, Constantia, and especially Cambria, are rated as useful for a wide variety of applications.

Calibri seems the most popular for electronic (screen) uses, while Constantia is more popular for print media. Cambria appeals to both electronic and print displays. Candara and Corbel made less of an impression.

Vista Fonts in the Wild

Screenshot of an Itst.org site using Cambria. Source: Sascha A. Carlin.

I was somewhat surprised to find very few sites using any of the Vista fonts as their primary font in their font stack. Here are a few sites that use Vista fonts. Because context matters in this case, I should say that I took these screenshots using Firefox on a Windows XP machine with ClearType enabled.

bright creative

Dave Shea’s site uses Candara in some of its headings. The h2 heading ("welcome") is set in Candara.

NeoSmart

Like Shea above, NeoSmart Technologies uses Candara as part of its logo font, in the "connecting ideas" text line. The secondary text line is set in Candara.

MSDN Blog

Microsoft project director Jensen Harris used Segoe UI and Constantia in a December 2005 Microsoft blog post touting the new fonts’ arrival on the scene.

Microsoft project manager Scott Hanselman used Consolas for some program code in a blog post. Not a great example, but as you might imagine, there aren’t a lot of sites using Consolas in their design at all.

HiTechy

Web designer Alex Dawson uses Constantia for his headers and Candara for his body text.

AriWriter

Social media marketer Ari Herzog uses Corbel as the font for the body text on his blog.

Stop Bullying Now

I’ve used Segoe UI as a text font in several of my own designs, including my redesign of the Stop Bullying Now site.

Other Uses in the Wild

Microsoft uses Segoe (a variant of Segoe UI) in its text font stack, behind Tahoma. With Tahoma’s 99%+ market penetration among Windows users, few, if any, Windows users will see Microsoft’s site displayed in Segoe.

According to Web designer Amrinder Sandhu’s February 2010 article on A Way Back, the typography site I Love Typography had Cambria in its font stack, behind Georgia, which means that with Georgia’s near-99% market penetration among Windows users, virtually all of them would see it in Georgia, not Cambria. However, a check in May 2010 shows Cambria no longer in the ILT font stack.

Obtaining Vista Fonts

As noted above, you have these fonts if you have Windows Vista, Windows 7, MS Office 7 for Windows, and/or MS Office 8 for Mac.

However, if you’re running a non-Vista Windows OS, you can still obtain the fonts in several ways.

You can get the 6 "C" fonts by downloading and installing the free Microsoft PowerPoint Viewer 2007.

You can obtain the other Vista font, Segoe UI — not available through most font providers, even those who make the other Vista fonts available — by installing the free Microsoft Word Viewer.

Mac users can obtain the Vista fonts freely and by installing the Open XML File Format Converter; Rémi Plourde tells how to do it.

Ubuntu Linux users can figure out how to install the fonts from this post. Fedora Linux users can install Vista fonts on their machines by following the instructions found here.

Pairing Off

If you do decide to bite the bullet and incorporate Vista fonts into your design, here are some suggested pairings.

These are just suggestions, subjective and idiosyncratic; you may find that different fonts, or different combinations, work better for your designs. Keep in mind the issues of size and anti-aliasing, and test, test, test.

Calibri + Arial or Helvetica

To my mind, this is the most drastic example of size differential. Calibri is small. Sandhu recommends using Gill Sans with Calibri.

Cambria + Times New Roman/Times and Georgia

Cambria pairs off well with Times New Roman, but is a bit narrower than Georgia. Also, it pairs off well with Linux’s Liberation Serif.

Candara + Trebuchet MS, Helvetica/Arial, Verdana, or Geneva

Canadara pairs fairly well with Linux’s Liberation Sans.

Consolas + Monaco, Andale Mono, or Lucida Console

Really, any monospace font could work with Consolas. Sizing is an issue, but not as much as with some of the others.

Constantia + Times New Roman/Times, Apple Garamond, or Georgia

Also pairs off well with Book Antiqua, the Palatino font family, and Linux’s Liberation Serif.

Patrick Hunlock provides an excellent comparison (in PDF format) between the 6 "C" fonts and their non-Vista cousins. Web designer Christian Montoya provides another such chart, also very good, and with the added bonus of some Linux fonts in the mix.

Advocating the Use of Vista Fonts in Designs

As noted above, most design-based criticisms of the use of Vista fonts center around the ClearType/anti-aliasing issue. But others don’t see that as a deal-breaker.

Christian Montoya is a strong advocate for using Vista fonts in design, explaining that he is tired of "star[ing] at the same ugly set of Windows fonts I’ve had to endure for years … as far as I’m concerned the new Windows Vista fonts are far better designed than their predecessors."

Stephen Coles, the co-editor of the influential typographical blog Typophile, wrote in 2008 why he believes Vista fonts aren’t being used more widely in site designs: "The Vista fonts are hampered by the anti-Microsoft sentiment common among designers. Perhaps there is also a segment of type users who see C[a]libri and the other C-fonts as made specifically for ClearType — for the screen — not for professional print design. Personally, I think the series is one of the brightest things Microsoft has done in years and they continue to school Apple on commitment to typography, but I haven’t seen much of the Vista fonts in offline use."

Typeface designer, James Arboghast, predicts that Vista fonts will become widely used "[a]bout a decade from now. These things take time to catch on."

References

1. Microsoft Windows – Versions – Wikipedia
2. OS Statistics – W3Schools
3. Daily Report – Jeffrey Zeldman Presents The Daily Report

Related Content

• The Essential Guide to @font-face
• A Basic Look at Typography in Web Design
• Comic Sans: The Font Everyone Loves to Hate
• Related categories: Web Design and Resources

About the Author

Michael Tuck is an educator, writer, and freelance web designer. He serves as an advisor to the Web Design forum on SitePoint. When he isn’t teaching or designing sites, he is doing research for the History Commons. You can contact him through his website, Black Max Web Design.

Go to Source

Everyone love free fonts. If you want to be a bit different, you can use these creative fonts to make sure that your designs will stand out.

Note: Before using any fonts on your projects, it’s important to read the licensing agreement!

Interested in seeing more articles about fonts? Also check out the following related articles:

• 45 Beautiful Free Fonts for Modern Design Trends
• Comic Sans: The Font Everyone Loves to Hate
• 25 High Quality Free Fonts for Professional Designs

1. MDRS-FD01

2. Labrat

3. TYPORM01 Round ans Square

4. SquaretypeB

5. Knarf art font

6. Velocity

7. Synthetique

8. Amputa Bangiz Standard TTF

9. Giant Head

10. Snickles

11. Times New Yorker

12. Vintage

13. GOCA LOGOTYPE

14. Parallello

15. Karabine

16. Infected

17. Facet

18. Drift Type

19. Multistrokes

20. Cat Basah Kental!!!

21. Que FONTita

22. Confessions

23. Madredeus

24. Vtks Revolt

25. Exus Pilot

26. VAL

27. Outlaw

28. Kilogram

29. Ballpark

30. Orial

Which ones are your favorite? Did you discover any new fonts that you downloaded and will use in your design projects?

Related Content

• 10 Free Apps for Managing Your Fonts
• 20 Websites with Beautiful Typography
• 20 Creative and Unique Typefaces
• Related categories: Resources and Graphic Design

About the Author

Tomas Laurinavičius is interested in web design, graphic design and web development, based in Lithuania. He’s also the founder of Iniwoo, a site about photoshop, web design, wordpress and inspiration. If you’d like to connect with him, you can follow him on Twitter.

Go to Source

Those all fonts may seem pretty similar with each other, but they’re actually not, notice little pixelation differences and choose your best pick suitable for your projects.

1. Advocut

2. Technicality

3. Aux DotBitC

4. Pixel Berry

5. Pixelation

6. Visitor TT2 BRK

7. Bitdust Two

8. Bit Low

9. Bit Trip 7

10. Bit Light 10

11. Bit Cheese 10

12. Bit Darling 10

13. Bit Daylong 11

14. FFF Harmony

15. Apple

16. Pixel Mix

17. PF Tempesta Seven

18. Redensek

19. C&C Red Alert

20. Large 9

21. Wendy

22. Nokia Cellphone FC

23. PF Ronda Seven

24. Unborn Editrion

25. RuneScape UF

26. Acknowledge

27. Alterebro Pixel

28. Retro Rescued

29. Pixel Arial 11

30. Uni 05

31. 00 Starmap Truetype

32. Proggy Fonts

33. Free Fonts by Cal Henderson

34. Free Fonts by Yusuke Kamiyamane

35. Charriot

36. Victor’s Pixel Font

37. Haeccity

38. YoungDantes

39. Silky Wonderland

40. Pixel Art Font

41. Skinny

42. Fuzzball Fury

43. bQUBIK

44. Ants on a Log

45. Dysfunction Circuit Caps

46. Minimal 5

47. Sample

48. Semplice Pixelfonts

49. Pixel Punch

50. Double Oh One

51. Visitor TT1

52. Silkscreen

53. Harry

54. Cubic Five

55. Deluxe Font

56.  Sevenet 7

57.  PF Tempesta Five

58. Type Writer

59. Pixel Ex

60. FFF Access

61. Dapixelfonts

62. 04B

63. HaxrCorp S8

64. Levi Windows

65. Wellbutrin

Go to Source

We have a new collection today, and this collection is for some amazing outline fonts, 20 catchy outlined fonts that you can use in different designs and ideas.

Before continuing reading this post did you already join our Twitter and subscribe to our RSS feed? If not, rush and join us now to receive updates of new posts and free resources.

Outlined fonts may work for you if you are looking for something lighter or if you’re trying to achieve a transparent feel. I know this type of fonts are not used frequently, but there are situations where outlined fonts are just right. I don’t want you to be unprepared – go ahead and check the 20 outlined fonts I put together below. All of them are free.

Variete Casino

Infected

Biscuit Tin

Picowhiteal

Punksnotdead

Incubus

Bicho

Clink Outlined

Bugebol Huomenna

Blood Crow Shadow Condensed

Clementine Sketch

My Turtle

Grutch Shaded

Phorssa

Jamaistevie

Pink Bazooka

Bobo White

VPS Phuoc Long Hoa

Technique OL Brk

Spaceout Open

Related topics you may like to read

• 20 Free Fonts for Your Creative Projects
• 10 Gorgeous Free Fonts For Web Designers
• Fonts You Do Not Want to Use!!
• Free Fabulous Bitmap Pixel Fonts
• Amazing Free Hand Drawing Fonts
• Extraordinary Free Fonts Collection
• Way Cool Free Fonts to Download
• Cool new fonts for free download

Go to Source

The new and improved Firefox 3.6 is now available as a free download for Windows, Mac and Linux.

There isn’t much new to look at on the surface, but we’d strongly recommend you upgrade to Firefox 3.6, based on the work that’s been done to improve the browser’s speed and support for the latest web technologies.

Thursday’s release brings significant performance boosts and a number of new features like support for custom skins, full-screen support for native web video and much-improved font support for developers looking to use new fonts on their sites.

It arrives only six months after the previous version, Firefox 3.5. The shorter-than-usual wait between versions means that Firefox 3.6 doesn’t have quite as many new standout features as 3.5 brought to the browser when it debuted. But we don’t want to give the impression that Firefox 3.6 is only an incremental performance upgrade from the previous version.

A Nimbler Fox

The fact is that there’s quite a bit of new technology under the hood. Users who spend the bulk of their day in JavaScript-heavy web apps — which these days is most of us — will notice faster page loads thanks to improvements to the browser’s rendering engine. Much of the added speed is due to enhancements to TraceMonkey, Mozilla’s JavaScript-rendering engine.

Not only does the tweaked TraceMonkey speed up webpage rendering, it’s now available to speed up Firefox UI elements written in JavaScript. That change means the Firefox interface is snappier, and — when combined with the new version of Gecko, Firefox’s core rendering engine — there’s a noticeable improvement in Firefox 3.6’s overall performance.

In our testing of pre-release versions (the last of which were nearly identical to the final code), JavaScript-heavy sites like FriendFeed, Facebook and Gmail loaded faster, and the browser’s initial startup time was much better than with Firefox 3.5 — especially if you’re reopening a large number of tabs.

Also new under the hood is the new about:support page which offers a simple place to look up all the pertinent information about the current Firefox installation, including a list of installed extensions, any user-modified preference settings, links to installed plug-ins, and other configuration details.

Fullscreen HTML5 Video

Firefox 3.6 now supports fullscreen video playback through native HTML5 video embeds. Just right-click a video embedded using the HTML5 video tag and you’ll see a new menu item for full-screen playback.

Currently video on the web is generally embedded using proprietary technologies like Adobe’s Flash Player or Microsoft’s Silverlight plugin.

Native HTML5 video will give users a way to watch movies online without the need of third-party plug-ins.

Firefox previously supported HTML5 native video but lacked the ability to play those videos in full-screen mode, an oversight that Firefox 3.6 corrects, putting open source video on largely equal footing with proprietary technologies like Flash or Silverlight.

Curiously, Firefox 3.6’s release comes only a day after YouTube announced it would begin supporting playback of embedded videos with HTML5, albeit using the h.264 codec which Firefox does not support, as it’s proprietary. Mozilla prefers the open source Ogg Theora video format instead.

More Web-Standards Support

Web developers and open-web proponents alike will be happy to hear that quite a few new features in CSS 3 have made their way into Firefox 3.6. Firefox now supports the background-size property as well as some cool tricks for handling background images with CSS. Designers can specify the size of background images on web pages, stretching them by dictating what percentage of the browser window’s width they take up.

There are also some new methods for applying gradients to page backgrounds, enabling designers to create more interesting, colorful backgrounds without using images at all, just by defining a few colors in their HTML.

Firefox 3.6 also supports the Web Open Font Format (WOFF), which allows developers to use server-side fonts to build better typography into their designs.

Personas

Firefox 3.6 brings built-in support for lightweight themes, which Mozilla calls Personas. Personas have been around for a while (you can even sync them across multiple browsers if you’re running Weave, Mozilla’s syncing tool), but installing Personas previously required a separate extension to manage them.

Now Personas can be installed right out of the box, allowing you to tweak and theme Firefox as you’d like. Although Personas don’t offer quite the options of full-fledged themes, they’re much easier to create and install. If you’d like to try out some custom themes, head over to the Personas site.

Improved Tab-Switching Previews

Also new on the tab front are the long-awaited preview thumbnails in Firefox’s built-in tab switcher, which have finally arrived, sort of. The tab previews have been in the works for quite some time, and — sadly — enabling the previews will still require a trip to about:config (set browser.ctrlTab.previews to true).

Unfortunately for Windows 7 users, much of the Windows 7 integration — like Aero tab previews and jump lists — did not make the final release. Not officially, anyway.

According to Mozilla Director of Firefox Mike Beltzner, support for Windows 7’s Aero Peek tab previews — the page and tab previews available in the Windows 7 task bar — can be enabled in the about:config page. But the feature wasn’t quite ready to be switched on by default.

If you’d like to turn it on now, just be aware that sometimes the previews don’t render properly. Look for this one to be officially turned on by an incremental update in the near future.

Security Enhancements

Firefox 3.6 includes the ability to check for out -of-date plug-ins and will point you to the offending plug-in’s website to download the latest version.

The primary target here is the Flash plug-in, which previously had no update mechanism in Firefox and could leave Firefox users vulnerable to attack even if the browser itself was up-to-date.

Mozilla has also changed the way third-party add-ons integrate with Firefox. The Firefox components directory is now off-limits to third-party tools like Firefox add-ons. The move is mainly designed to make Firefox more stable by preventing add-ons from accessing lower-level tools that could cause crashes.

According to Mozilla, there are no features to be gained from accessing the components directory, so your favorite add-ons should not be adversely affected by the change.

Why the Long Wait?

Although the turnaround time for Firefox 3.6 was faster than its predecessor, Mozilla was still plagued by delays, and it released an unprecedented five beta versions to testers before Thursday’s final release.

However, while there were more betas than previous releases, according to Mike Beltzner, Mozilla’s Director of Firefox, the overall development time was actually shorter.

“We did something very different with betas this time around, and this has been one of the shortest beta periods in terms of calendar time that a Firefox release has ever had,” Beltzner tells Webmonkey.

“Once people have agreed to test a beta, it’s our responsibility to give them updates as quickly as possible. Instead of spending three to four weeks making changes and releasing a beta, for Firefox 3.6 we decided to create a beta version that would be updated every one or two weeks with the latest changes.”

He says that cranking out more betas at a faster pace made development smoother and allowed for more feedback from Mozilla’s community of over 600,000 beta testers.

Conclusion

Firefox 3.6 is not the radical overhaul that Firefox 3.5 offered, but the latest version is a worthy upgrade nonetheless. The welcome speed improvements combined with the UI changes and expanded HTML5 support make Firefox 3.6 a must-have upgrade.

We’re already looking forward to the next version of Firefox, tentatively listed as Firefox 3.7, which, with any luck will bring isolated tabs for application crashes (a la Google Chrome), integration of the Ubiquity add-on into the Awesome bar and of course, even more enhancements for HTML 5.

See Also:

• YouTube Embraces HTML5, But Stops Short of Open Web Video
• Firefox 3.6 Beta 1 Arrives: More Speed, Better Video, New Tab Tricks
• Mozilla Throws Its Weight Behind Improving Web Type, Adopts WOFF for Firefox
• Firefox 3.6 Aims to Bring Fullscreen, Open Source Video to the Web

Go to Source

Despite some inconsistencies between browsers (not Typekit’s fault) and a few other quirks, we found Typekit to be a viable option for web designers looking to incorporate custom fonts into their designs.

Typekit is like a YouTube for fonts. Browse through Typekit’s library of available fonts, pick one you like and cut-and-paste some code into your site. As we noted when we first looked at Typekit earlier this year, the service is one of the easiest ways for web designers to use creative fonts without sacrificing web standards or violating font licenses.

Of course that ease and convenience doesn’t come without a price. There is a free trial option for Typekit, which allows you to test out the service. But if you’re serious about custom fonts, you’ll want to go with one of the paid options which range from $25 to $250 per year. The more you spend, the more font choices, domains and bandwidth you’ll get.

Typekit arrives at a time when type on the web is at a crossroads. For years, designers have been limited to using only a set of five or six common fonts on web pages. But thanks to new font rendering tools within the emerging HTML5 and CSS3 standards, web designers now have the ability to use newer, more visually interesting typefaces — and make that type appear more consistently across browsers, operating systems and screen resolutions. Even with these new abilities, intervening forces like DRM, licensing restrictions and varying levels of support from the browser makers have stalled progress, forcing the modern designer to resort to a variety of workarounds and hacks if they want to use these new fonts.

Along with Typekit’s arrival, we’ve seen other promising developments recently, like the move by some browser makers towards adopting a new font format called WOFF which would allow better control over layouts and designs.

To see how Typekit performed in the wild, we opted to try out the free option and see if Typekit was good enough to warrant the expense. The short answer is yes, but with some drawbacks.

Before you dive in to Typekit, it’s important to remember the one very large caveat — Typekit only works in browsers that support the CSS @font-face rule. That means Firefox 3.5 and higher, Safari 3.4 and higher, and Internet Explorer 6 and higher.

While that’s not ideal, the good news is that browsers that don’t understand Typekit’s fonts can simply fall back on a default you’ve defined.

There is another slight problem, though. In some cases, fonts rendered in browsers on Windows XP can look jagged and difficult to read. The problems is that Windows XP often doesn’t have anti-aliasing turned on by default. Of course it’s worth noting that even if you don’t use @font-face, standard fonts will also be jagged on such systems. The difference is that most of the standard fonts are still readable, while in some cases custom fonts become a total disaster.

To get started with Typekit, just create an account and tell Typekit the domain where you’ll be serving the fonts. We were happy to see that Typekit will support the localhost domain for testing purposes, something many online services and APIs overlook.

After your account has been created and your domain set up, Typekit will then give a snippet of HTML to include on your site. The code simply loads Typekit’s JavaScript library, all you need to do is paste the HTML in the <head> of your site.

Now it’s time to pick some fonts. Typekit’s range of fonts depends on the amount of money you want to spend. For a trial account you’ll have just under 70 fonts to choose from. The “personal” library ($25/year) has roughly 230 fonts and the full library ($50/year) nearly 300.

The Typekit font browsing interface is very well designed and offers some nice tools for choosing a good font — like a live-preview of the font and numerous size previews for judging readability.

Typekit’s live preview tool with custom text. Click the image for a larger view.

Once you’ve selected a font, you’ll need to configure it for your site. The Typekit Editor lets you control which CSS selectors your custom fonts will be applied to, which weights and styles to use and what font to fall back on for browsers that don’t understand @font-face.

If you’d rather apply a font to all elements on your site, you can define your own custom font-family rules in your CSS file, for example h1 {font-family: "tenby-seven-1"} would apply the Tenby Seven font to all headlines on the site.

Typekit’s editor tool for customizing fonts. Click the image for a larger view.

The next step is to publish your font, which then makes it available on your domain.

The results looked great in our testing, especially in Safari 4, which seems to render type a bit thinner than Firefox on the Mac. On the Windows side the results were roughly the same between browsers that supported Typekit.

One thing that seems unavoidable with @font-face, whether it’s through Typekit or otherwise, is a brief flash of un-styled text. It’s annoying, but for now there doesn’t seem to be anything you can do about.

There are some other drawbacks — the need for JavaScript and the additional data that increases page load times — but so long as you’ve already accepted @font-face’s shortcomings, Typekit makes the process of using it simple and easy. Other possibilities for broadening your type selection include Typotheque and a new service Kernest.

See Also:

• Typekit Hopes to Become the YouTube of Fonts
• Boing Boing’s Redesign Uncovers the Dark Side of Web Fonts
• Typotheque’s Web Fonts Rock, But Old Machines Can’t Learn New Type Tricks
• The Future of Web Fonts Looking Brighter

Go to Source

Firefox 3.6 beta 2, released Wednesday, brings 190 more bug fixes to the table and offers the same performance boosts we saw in the first beta release. Firefox 3.6 also includes a number of new features like support for Personas, native tab-previews for Windows 7 and Web Open Font Format support for developers looking to use new fonts on their sites.

For a more in-depth look at what’s coming in the next version of Firefox — due to arrive in final form sometime before the end of 2009 — have a look at our coverage of the first beta release.

While Firefox 3.6 is still a beta release, if you’d like to test out the new features you can grab a copy from Firefox beta page. Also, if you’re running beta 1, you’ll notice Firefox probably gave you an alert as soon as beta 2 was ready.

So far, we haven’t noticed any show-stopping bugs in beta 2, but keep in mind that most extensions haven’t been updated to work with this release. That said, a few of our favorites do indeed work, notably AdBlock Plus and Firebug, though in both cases you’ll need to make sure you have the latest versions of the add-ons.

You can help out add-on developers by grabbing the Add-on Compatibility Reporter, which will run all your extensions even if they haven’t been updated. Any resulting bugs or strange behaviors can be easily reported to the developers through the Add-ons Manager.

See Also:

• Firefox 3.6 Beta 1 Arrives: More Speed, Better Video, New Tab Tricks
• Mozilla Throws Its Weight Behind Improving Web Type, Adopts WOFF for Firefox
• Mozilla Readies Windows 7 Support for Firefox 3.6

Go to Source

Pixlr

Pixlr is a powerful online image editing application. Although it can’t do everything Photoshop can do, it has some very impressive features considering it is all done within the browser.

Google Analytics

Google Analytics is probably the most popular free analytics tool available. It has loads of features including custom views and reports, access sharing, and integration with adsense.

Typetester

The Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated.

CSS Type Set

CSS Type Set allows you to visually and interactively style text and it generates the CSS.

net2ftp

net2ftp gives you a fully featured ftp client within your browser. There’s even a skin designed for the iPhone.

WhatTheFont

WhatTheFont allows you to scan in or provide the URL of a font and it will tell you what it is.

Color Scheme Designer

Color Scheme Designer has been around for a while, but was just recently updated with a brand new interface and a new color scheme generating engine.

Fontstruct

FontStruct lets you quickly and easily create fonts constructed out of geometrical shapes, which are arranged in a grid pattern, like tiles or bricks.

Kuler

Kuler is a community driven web app that lets your browse color palettes created by others. You can also create your own by using the color wheel, harmony rules, and color sliders.

Bespin

Bespin is an online code editor by Mozilla. It allows you to write and edit code, share projects, and connect to existing open-source projects.

Adobe BrowerLab

Adobe BrowerLab gives you the ability to preview and test your websites in multiple browsers and operating systems. Since building a website to be cross-browser compatible is one of the more annoying aspects of web design, this should be a valuable web app to all of us.

W3C Markup Validation Service

The Markup Validator is a free service by W3C that helps check the XHTML and CSS validity of Web documents.

ViewLikeUs

ViewLikeUs allows you to check out how your website looks in the most popular resolution formats. It’s all powered by Ajax & PHP.

ColoRotate

As well as being a useful way to choose colors, ColoRotate looks cool and is actually fun to use. Instead of using two dimensional viewers, it presents color palettes to you in 3d and in real time.

Pingdom Tools

Pingdom Tools allows you to run load time tests on your web pages. It mimics the way a page is loaded in a web browser. The load time of all objects is shown visually with time bars. You can view the list of objects either in load order or as a hierarchy. The hierarchy view allows you to see which objects are linked to in for example a CSS file.

Go to Source

Mozilla announced Tuesday that version 3.6 of Firefox, due by the end of the year, will support the new Web Open Font Format, or WOFF. Web authors will be able to include WOFF fonts in their page designs by linking to the font files in their code the same way they link to images and other downloadable files.

WOFF becomes the third downloadable font format supported by Firefox — version 3.5 included support for TrueType and OpenType font downloads.

But WOFF has two key advantages over TrueType and OpenType: WOFF fonts are compressed, so they download faster, and they include support for tags and other unencrypted metadata.

This is a significant step forward not only for the emerging open format, but also for type on the web in general, which is still stuck in a state of mild turmoil.

For years, designers have been limited to using only a set of five or six common fonts on the web. But thanks to new font rendering tools within the emerging HTML5 and CSS3 standards, web designers now have the ability to use newer, more visually interesting typefaces — and make that type appear more consistently across browsers, operating systems and screen resolutions.

Even with these new abilities, intervening forces like DRM, licensing restrictions and varying levels of support from the browser makers have stalled progress, forcing the modern designer to resort to a variety of workarounds and hacks if they want to use these new fonts. Some possible solutions have shown up, including the OpenType standard and a “middleman” licensing model proposed by the start-up Typekit, but haven’t yet gained traction. Earlier this month, popular website Boing Boing launched a redesign using CSS3’s @font-face rule, but ran into problems when things didn’t render correctly on older machines.

WOFF doesn’t promise to totally solve the problem of browser compatibility — it still uses the same paradigm within CSS3’s @font-face rule where users are served a preferred font choice first, but are then offered backup choices if their browser doesn’t support the first one. And there are still special considerations for IE 8 users, as Microsoft’s browser supports @font-face, but only if you use the .eot font format.

What it does do is improve workflows for those using downloadable fonts in their designs.

Mozilla contributor John Dagget outlines the compression and tagging advantages on the Mozilla Hacks blog:

First, compression is part of the WOFF format so web authors can optimize the size of fonts used on their pages. The compression format is lossless, the uncompressed font data will match that of the original OpenType or TrueType font, so the way the font renders will be the same as the original. Similar compression can be achieved using general HTTP compression but because compression is part of the WOFF format, it’s simpler for authors to use, especially in situations where access to server configuration is not possible.

Second, the format includes optional metadata so that a font vendor can tag their fonts with information related to font usage. This metadata doesn’t affect how fonts are loaded but tools can use this information to identify the source of a given font, so that those interested in the design of a given page can track down the fonts used on that page.

Dagget also notes that WOFF fonts aren’t “secure,” so the format shouldn’t be used by foundries wanting to regulate the use of their work. However, over 30 major type foundries — including House Industries, Hoefler & Frere-Jones and ITC — are already endorsing the format, and Mozilla’s support should help foster its popularity.

You can read more about how WOFF is used, plus see examples on the Mozilla Hacks blog. You can also check out WOFF support yourself by downloading the latest nightly builds of Firefox and giving it a whirl.

See Also:

• Boing Boing’s Redesign Uncovers the Dark Side of Web Fonts
• Typekit Hopes to Become the YouTube of Fonts
• Use @font-face Today With Free, Legal Fonts

Go to Source

This week on Designers Book Shelf I got a lot of reading suggestions for you. Every Tuesday I will be posting new suggestions of books for designers and everyone that loves design and art in general. Check out what I have for you this week and stay tuned for more next week.

<!–break–>
If you interested in sending your book suggestions, leave a comment or email abduzeedo@gmail.com with the subject Designers Book Shelf .

Special thanks today for the suggestion of Leandro Oliveira.

Playful Type: Ephemeral Lettering and Illustrative Fonts

by R. Klanten (Author), H. Hellige (Author)

Price: $43.47

Book Description

Graphic designers have always developed and designed new fonts for application
in individual projects. Playful Type discovers a new and young generation
of designers who are applying typography beyond the classical typeset and creating
a dynamic range of playful and illustrative fonts and ephemeral lettering.
Playful Type examines how designers today are creating typography with the aid
of a multitude of different techniques. From manual lettering, calligraphy and
collage to manipulative time exposure of photographs, designers are developing
fonts for the moment which are irregular and often accidental. Blocks of ice are
even being staged as real characters and paper cut forms and shadows metamorphose
into letters and spatial installations. This book shows such cuttingedge
examples of elusive scripts that are being translated into serially employable
alphabets to be used digitally with the computer.
Playful Type presents an inspiring collection of illustrative fonts and hand-made
typography created from a variety of cutting-edge approaches and indicates
current development in font design.

Customer Review

(amazon)
At first glance the cover was not all that inspiring, but when cracking it open it will put your mind in awe of the majority of the work. It brings my back to my childhood when cutting up paper and having an untainted imagination ran rampid. If you are into hand cut and imaginative creations this is the book for you.

Logo Savvy: Top Brand Design Firms Share their Naming and Identity Strategies

by WOW Branding (Editor)

Price: $29.20

Book Description

After the business plan, the first step for any new company is choosing a name-a seemingly simple activity which can be extremely challenging. The next and equally challenging step is designing a logo that is eye catching, appropriate, and reflective of the chosen name of the business. Even for the seasoned designer, this is a remarkably difficult task.

Logo Savvy will help readers understand how to define the right approach and achieve an innovative and unique solution for both the name and the logo design. Chapters showcase companies whose identities have evolved visually through the introduction of a great name, as well as companies which have developed a visual identity in tandem with a name. Case studies, corresponding side bars, and tips provide designers with the inspiration and tools they need to find the right approach for their own clients.

Customer Review

(amazon)
This is a superb logo / corporate image book. It was my top choice out of a stack of 20 from the local Borders and well worth the investment for some great inspirations. The text information on how each logo/branding concept was arrived at, how challenges were met and goals incorporated, is a fascinating look into the industry, particularly for anyone who hasn’t worked for a major ad company before, and the processes are applicable even for smaller designers and advertisers. My favorite thing about this book was being able to see several of the original conceptual illustrations, including logo concepts that were rejected, designer notes, and the piece-by-piece elements that eventually led to the final client-approved design. Of course, it wouldn’t be a great logo book without lots of inspiring logo images and full-color pics of how the logos were implemented into billboard ads and building signage, product packaging, and other print media. Overall, this one is definitely a keeper.

From Design Into Print: Preparing Graphics and Text for Professional Printing

by Sandee Cohen (Author)

Price: $23.09

Book Description

A designer in New York creates a beautiful design but when she prints it the colors become muddy. An art director in Seattle sends a file to the print shop, and they call him to say the job won’t print. The editor of a college paper can’t figure out why all the pictures in the paper are jagged. And a freelance designer is Chicago needs to bid on her first print job. Linescreen, DPI, CMYK, RIPs, bleeds, spots, and spreads: Why didn’t they teach this stuff in design school?

Sandee Cohen comes to the rescue, whether you’re producing your first newsletter or you’re an experienced graphic designer who needs to come up to speed on professional-level printing. She’ll tell you how to make your desktop printer behave, and will take the mystery out of dealing with print providers. You’ll learn all the necessary techniques, the terminology, and the rules of printing (and when you can break them). It’s like having your own production manager standing over your shoulder. The copious information in From Design Into Print will have your designs looking as stunning in print as they do on your monitor.

Customer Review

(amazon)
I agree that this book is a “must have” for all but the most experienced professional graphic designers. I promise that the rest of us will learn useful concepts and facts. You may also learn the reasons behind other concepts that you thought you already understood. This book will be a quick reference for me — within arm’s reach in my studio.

As you can see from the Table of Contents, the scope of this book is rather broad but it is very readable and authoritative. It is beautifully produced (of course!) and engaging. For instance, the quizzes are practical and often fun. My favorite quiz was matching ten CMYK values with ten named colors — sort of a crossword puzzle for colorists. How you use the book will depend upon your own experience. You mileage may vary but you will enjoy the ride.

Street-Smart Advertising: How to Win the Battle of the Buzz
by Margo Berman (Author)

Price: $23.95

Book Description

Even the most creative mind needs stimulation. The more inventive pieces it takes in, the more resources it has to draw from. That’s why many advertising creatives keep their own clip files. Street-Smart Advertising contains a plethora of examples designed to jump-start the right side of the brain. It is packed with memorable uses of new media, exciting on-strategy marketing, creative online work, insightful quotes by giants in the advertising industry, and exercises to strengthen creative thinking. Students and practitioners alike can reference this book for fresh campaign concepts, unusual visual treatments, innovative media ideas, powerful writing techniques, brainstorming methods, and more.

Customer Review

(amazon)
Margo Berman’s enthusiasm and expertise for creativity and advertising really shine through on every page of this book. As someone who is very knowedgable about marketing but not so much about advertising, this book really added to my knowledge. It has served as a great resource over and over again. If you are interested in reading it front cover to back page, you can and you will learn much from the real-life “street smart” examples. The exercises help you apply the information. However what I find most useful about the book is that each chapter stands up by itself. I read the material and do the exercises and really feel I understand the material. It is like a mini-course in each chapter. Thanks again Margo for providing so much of you in this book!

About the author

Hi! I’m Paulo Canabarro and I’m here to post some really cool stuff for you, if you have any ideas or any requests please get @ me – paul0v2@abduzeedo.com you can also Follow me on twitter!

Sponsored Links:

Go to Source

CSS Type Set

CSS Type Set allows you to visually and interactively style text and it generates the CSS.

Typetester

The Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated.

Typechart

Typechart lets you flip through, preview and compare web typography and then grab the CSS.

WhatTheFont

WhatTheFont allows you to scan in or provide the URL of a font and it will tell you what it is.

Fontstruct

FontStruct lets you quickly and easily create fonts constructed out of geometrical shapes, which are arranged in a grid pattern, like tiles or bricks.

Baseline Rhythm Calculator

Baseline Rhythm Calculator generates CSS from a base font size and line height entered by the user.

PXtoEM

PXtoEM is a calculator that does conversions of pixels, em’s, points, and percentages.

Font Burner

Font Burner gives you a simple block of code to put in your webpages so you can transform your headlines from boring system fonts to any of the quality fonts in their archives.

TypeNavigator

TypeNavigator is the world’s first interactive visual font search system.

Font Tester

Font Tester is a free online font comparison tool. It allows you to easily preview and compare different fonts side by side with various CSS font styles applied to them.

Flipping Typical

Flipping Typical allows you to enter text and then preview it in many different fonts at one time.

Identifont

Identifont lets you identify a typeface from a sample by answering a series of questions about key characteristics.

STC FontBrowser

STC FontBrowser lets you preview all of the fonts active on your computer.

Convert TrueType Font to Sifr Flash File

The name of this one is self explanatory, plus it emails the Sifr file to you.

Go to Source

It works like a wiki, anyone can join, add & edit pages for typefaces or for the people behind the types.

It is possible to find out details about fonts like: 

• the designers
• foundries
• country of origin
• release year
• & more..

The resource is not complete yet (and won’t be, as new fonts are created everyday) but growing & becoming a very useful resource.

Typedia also offers some other great information under the "Learn" section.

Special Downloads:
Ajaxed Add-To-Basket Scenarios With jQuery And PHP
Free Admin Template For Web Applications
jQuery Dynamic Drag’n Drop
ScheduledTweets

Advertisements:
SSLmatic – Cheap SSL Certificates (from $19.99/year)
Dreamhost $50 Discount Code: WRD
Follow WebResourcesDepot At Twitter And Get More Resources!

Tags: TrueType

Related posts

• Typeface Sharing: Open Font Library
• Turn Your Handwriting Into Fonts: YourFonts
• Top 500 Fonts Of All Times: Fonts 500
• Free Fonts Showcase: Font Squirrel
• 1000s Of Well-Categorized Fonts: Free Premium Fonts

Go to Source