Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

November 08 2013

11:00

Deal of the Week: Verb, Family of 72 Superb Fonts for 50 Cent Each


  

Our Deal of the Week features a font family for which the term "family" is not really fitting as a family is a comparably small unit of society. Verb, which by the way is the name of our featured font "family", is more like a font tribe with its 72 different fonts. Verb is able to suit any modern design with one or the other part of its tribe’s members. From decently serious to happily partying, any message can be conveyed convincingly. Verb is like the mother of all Sans Serifs, to be a little pathetic…

July 22 2013

14:00

Next to Naught: Nexa Slab Font, Typeface with Multi-National Characterset, Dirt-Cheap


  

Fonts are plain sailing. There is no shortage. Even freely usable fonts are no rarity. Google Fonts even offers a few hundreds of beautiful variants. But, what if you want your design stand out from the rest? What if you are not into buying at the next Trader Joe’s? What if you need multiple language support? Things get a little more complicated, then. Today we got something for you. Keep calm and read on…

July 04 2013

06:30

Grab Beautiful Samantha Script Font As Long As It’s Almost Free!


  


  

Fonts can make or break a project. Whether it’s on a T-shirt, an ad or a headline on a website, if a font is boring or really hard to read, you’ve already lost your audience. Finding the right elegant font can be particularly tricky, though, since the intricate detail can often render your words illegible. There’s no shortage of fonts on the web, yet the really good ones, the outstanding ones often come with price-tags that immediately raise your blood-pressure. On the other hand, pricy fonts are not used by everyone. Chances are, that you’ll not find them in each and every brochure or pizza menu out there.

September 04 2012

06:04

Typicons: Free Icon Font with 88 Symbols


  

Stephen Hutchings from Australia undoubtedly brought forward an intelligent new term when he called his icon font Typicons. Nevertheless, Typicons are just that, an icon font, but a good one with 88 pieces. Typicons are especially useful in app-design as most of the symbols relate to user interface aspects typically needed for controlling functionality. I guess, Hutchings had development for mobile clients in mind when he created the symbols.

Typicons: only a few examples

Typicons: a grid of 24 square pixel, but scalable to any size

Even though they have their downsides, web design without icons is unthinkable these days. Several methods of icon usage have been established. At first, icons were implemented via separate files, which led to separate http-requests for every single file. For reasons of performance optimization, modern websites should try to invoke only as many requests as absolutely unavoidable. Separate icon files have proven not to be the right method. Next came and still stay the so-called sprites. Here we have only one file which includes all the icons needed. To display a certain symbol, we use CSS to locate only a part of the whole file and show this sprite to the user. This method is established, but has its downsides too. If you’d want to serve different devices and/or different resolutions, you’d have to provide different sprite-files, which certainly means a higher effort in producing them. These would have to be targeted using media queries, which you’ll not always want to use.

Freely scalable icon fonts are the cure to these pains. You don’t need to worry about their resolution even on the new iPad, the new MacBook Pro or other HiDPI-screens. That’s where Typicons come in.

The download weighs in at 1,6 MB and contains the necessary font files (EOT, SVG, TTF, WOFF) as well as the corresponding CSS for easy implementation into your own website. On top of this, Hutchings provides you with vector files in the formats of Adobe Illustrator and EPS (encapsulated Postscript), thus leaving nothing to be desired. Experienced designers can take and modify the icon set to open up new use cases.

Typicons are shared under a Creative Commons Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0) license. That means they can be used free of charge for personal as well as commercial projects. You must attribute the work in the projects you use it, typically by providing a backlink. If you alter, transform, or build upon this work, you may distribute the resulting work only under the same or similar license to the one, Hutchings shares it under. Fair enough…

Related links:

December 26 2011

21:00

5 Tools to Help You Identify any Font

The Internet is full of gazillions of fonts that can, at times, make life tough if you are looking to find the name of a particular font. You know, those situations where you have the font but you don’t have its name? You know it will work. You like it. But, you cannot use it because you don’t know what it is called. Such a situation can baffle any web or graphic designer at the best of times. Thankfully, technology comes to our rescue in such a scenario. This article will list down some of the famous Font Identifying Tools that make life easy when you are stuck. Also, I will test these tools quickly to gauge their authenticity. Each time I will pick a random font from Da Font and see if these tools can identify it.

1. What The Font


I quickly download Katakana Font and surprisingly What The Font smartly judged what font it was.

2. What Font Is


Personally, I am not happy with What Font Is. I tried to run five different fonts through this tool but none of them were identified successfully. The sad part was that the results weren’t even close when I ran DOC 510 through the tool which looks pretty simple. I would have been satisfied if the results were close to what I was looking for but that wasn’t the case. Some of the downsides of the tool are:

  • Limitation of taking only 10 characters as input. If you enter an image which has more than 10 characters then it will result into error.
  • You will have to enter corresponding characters for at least two characters on the image if you want results. It will result into an error if you enter nothing. Surprisingly, What The Font does good job at guessing the characters on its own and then lets you change them if you feel so. It surely has an edge over What Font Is.
  • Sometimes the tool fails to break an image into individual characters henceforth the results are broken too. This happened when I used Levitee as test image. This wasn’t the case with What The Font.

3. Identifont


Identifont uses a different technique to identify your font. You will be asked to answer a set of questions that will help the algorithm identify your font. The approach isn’t the best way to judge a font and this is quite clear with the results that you get. But, I still appreciate the amount of accuracy that Identifont can achieve.

I used Varsity Font to test Identifont and the result wasn’t exactly what I was looking for but it was quite close. See the results below.

4. Typophile


At the end of the day you might just realize that only humans can help you. When program codes fail and answering questions give useless results then I will suggest you seek help from some experts. Typophile is the largest community of font experts. You post your image and you will quickly get a reply about the font which is being used. A discussion will shoot up on your question and you will love it. Remember to contribute back to the community.

5. Font Finder Firefox Add-On


Here goes an imported tool to explore the world of typography. The Font Finder Firefox Add-On is surely going to interest most of you. The tool comes in handy when you want to know the font of the selected text. Also, the tool smartly explains all the CSS styles that are connected to that font. Just select the text, hit right-click of your mouse, and opt for Font Finder. The add-on will compile the list of complete CSS code that is part of that text.

You can even play with a website by changing its font to see if it will look better with the font of your choice. See how I changed 1WD’s font just for the sake of testing.

Bonus: Yellow Pages for Fonts


Image Credit

Enough of asking! The last way out is to help yourself. Rookledge’s International Typefinder is surely the bible of fonts. It is the ultimate dictionary for fonts. You might end up spending some time with this book but the time spent will be worth it. The book’s secret advantage is its sidebar that highlights some of the most important features of a font.

Conclusion


The font industry might have grown a lot but requisite tools that help you identify the exact font are yet to be launched. What we have is the first phase of font identifying tools and they have a lot of room to grow. I am not sure when we will have more accurate tools to use but until that time we will have to stick with the available options.

December 22 2011

16:32

Blanch font family, free download

In August I featured the Fruita Blanch brand identity on Identity Designed.

Today, Albert Estruch from Atipus (the Barcelona-based studio behind the Fruita Blanch identity) is giving away an early Christmas present — a free download of the Blanch font-family.

Blanch font family

“Blanch is a display typeface for the ‘Fruita Blanch’ brand, a family-run company which, for four generations, has dedicated itself to the cultivation and marketing of sweet fruits.

“This typeface family came about from a search for a traditional font with a contemporary feel which reflected the Blanch products; artisanal recipes, adapted to our modern times.

“This is a modular typeface family halfway between a 50s style sans serif and the range of numerical characters which most labelling machines use. These are seemingly contrasting concepts which lend themselves to the creation of an atypical font. The Blanch typeface family is comprised of 6 different font weights; 3 condensed weights and 3 caps weights. They are: Blanch condensed, Blanch condensed inline, Blanch condensed light, Blanch caps, Blanch caps inline, and Blanch caps light.”

Blanch font family

Blanch font family

Blanch font family

Blanch font family

Blanch font family

Blanch font family

Get the TrueType font family by downloading this ZIP:

http://www.atipus.com/tipoblanch.zip (1.4MB)

Thanks, Atipus.

Check the Fruita Blanch application on Identity Designed.

Published on David Airey, graphic designer

Logo Design Love, the book

Related posts on David Airey dot com

November 24 2011

10:00

A Short Course On How To Improve Your Website’s Typography

Typography is one of the most difficult things to sort out when designing, especially because with the amount of typefaces a designer can use, it’s almost impossible to choose the best one without spending hours on it. A simple search on Google will show you that there are hundreds of thousands of fonts, most of them even free of charge; and the number increases weekly. This means the decision is even harder to make today than it was last year.

And it is not only about the typefaces available, but mostly about the skills a designer has. There are Universities that teach typography throughout years, because it is a deep field. Knowing alignment rules, kerning, hierarchy and other terms like these is crucial in making your text say something specific.

The good part is that good typography alone is enough to create a powerful visual identity or design. Being able to hit the right mark with the typography is critical and therefore I will share with you several tips on how to improve your typography skills.

Good typography matters because it plays a vital role in web design. It generates a hierarchy (most of the time visual) and makes the text easier to read and follow. Typography is not only about looking good, but also about providing a functional advantage to the text – being easier to follow and read.

It is important to design with the idea that the result has to mean something. It is even more important to think of the information you want to give to the visitors and how you want to do this. Every typeface says something about itself, so think also about the way you want to transmit the message. Looking at the picture below should make you understand what I mean, even if you don’t have that much knowledge of typography.

The same word has been written with four different typefaces and they create a total different impact. While the one written with Impact creates the most powerful visual attraction of all (the name is not a coincidence at all), the one with Helvetica Neue looks more modern, fine, polished and sleek. The one written with Ethnocentric seems the most modern of them all, but might be difficult to use for something other than titles or headings. The reason why this is will be discussed right away.

"Interaction" written with Helvetica Neue, Impact, Italianate and Ethnocentric.

 There are more font classes in the world, but only two of them are of such importance that everybody should know about them: serif and sans-serif. The difference between them is the “serif”, which are small additional endings at the end of the strokes – specific of the serif fonts. “Sans” comes from French and means “without”, so it is quite obvious which is which.

The serif fonts are usually used in printed material such as newspapers or books. However, magazines employ sans-serif fonts because they are “cleaner” and are easier to read when the font size is small. But according to studies, the serif typefaces may be easier to read in print, while sans-serifs are better on-screen, especially in low font size and low resolution.

The good part about the new technologies on the web are that even if your computer does not have a font you might like to have, downloading it is only few steps away. Moreover, embedding the font into your site, so that everybody who visits it sees the text with the typeface you want, is possible as well now, so why not use this if you can? I would like to show you two examples of websites with integration of custom typefaces, and then we’ll come back and discuss why are they successful.

Egopop Design Studio uses a custom-made font.

Chirp has a funny custom-made font as well.

The success of these two webpages, and many others for that matter, is also given by the way they made use of typefaces. Maybe tomorrow you will not remember what the website was about, but it is very likely you will remember the website itself, because it creates a powerful visual impact – and this is the first step into having a web identity worthy of remembering. This is what a good, well used typeface can turn your website into.

Another good tip is not to overdo it. It is not a good idea to use many fonts, so try to keep the number of typefaces as low as possible. I usually go with two, maximum three. I think two is perfect because you have a typeface (serif maybe) which can be used for titles and headlines, in huge sizes, while the other one is for paragraphs and small text, and often it is a sans-serif. In the image below you can see a good example of two well-combined typefaces.

Pound & Grain uses a sans-serif for the headlines and serif font for text.

If you combine too many fonts in the same design, this can cause your text readability to suffer and will not create the same experience as the example above. Fonts have to be used wisely, and quality is more important than quantity. Although it doesn’t have that much to do with typography, embedding too many fonts will make your site load slower.

Experimenting is the way to find a great combination. Try as many fonts as possible, play with them, combine them, increase or decrease the number of typefaces and so on, until you reach the desired effect. Managing to find the perfect combination rarely happens the first time when you try it, so get ready to spend some hours on this.

The line spacing is critically important as well, because it has a lot to do with readability and impact. Moving the lines apart from each other will make the human eye read them easier, while bringing them closer will obviously have the opposite effect. The average of the line spacing should be about 0.3em to 0.5em larger than the font size, but this is only a guideline and you shouldn’t follow it all the time. Actually, I never even think about this one; I always increase or decrease the line spacing by looking at the text and comparing the options. To realize why big line spacing is important, look at the image below and try to think of which is the easiest to read. Note that the typeface is the same in both paragraphs.

A difference of only 10px spacing (Photoshop size, not HTML/CSS) makes a huge difference.

Another important concept is the hierarchy, which can not only be made by increasing the font size, but also by using different typefaces, as I usually like to do. Headlines and titles are either bigger or have a more powerful, thick font, because they need to stand out. “If it makes a difference, better make it big”. If talking about rules, then this is one you should keep in mind – make the differences obvious.

The hierarchy can be emphasized through color, contrast, dimension or placement, but the most visual is the one emphasized through typography.

The headline is a sans-serif in bigger size, while the rest of the text is written with a serif font.

Measuring the width of the text is important too, but it is more crucial for paragraphs than for headlines. The ideal line length seems to be between 10 and 15 words per line, but this is another rule that doesn’t apply all the time. It is so important which typeface you use, because some are wider than others. The line spacing between rows has an influence over this as well, so don’t think of rules. Ask anybody around you to read your text and then ask if it was difficult, easy or normal. Don’t read it yourself, because you that designed the layout and after spending hours looking at it, small details become unnoticeable.  It doesn’t only depend on the font you use or line spacing, but also about the general width of your design.

Alignment is important too, but the sad truth is that it is impossible to make it work for everybody in the World with only one design. This is because in Western culture we read from left to right, top to bottom, while some countries in the Eastern part of the World read right to left, bottom to top. Therefore you should think of your audience and design for it. If we take the Western culture as an example, then try to have as fewer different starting points on the left side. This is because the eye is used to start from the same point as before when reading a new line, and having a different starting point for each line will make it difficult to read. Maybe we don’t think of this too much, but the brain probably does. It is far more easy to read a text aligned to the left, than a text aligned to the right, and the example below should express this.

The text on the left side is the easiest to read.

Although I am a big fan of the center alignment, I only use it in headlines with few lines. The version on the left side is definitely the best and I think everybody would consider a website aligned to the right a bit weird, especially people in Europe and America. Justifying the text is not a very good option either, because it will create a lot of empty space between the words and this will become confusing. Justifying is usually popular in print, in narrow columns, but not in web design where the containers are usually wider.

The weight of the font is important as well. The weight is actually how thick the font is. Highlighting words or links is usually done by using a thicker font or another color. Having several font weight types means that you can reduce the number of other embedded fonts, because having the same font in different weights gives a feeling of hierarchy and importance.

Helvetica Neue is a font with more than 40 different font styles and weight.

As you can see, typography is built on several important concepts and it is important to keep an eye on all of them. Typography is an important part of any design and if you manage to hit the mark with it, a basic, simple and clean layout will be enough to create a powerful identity. You will have to spend a lot of time on improving your typography skills, therefore I will share with you a list of useful links where you can find out more about the art of typography.

Articles about typography on 1stwebdesigner.com

Articles about typography on Smashing Magazine

25 Excellent Typograhy Tools on Six Revisions

A Crash Course in Typograhy on Noupe

Designing with Type by James Craig on Amazon

Typography and Design one OneXtraPixel

September 23 2011

16:48

Magnola: A lovely typeface for $8!

Magnola, a new “multilingual, feature packed distinctive style headline didone” is available for quite the bargain: $8! Check out the beautiful ligatures.

August 08 2011

15:15

FF Sero Medium from FontFont is Free

The lovely and versatile FF Sero Medium is free for a limited time – hurry! Available in OT, Offc, Web format.

Jörg Hemker’s FF Sero combines the striking forms of an American Grotesque with the legibility of a Humanist Sans Serif typeface. It has open contours, a distinct x-height and a homogeneous grey scale value. During the seven years of development the classic letter forms have matured and turned into a balanced, sovereign typeface. Eight harmonized weights and an extensive character set allow for a flexible and versatile typography.”

June 16 2011

10:00

A Simple Guide to Improving Web Typography

With the advent of much improved browsers, text rendering and high-resolution screens, technology is no longer an excuse for poor typography. In many ways typography can be elegant and an expression of the designer’s ideas when chosen wisely.

Today I will not only present you with guidelines to consider in mastering typography for the web, but give you the useful tools, techniques and resources to help you achieve effective designs.

Feel free to suggest any other tools or resources in the comments section.

 

In Context

To set the tone of the message you wish to communicate, you must first choose your typefaces wisely.

  • It allows the reader to adjust to the right setting and encapsulates the information conceptually.
  • The evaluation of picking the right font should start at this level and then break down into technical bits.
  • Keep the nature of content in mind during this process and see if and how the type reflects that content.
  • Read the text your given to figure out the best method of integrating and conveying its full potential on the site.

This article explains choosing type wisely very well.

 

Create Hierarchy

Every site needs a well-developed hierarchy: indicators of where to start reading and how to proceed.

  • Your typography can provide that hierarchy as long as you know your hierarchical order ahead of time.
  • By thinking about size and typefaces, you can highlight a piece of text as a headline in a way that different placement in the design just can’t provide.

Whenever Possible, Use Sans-Serif

Sans-serif is almost always the best option to use on-screen, whereas serif fonts may become blurry or pixelated. Although it’s common to use serif’s in web typography, by using sans-serif’s for longer bodies of text you put a lot less strain on your readers eyes. Verdana is a great option for a web font as it was designed to be displayed on the computer.

Leading

As you know, leading is the amount of space between two lines. Every web page differs, but here are some general rules to keep in mind:

  • Long lines of text may require extra leading.
  • Bold face or sans-serif type require more leading.
  • Type set at very small sizes, say 8 point or below, may require extra leading.
  • Leading affects the density of your page, so if your page seems a bit dark, try adding more leading.
  • Headlines may require negative leading, where type actually (or almost) overlaps.Negative leading, in other words a line-height value of less than 1, can be used on short pieces of text provided care is taken to ensure ascenders and descenders do not collide. For example:

It should be noted that some browsers add a little leading by default: Safari and Internet Explorer for example; whereas others, such as Camino and Firefox, do not.

Headings

By default, browsers will render the <h1> text to view on your page as bold. The text will also be formatted in a large font size. And the text will reside on its own line with automatic line breaks above and below it (similar to a double-spaced heading, typed in your word processor.)

  • Contrasting colors stand out more, so use them for main section headings.
  • It’s not all about size. Experiment with color changes, lightness/darkness, and font styles such as italics and bold.
  • The larger the heading, the more interesting the font face can be. This can be a great opportunity to use a cool custom font. For smaller headings, keep it simple.
  • Search engines like Google regard the text contents of this tag to be extremely important, so it is an essential tag to use on your Web pages.

Check out this article for 20 fonts designed for big, powerful headings.

Choosing a Font

The following are resources I’ve found to help you choose your fonts wisely.

Type Tester

Type Tester is an online application that allows you to test different typefaces. You have three columns of text and can modify the typography any way you please. You then get the CSS that accompanies your selections.

CSS Type Set

CSS Type Set is a handy tool that lets you preview your CSS text as you modify it, and it generates the code for you immediately.

STC fontBROWSER

This tools enables you to preview fonts installed on your system online.

Flipping Typical

This is a nice way to explore the popular typefaces you have on your computer and see which one fits the project you are working on. This is done by creating text that is displayed using various typefaces from your computer.

Typographic Techniques

The following are resources I’ve found to help you develop efficient typographic techniques.

10 Examples of Beautiful CSS Typography and How They Did It

A lot of great websites out there have beautiful typography using only CSS. But simply looking at them gives you only half the picture. This post showcases examples of good clean typography using nothing but CSS, and it explains what the designers did to achieve this beautiful type.

 

 

Advanced Typography Techniques Using CSS

This post is a great example of what you can do by combining and tweaking type using CSS. Different techniques are introduced: reflections, drop characters, handwriting, newspaper headlines and more.

typeface.js

With typeface.js, you can embed custom fonts on your Web pages so that you don’t have to render text as images. What makes it different is that it’s JavaScript only, not JavaScript and Flash like sIFR, or JavaScript and PHP like FLIR.

Misc

You need a typeface poster

Conclusion

Typography is an art form that has been around from early on. In choosing your typefaces, carefully study and test your fonts under different scenarios. One of the most important factors in web design is readability and legibility, so be creative but also make smart decisions in regards to those two factors. The best web typography lends a meaningful purpose behind the content it illustrates while triggering emotions in your readers in the process. Feel free to leave a comment if you found other resources for improving your web typography.

June 09 2011

13:51

FontDeals.com is Live!

Hey everyone, I just launched FontDeals.com, the world’s first font bundle site. For the inaugural bundle, we are selling 15 font families (29 fonts total) for only $49. That’s $506 worth of fonts at a whopping 90% discount ($1.68 per font), and it will only be on the market for 15 days. The first 2000 customers will receive a free Giga Vector Pack 3 from Designious.com. You can see a brief preview of the fonts in the bundle after the jump.

FontDeals.com is Live!

Preview of the fonts in the bundle:

FontDeals.com is Live!

May 04 2011

03:59

You Don’t Really Strike Me as an Arial: Selecting Font and Color for Your Words

Font, Color, Size – these are not decisions that should be taken lightly if you are interested in the full spectrum of meaning, innuendo, and even subliminal messages of your words on your website or blog. First and foremost, however, if readers can’t see your words properly the message you are sending is not being received at all, so the over-riding principle of font, color, and size selection must always be readability. Beyond that primary goal, it’s a worthwhile exercise to analyze the psychological meanings we send based on the font, color, and size of our copy and think about styling our words with our intended message in mind.

104654303

Font

My copywriter friend writes résumés for people on the side. Whenever we’re out she loves to watch people at the bar and determine what font their résumé should use. For Wall-Street-type women she goes for Didot and Wall Street guys Palatino with the headings in small caps. For the creatives it’s the suave Gil Sans, and computer geeks get Optima. For the purpose of her game she bases her choices on what she can tell by the look of the person, but she rarely meets her clients and sometimes never even speaks to them on the phone. In those cases she chooses the font based on the job the client wants to get.

For example, for a female client applying for both engineering and management jobs she went with Tahoma for the engineering res and the sophisticated Garamond for the other. For risk-takers she likes Verdana, but warns it takes up a lot of room so words must be chosen carefully and used sparingly. According to my friend only once has someone asked for a different font, so she feels strongly that there is an art to matching font with the message you’re sending potential employers or any other important reader. So do think twice before you send a project proposal in Chalkboard or Curlz.

Color

Pity the black screen with the rainbow-colored words. It just about breaks my heart. Not only is it virtually unreadable, but you half-expect a pixelated unicorn to come prancing across the screen. The concept of colors on your website is not that different from furnishing your favorite room in your house. If you’d like it to feel warm, inviting, and cheerful try yellows, reds, and orangesóas if your reader will want to cozy up to your fireplace and read your lively website or blog for hours. Dark purple and blues can lend a depth and seriousness to the mood. Greens are fresh, invigorating. Straw and tans convey earthiness. A deep hot pink grabs attention. For the words themselves, black text on a white background makes for the easiest reading. The brighter colors can always frame the writing or can be striking in smaller pops of color in logos or other graphics. For colored backgrounds and fonts, make sure the font color contrasts with the background color or the message you send is dazed and confused.

Size

Lots and lots of tiny print sends the message that you’re a crazy caffeinated blogger who has no filter on his thoughts and is trying to cram as much information and paranoid rants as possible in the available space. Or the message that this is a technical manual of some sort rather than information with a friendly and entertaining sensibility. Keep your words large and un-crowded enough to read clearly. If you have lots and lots of information to make room for, then take the opportunity to revise your copy until you can get your information down to more concise and reader-friendly nuggets. Leave enough white space on your page so readers can scan for main points. An engaged reader is best, but even a light scan is better than a quick click away from the page because of uninviting tiny crowded text.

Your aim is to present your message in a way that attracts the right reader for your site or blog. People spend a lot of time online, and they have a lot of choices. Font, color, and size can go a long way in creating the sort of online presence that is an attractive haven for your “type” of reader, whether she be Wall Street, fashionista, or computer geek. So think about what your message is, and style your words accordingly.

Sponsored by

Made By Tinder

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)



You Don’t Really Strike Me as an Arial: Selecting Font and Color for Your Words

March 17 2011

18:21

Free Stuff: Premium Font Giveaway: ABTS Day of the Dead – Comment to win

Alright, another premium font! I’ve got 10 of these bad boys for some lucky commenters. ABTS Day of the Dead is my latest premium font creation. Each skull was drawn from scratch in Illustrator. They are very crisp and clean, and extremely detailed. Be sure to read the rules, and good luck :)

Free Stuff: Premium Font Giveaway: ABTS Day of the Dead - Comment to win

Free Stuff: Premium Font Giveaway: ABTS Day of the Dead - Comment to win

Free Stuff: Premium Font Giveaway: ABTS Day of the Dead - Comment to win

Free Stuff: Premium Font Giveaway: ABTS Day of the Dead - Comment to win

Contest Rules:

  • All you have to do to enter is leave a comment. (tweeting is appreciated)
  • Only comment once.
  • 10 winners will be randomly chosen from the comments.
  • You must leave an email address in order to win.
  • Comments will remain open for 3 days.

March 04 2011

10:09

Pairing typefaces in book design

Contributed by book designer, page compositor and layout artist Stephen Tiano.

dictionary definition communication

Choosing typefaces is one of the two most important choices you make when designing a book. Aside from a cover photo or illustration, it is the detail that is most out there in front of readers. Fonts* used on a book cover make the initial reading impression and, when properly chosen, prepare readers for how the reading experience will feel when they turn to the first page.

I know of two ways to select typefaces for book projects. First, the lazy — though not necessarily uninteresting way — is to choose superfamilies comprised of both serif and sans serif fonts. The other way is arguably the more creative way, and is what, intuitively, one expects to pay a book designer to do: dope out perfect matches for each book he or she works on.

A few of my favorite type superfamilies are Fontin/Fontin Sans, Liberation Serif/LiberationSans, and Scala Pro and Scala Sans Pro. (As a bonus, both the Fontin superfamily and the Liberation superfamily are open source — that is, free to use.) There’s also an interesting list of forty superfamilies in an article on Peyton Crump’s Viget Inspire blog. Stay on your toes, however, as not each of these pairs is suitable for making books.

The second way to pair types is the “hard,” creative way; the doping-it-out kind of way, where the book designer does the matching. And that leads to the two ways to pair serifs and sans serifs: by contrasting or by matching.

Contrasting, at first blush, is by far the easier of the two ways to work out pairings. Theoretically, nearly every difference provides contrast.

Some obvious points to compare are letter height, x-height, stroke weight, character shapes, and direction of the axis (vertical or angled). The most practical contrast, however, when using serifs and sans side-by-side are roman to bold — the more extreme, the better; and size — one of the fonts should be at least a few points larger than the other.

When matching types, there are certain combinations that work naturally, because of the weights, shapes, and proportions of the characters. Oldstyle Serif types, with their angled stress and mild difference between thin and thickness of stroke, pair nicely with Humanist Sans Serifs — Minion and Frutiger, for instance.

Other Oldstyle Serifs such as Jenson, Bembo, Caslon, Garamond, Palatino, and Sabon, combine well with other Humanist Sans Serifs such as Eras, Gill Sans, and Lucida Grande.

Transitional faces have a vertical stress and the contrast of thin and thickness of a character’s stroke is more obvious than with Oldstyle faces. Some examples of Transitional Serifs are Bell, Bookman, Bulmer, Caledonia, Joanna, Mrs. Eaves, New York, Perpetua, and Times Roman typefaces. Transitionals are paired well with Geometric Sans Serifs such as Avant Garde, Avenir, Bernhard Gothic, Century Gothic, Eurostile, Futura, Kabel, and Univers.

Modern typefaces have much more pronounced contrast between the thin and thick of their stroke than the Transitionals, and larger x-heights. Examples of Moderns are Bernhard Modern Roman, Bodoni, Didot, Fenice, New Century Schoolbook, and Walbaum. Geometric Sans Serifs, as with Transitionals, make nice pairings with Modern Serifs.

For book design, I stop here, except for my desire to sometime set a book in Optima, a Near-Serif Sans.

*A word on the two separate and distinct terms, typeface and font. A typeface is the name under which all the characters (letters, numbers, punctuation marks), in all styles (roman, italic, bold, etc.) and sizes, of a particular design are unified. A font is a typeface in a single size and a single style. So Bembo is a typeface, but 10 point Bembo Italic is a font.

Many thanks to Stephen Tiano for sharing his knowledge. You can read other book design-related articles here on his blog, and follow Stephen on Twitter.

Font combination resources

combining fonts

Image courtesy of Thinkstock

Published on David Airey, graphic designer

Logo Design Love, the book

Related posts on David Airey dot com

March 01 2011

00:32

Free Stuff: Premium Font Giveaway: ABTS Gunsmoke – Comment to Win

I’m have another premium font giveaway this week! ABTS Gunsmoke is a western font I recently finished and I’m giving away a free copy to 10 lucky commenters. Gunsmoke includes over 400 characters, many different languages, as well as a few ligatures and symbols. The font also includes all of the symbols you see in the example images. Be sure to read the rules, and good luck :)

Free Stuff: Premium Font Giveaway: ABTS Gunsmoke - Comment to Win

Free Stuff: Premium Font Giveaway: ABTS Gunsmoke - Comment to Win

Free Stuff: Premium Font Giveaway: ABTS Gunsmoke - Comment to Win

Free Stuff: Premium Font Giveaway: ABTS Gunsmoke - Comment to Win

Free Stuff: Premium Font Giveaway: ABTS Gunsmoke - Comment to Win

Free Stuff: Premium Font Giveaway: ABTS Gunsmoke - Comment to Win

Contest Rules:

  • All you have to do to enter is leave a comment. (tweeting is appreciated)
  • Only comment once.
  • 10 winners will be randomly chosen from the comments.
  • You must leave an email address in order to win.
  • Comments will remain open for 1 week.

February 10 2011

18:06

Premium Font Winners!

Congratulations to Armando, Brizzle, Pesc, Klemen Slavi, robyn, 1916home.net, jodi, Brian Hurst, Ignacio, dinobib. They were randomly selected to win a copy of ABTS milk, my newest premium font. I really appreciate all of the positive feedback everyone!

Premium Font Winners!

February 03 2011

03:46

Free Stuff: Premium Font Giveaway: ABTS milk – Comment to Win

Hey all! I am very proud to host my very own premium font giveaway. It took me almost an entire month to make this font, and I’m giving 10 copies of it to some lucky commenters! It’s called “ABTS milk” and It’s not even on the market yet, so this is your chance to get ahold of a copy before you can even buy it ($29 value). I’ve also learned a great deal about FontLab Studio and Open Type during the past few years and I’ll be posting some video tutorials on that subject for anyone interested. Be sure to read the rules, and good luck :)

Free Stuff: Premium Font Giveaway: ABTS milk - Comment to Win

Free Stuff: Premium Font Giveaway: ABTS milk - Comment to Win

Free Stuff: Premium Font Giveaway: ABTS milk - Comment to Win

Free Stuff: Premium Font Giveaway: ABTS milk - Comment to Win

Character Set:

ABTS milk contains 384 glyphs, including ligatures and some ornaments. Some of which you’ll see in the examples above. This is a screenshot of the full character set from FontLab Studio Just to give you an Idea.

Free Stuff: Premium Font Giveaway: ABTS milk - Comment to Win

Contest Rules:

  • All you have to do to enter is leave a comment. (tweeting is appreciated)
  • Only comment once.
  • 10 winners will be randomly chosen from the comments.
  • You must leave an email address in order to win.
  • Comments will remain open for 1 week.

January 07 2011

07:11

The Hotlist – Edition 2

It’s that time again: Friday. This week has been an interesting week. With some heavy hitters being ‘fresh’ into the world and some other just plain awesomeness.

NEWS

Mac Appstore Launches

Screen shot 2011-01-06 at 11.31.03 PM

You guessed it. The MacApp Store put it all under one roof. Now, you can buy, install, update apps all from one little place in the mac. If you don’t have a mac the iTunes 10 icon everyone complained about is the same for the Mac App Store Icon except it’s replaced with the nice little app symbol. Did we also mention Angry Birds can now be played on your mac? As if we didn’t need more distractions

MUSIC

Tron Legacy Soundtrack – Daft Punk

daft-punk-tron-album
It’s not ‘new’ as Tron has been out for several weeks. However, this album has some of the best beats and rhythms to design and create to it’s definitely worth a look for people looking to get in the zone and crank out some work.

WEB SERVICE / APP

Twitter / Tweetie 2 for Mac Available

Screen shot 2011-01-06 at 11.49.59 PMThere once was a little app that was beloved by mac users. It was clean, simple and it worked. Then the creator Loren made Tweetie for iPhone one some awards created Tweetie 2 for iPhone and then went to work with Twitter. The app is now Twitter for iPhone and Twitter for iPad and the rest is history. Twitter / Tweetie 2 for mac was like a rainbow unicorn, that is until this week. Now, it’s here. Fanboys rejoice.

WORKSPACE

OfficePod

Screen shot 2011-01-07 at 1.55.11 AMIt’s an office! It’s a pod! It’s an OfficePod! Whatever it is, it works. This is a slick office setup for the home office or (you could get creative) and make some slick cubicles. Their efficient and have some pretty neat features. I wonder if they need someone to do a quality control check, if so, we’ll give them our address.

TYPE

Ratatan Font by Giuseppe Salerno
Screen shot 2011-01-07 at 1.39.35 AM

A new font that is extremely light weight and elegant. The site also has a great little flipbook that showcases it in various ‘examples’.

FOLIO

GaksDesigns
Screen shot 2011-01-07 at 2.02.29 AM

Gerrel Saunders has some amazing illustration skills… Enough to make a normal person jealous. Checkout some of his slick new work on his folio site.

LOGO

Starbucks Logo Evolution

d90e4a46265b4a3f949382332ba907d0

There comes a day for some brands when you cross into the big leagues and you’re a powerhouse brand you can just rely on a mark for people to understand who and what you are. Who else has trod this path? Apple, Nike, McDonalds, Shell just to name a few. Starbucks joins the ranks of these other prodigious brands and updates their siren and drops the text. Interestingly enough, the CEO Donald Shultz explains the evolution and states that “it gives them a chance to think beyond coffee”. What will the branch into next?

Supporting Stories:

Starbucks Logo Evolution – Logo Design Love

Starbucks Reveals New Logo – IDSGN

A Quick Word about the Starbucks Logo – Ask Spike

HAVE A TIP?

Feel free to send us a tip if you think you’ve got the hot stuff. ‘hotlist@fuelyourcreativity.com

Sponsored by

Made By Tinder

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)



The Hotlist – Edition 2

December 30 2010

07:11

The Hotlist Edition #1

You’re meant to coast through Friday’s, in other words-enjoy them. Are you thinking about work? No, of course not, just don’t tell your boss you’re focusing on the weekend. (*We know it’s not Friday but it’s almost the New Year so we’re starting today).

So instead of fighting the urge, we’re going with the flow and you should too. Enter, ‘The Hotlist’. A weekly showcase of only the hottest gear, events, apps, websites and maybe even some music. If it’s ‘hot’ that week, it will show up here. After-all we have to ‘Fuel Your Creativity’ and we think this is a great way to jumpstart you and your weekend.

News/Rumor

Screen shot 2010-12-29 at 11.20.04 PM

State of (cloud) sync – Things/Cultured Code

State of (cloud) sync, a blog post from Cultured Code discusses the progress of adding cloud sync to the much beloved Things platform. The article addresses several things the team has worked through to try and make a true solution for cloud syncing. It even touts that Things has a userbase of about 1 million. Pretty big numbers from our friends at CC.

Tunes

iso50-2010x50-1-25

ISO50 50 songs of 2010: 25-1

Scott Hansen musician and artist has composed several posts that list his top songs of 2010. This has a wide range of music from alternative, electronic and experimental. There are several stellar tracks to listen to in the top 25. If your music is starting to bore you, hop over and check it out.

Gear

Screen shot 2010-12-29 at 11.44.38 PM

Lacie Starck Mobile USB Drive

What’s better than a 500GB traveling harddrive that’s priced around $100 bucks? A sleek, beautifully designed harddrive around $100. The Starck model from Lacie makes a great travel backup buddy. It’s now available in the faster 3.0 USB (opposed to 2.0) and has a larger desktop counter part that’s available in 1TB and 2TB.

Fashion

emi2

EMI by Helm Handmade

If you’re needing some new leather hotness, look no further than Helm Handmade. With exceptional craftsmanship, beautiful attention to detail and a simple, pleasing online experience you’ll be bound to order from them several times. Plus, you can never go wrong with people who are extremely passionate about making exceptional products.

App/Book/Webapp

Screen shot 2010-12-30 at 12.05.21 AM

MotoCMS – Flash Content Management System

MotoCMS is a great way to create flash websites that are flexible, rearrangeable, and most of all: easy for clients and others to change, update and delete. MotoCMS allows you to use any font and the CMS converts fonts to make them work fast and effectively.

Workspace

2553355239_39b01584e3_z

New Workspace – Supagroova

Font

Screen shot 2010-12-30 at 2.00.21 AM

Afrobeat

The pounding tribal rhythms of Afrobeat music is expressed through this psychedelic brand new font, Afrobeat. Every letter becomes art as every letter is elegantly placed side by side, like music notes, creating music for the eyes

Feel free to send us a tip if you think you’ve got the hot stuff. ‘chad@fuelyourcreativity.com’ -

Sponsored by

Made By Tinder

Advertise on Fuel Brand Network.
Fuel Brand Network 2010 cc (creative commons license)



The Hotlist Edition #1

December 13 2010

13:50

A fine looking Number set for download

Andy Mangold has surely crafted a beauty here and giving it away for free: Pompadour Numeral Set

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!

Schweinderl