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

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…

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

Sponsored post
soup-sponsored
05:36
Reposted bySchrammelhammelMrCoffeinmybetterworldkonikonikonikonikoniambassadorofdumbgroeschtlNaitliszpikkumyygittimmoejeschge

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.

March 11 2011

10:00

The Secret Of Successful Minimal Font Usage

Minimal fonts can awesomely enhance any artwork if used properly. You can see more and more websites using minimal fonts in their designs. Personally I love the neat look of bold minimal font in a minimal design. In this article you’re going to find some tips together with stunning examples to learn more about minimal font usage in web design. While minimalism seems easy – it really isn’t,  it takes great skill to come up with something clean, professional and unique at the same time! Let’s jump into art of minimal fonts?

Bigger Is Better

Since minimal fonts are rather slight you’ll have to use bigger font sizes in order to make your text visible and easy to read. Try to avoid using a font size lower than 14 points. Big and bold minimal serif fonts usually look awesome in headers and plain backgrounds. Large minimal headlines add an interactive look and accent to  minimal designs.

Fajne-chlopaki-minimal-fonts-use-web-design-tips

Fajne Chlopaki uses huge headlines in his website’s header. The site has a clean and minimal style and these large fonts add a creative look to, and complete, the design.

Contrast

If you’re using minimal fonts be sure not to lose contrast. Try to implement light fonts on a dark background or vice versa. Stronger contrast will make your text easier to read since minimal fonts tend to blend into the background if the contrast is to low. Strong contrast will also enhance the whole look and make the fonts really stand out.

Visual-box-minimal-fonts-use-web-design-tips

The Visualbox site has a dark background and they’re using white fonts for titles. They’re also using a large font size so the text is very noticeable. These minimal style titles also add a little accent to the design.

Keep It Minimal

Minimal fonts are for minimal usage. They’re neat when used sparingly and in the right situation, though they can look unrefined and clash if you clutter them and use inappropriately. Minimal fonts won’t look good in visually heavy designs. Less is more – they will look great in minimal designs with a lot of white space and few details.

Goslingo-minimal-fonts-use-web-design-tips

Oliver James Cosling’s portfolio has a clean and minimal look. He’s using a large minimal font for the title and a smaller one for navigation. These fonts look strong and neat and they complement the design excellently.

Limit Your Fonts

Different type of fonts tend to conflict with each other and create a mess within your design. It’s especially true when talking about minimal fonts. Accurate use of fonts can add the right flair and character to your design. Using a select few however will help maintain a consistent look. Two to three fonts is usually good, of course, you can use more however you’ll have to be careful that they don’t cause visual noise.

Adoreyou-minimal-fonts-use-web-design-tips

Adoreyou is an excellent example of effective use of minimal fonts. The site itself is a consistent, well-designed minimal style website. They’re using one minimal font for navigation and another one for the titles. The fonts are perfectly implemented into the design, they’re suitable and engaging at the same time.

Examples

Below you’ll find some stunning examples of minimal font use in web design. Each example is unique so you can see how a wide range of minimal fonts can be used. Check out these examples to learn how to implement minimal fonts effectively.

1. Elactique Designs

Electique-designs-minimal-fonts-use-web-design-tips

2. Impala Web Studio

Impala-studio-minimal-fonts-use-web-design-tips

3. Josh Sender

Iosh-sender-minimal-fonts-use-web-design-tips

4. Kenny Saunders

Kenny-saunders-minimal-fonts-use-web-design-tips

5. Studio Luma

Studio-luma-minimal-fonts-use-web-design-tips

5. Teixido

Teixido-minimal-fonts-use-web-design-tips

6. My Favourite Thing

My-favourite-thing-minimal-fonts-use-web-design-tips

7. Samweb

Samweb-minimal-fonts-use-web-design-tips

8. Giles Revell

Giles-revell-minimal-fonts-use-web-design-tips

9. Doublenaut

Doublenaut-minimal-fonts-use-web-design-tips

10. Efingo

Efingo-minimal-fonts-use-web-design-tips

Fonts

I’ve also collected some nifty, good-looking fonts for you to start enhancing your designs.

1. District Thin

Disctrict-thin-free-fonts-minimal-web-design

2. Tex Gyre Adventor

Tex-gyre-adventor-free-fonts-minimal-web-design

3. Cicle

Cicle-free-fonts-minimal-web-design

4. Sertig

Sertig-free-fonts-minimal-web-design


Minimal Fonts in Web Design: Tips and Inspiration

5. Yanone Kaffeesatz

Yanone-kaffeesatz-minimal-fonts-use-web-design-tips

6. Hattori Hanzo

Hatorri-hanzo-free-fonts-minimal-web-design

7. Extravaganzza

Extravaganzza-free-fonts-minimal-web-design

8. Tuffy

Tuffy-minimal-fonts-use-web-design-tips

9. Print Clearly

Print-clearly-minimal-fonts-use-web-design-tips

10. Titillium

Titillium-minimal-fonts-use-web-design-tips

Conclusion

I hope you learned something new from these tips and found the examples useful. Remember that minimal fonts are mainly for minimal usage. Don’t exaggerate, though feel free to experiment and achieve new looks. Minimal fonts are subtle but they have a personality which can bring your designs to a whole new level.

November 04 2010

14:40

Best Practices of Combining Typefaces

Smashing-magazine-advertisement in Best Practices of Combining TypefacesSpacer in Best Practices of Combining Typefaces
 in Best Practices of Combining Typefaces  in Best Practices of Combining Typefaces  in Best Practices of Combining Typefaces

Creating great typeface combinations is an art, not a science. Indeed, the beauty of typography has no borders. While there are no absolute rules to follow, it is crucial that you understand and apply some best practices when combining fonts in a design. When used with diligence and attention, these principles will always yield suitable results. Today we will take a close look at some the best practices for combining typefaces — as well as some blunders to avoid.

Combine a Sans Serif with a Serif

By far the most popular principle for creating typeface combinations is to pair a sans serif header typeface with a serif body typeface. This is a classic combination, and it’s almost impossible to get wrong.

In the example below — a typical article layout — we have Trade Gothic Bold No.2 paired with Bell Gothic on the left side. They are both sans serif typefaces. However, they have very different personalities. A good rule of thumb, when it comes to header and body copy design problems, is not to create undue attention to the personality of each font. Trade Gothic is arguably a no-nonsense typeface. Bell Gothic, on the other hand, is much more dynamic and outspoken.

Combine-serif-with-sans-serif in Best Practices of Combining Typefaces

Putting these two together creates an unwanted conflict in the design. Trade Gothic wants to get to the facts, but Bell Gothic wants to have some fun. This kind of tension is likely not part of the design goal, and should be avoided.

Now let’s look at the example on the right. We’ve replaced Bell Gothic with the stately Sabon. Sabon works very well with Trade Gothic which is a serif typeface. They are both focused on bold clarity with highly-readable glyphs due to their tall x-height. Both typefaces, in this context, are on the same mission, and that makes for a great combination.

Avoid Similar Classifications

Typefaces of the same classification, but from different typeface families, can easily create discord when combined. Their distinct personalities don’t play well off of each other and create a kind of typographic mud if careful attention is not paid.

In the first example on the left side we have a heading set in Clarendon Bold, which is a slab serif. The body copy on the left is Officina Serif which is also a slab serif. Slab serif typefaces are known for their distinct personality, and they like to dominate any area in a design they are used in. Putting two slab serifs together can create a needless and unsightly tension.

Avoid-similar-categories in Best Practices of Combining Typefaces

Now notice the example on the right side. The Clarendon Bold header is paired with the much-more neutral New Baskerville. New Baskerville is a versatile transitional serif typeface with wide glyphs that goes nicely with the heavy-set Clarendon. At the same time, it backs down and lets Clarendon have all the personality it wants. This combination works quite nicely as a result.

Choosing typefaces from different classifications at the start avoids needless tension in your design and typography later.

Assign Distinct Roles

One very easy way to combine multiple fonts from several typefaces is to design a role-based scheme for each font or typeface, and stick to it. In the next example, we have used Akzidenz Grotesk Bold in all-caps in an author slug on the top. We then use Rockwell Bold for the article heading. Our body copy intro and body copy typeface is Bembo at different sizes. Finally, the second level heading is Akzidenz Grotesk Medium.

Assign-distinct-roles in Best Practices of Combining Typefaces

We saved the highly-distinct Rockwell for attention-getting headlines, and fallen back to a conservative sans serif heading and serif body copy combination we discussed earlier. But even in that choice, we have a great variation of size, weight and function among the fonts used.

All in all, there are 4 fonts from 3 typefaces being used here, and they all pull together into a cohesive design, because each roll assigned to a font is fixed and is very clearly defined in the typographic hierarchy. When in doubt, define!

Contrast Font Weights

A sure-fire way to muddy your typographic hierarchy is to fail to distinguish elements in the hierarchy from one another. In addition to variations in size, make sure you are creating clear differences in font weights to help guide the reader’s eye around your design.

In the example on the left, we have a decent size contrast, but not enough font weight contrast. The Myriad Light, when set above a Minion Bold, tends to fade back and lose visual authority. However, we want the reader’s eye to go to the heading, not the body copy, at least initially.

Contrast-font-weights in Best Practices of Combining Typefaces

On the right, we’ve set a Myriad Black above Minion, normal weight. It might be a bit heavy-handed but there is no confusion as to what the reader is supposed to look at first.

Create a Variety of Typographic Colors

Typographic color is the combined effect of the variations of font weight, size, stroke width, leading, kerning, and several other factors. One easy way to see typographic colors is to squint at a layout until you can’t read it anymore, but can still see the text in terms of its overall tonal value.

If you squint at the examples below, you’ll notice that layout on the left bleeds into one undistinguished blob of text, ever so slightly more dense at the bottom. However, the layout on the right retains its visual hierarchy, even if you can’t read it. No matter how far away you are from this page, there is no confusion regarding where the title is, and where your eye should go next.

Create-different-typographic-colors in Best Practices of Combining Typefaces

Clever use of typographic color reinforces the visual hierarchy of a page, which is always directly tied to the meaning of the copy and the desired intention of the message.

Don’t Mix Moods

One often-overlooked typographic mistake is not recognizing the inherent mood of a typeface. Typefaces have personality. They change to some degree based on context, but not greatly. It’s one problem to misidentify the personality of typeface for a particular job, but it’s a double-problem to add another poorly chosen typeface to the mix!

On the left of this example, we have Franklin Gothic Bold paired with Souvenir. The basic feel of Franklin Gothic is stoic, sturdy, strong, but with a refined sense of elegance and mission. It’s not a cuddly, but functional. On the other hand, Souvenir is playful, casual, a little aloof, and very pretty. These two typefaces together come across like a Buckingham Palace guard who is dutifully ignoring a playful little girl at his feet trying to get him to smile. This kind of mixed-mood just doesn’t work very well. Mixing the mood of typefaces can draw attention to the typography instead of the message, which results in a poor design.

Dont-mix-moods in Best Practices of Combining Typefaces

On the right, we’ve given Souvenir a more willing playmate. Futura Bold has many personalities, but it’s more than willing to accommodate Souvenir for several reasons. First, both typefaces have high x-heights. Both typefaces have wide glyphs and very circular letter shapes. Both typefaces have a subtle but not overly-prominent quirkiness. Neither dominates the other. They both work, in this example, to create a fun and upbeat mood. There is no sense of undue tension.

Contrast Distinct with Neutral

A clean, readable typographic design requires careful attention to intended and unintended tension. One place to look for unintended tension is with personality clashes among your type choices. If one of your main typefaces has a lot of personality, you might need a secondary typeface to take on a neutral role.

In our example, the left column pairs Dax Bold with Bernhard Modern. This is a poor choice for at least two obvious reasons we’ll examine.

Contrast-distinct-with-neutral in Best Practices of Combining Typefaces

First, Dax has narrow glyphs and a big x-height while Bernhard Modern has some very wide glyphs and one of the lowest x-heights among popular classic typefaces. Second, Dax is an informal, modern, and bright typeface. It’s a great fit for a techie, savvy, modern message. Bernhard Modern on the other hand is classy, quiet, sophisticated, and even a touch intimate. Combine the lack of chemistry among those attributes together with the very different personalities of each typeface and you have a poorly functioning bit of typography.

Let’s look at a better choice. The right column pairs Dax Bold with Caslon. Caslon is an old style typeface, but it’s been modernized and sanitized to play nicely with other typefaces. It works satisfactorily with Dax in this context. Notice how you can see the personality of Dax in the headline, but Caslon steps aside and delivers the reader to the message? In this context, Caslon functions quite well as a neutral choice to support the more flamboyant Dax.

Avoid Combinations That are Too Disparate

When too much contrast is created in certain settings by selecting typefaces that are too much unalike, it can create a visual imbalance which works against the overall design.

On the left, we have Antique Olive Nord — an extremely heavy font — paired with Garamond Narrow. The over-zealous contrast and its effects are apparent. In most cases, this extreme contrast goes beyond attention-getting and goes right to awkward. It doesn’t serve the message of the copy well.

Avoid-disparate-font-combinations in Best Practices of Combining Typefaces

On the right, the Antique Olive Nord has been replaced by a more subdued Antique Olive Bold. Garamond Narrow could have been replaced with a book weight Garamond, but a better choice — after some deliberation — was Chaparral. Chaparral has a higher x-height than Garamond, and overall is a more modern and subsequently more neutral choice to set against the idiosyncratic presence of Antique Olive Bold.

Keep It Simple — Try Just Two Typefaces

In all the effort to sort through large typeface libraries looking for “just the right combination”, it’s often easy to overlook the sometimes obvious and much easier choice: stick to two typefaces using a classic sans serif and sans combination.

In the example below, we’ve created a clear visual hierarchy, got a high degree of variety, created a strong sense of interesting typographic color, all-the-while increasing readability. But it was all done with just two typefaces. However, we are using a total of five fonts: three Helvetica Neues and two Garamonds.

Use-two-typefaces in Best Practices of Combining Typefaces

Why does this work so effortlessly? Several factors are at play here. First, when using different fonts from the same typeface, you are likely going to have a high degree of visual compatibility without even working for it. Second, we’ve chosen the tried-and-true combinations of using a classic neutral heading typeface and a classic neutral body typeface.

Both Helvetica Neue and Garamond have distinct yet neutral personalities, and they can weave complex layouts together and around each other because we’ve maintained a strict visual hierarchy. Planning rules and following them, with the right typefaces, can yield great results with a minimum of effort.

Use Different Point Sizes

We saved one of the simplest principles for last: use different point sizes to create contrast and distinction.

In the example on the left, the heading and body copy bleed together into an unsightly blob of text. Use the squint method mentioned above and look at the left example. While still squinting, look at the right and notice the dramatic difference even though it’s blurry!

Use-different-point-sizes in Best Practices of Combining Typefaces

On the right, we have the same two fonts, but in different sizes. Thesis Sans Italic has been bumped up significantly, while New Century Schoolbook has been decreased to a legible, yet more complimentary size.

Using different point sizes helps distinguish the typographic hierarchy and increase the variety of typographic color.

In Conclusion

The fact that there are no hard and fast rules about combining typefaces can make the process of making good choices time-consuming and maybe even a little exhausting. But it’s also nice to have a handy set of principles, as well as an understanding of certain typographic situations to avoid, to guide the process as quickly as possible to a pleasant typographic result.

Further Resources

You may be interested in the following related articles and resources:

Related Posts

You may be interested in the following posts which have been published on Smashing Magazine recently:

Also, please feel free to follow us on Twitter and join our community on Facebook.

(ik) (vf)


© Douglas Bonneville for Smashing Magazine, 2010. | Permalink | Post a comment | Add to del.icio.us | Digg this | Stumble on StumbleUpon! | Tweet it! | Submit to Reddit | Forum Smashing Magazine
Post tags: baskerville, bell gothic, caslon, chaparral, clarendon, dax, Fonts, garamond, helvetica, sabon, sans, serif, trade gothic, typeface, typography

September 26 2010

10:00

40 Excellent Free Fonts For Minimal Web Design Creation

Minimal web design has become a big trend in 2010. You won’t find large pictures or glossy buttons in minimal designs, but fonts are some of those rare accents they can have. Carefully chosen fonts can really enhance your design. Usually minimal web designs tend to have clean, light fonts, but not always it’s the best solution. You can, instead, pick a nice bold font to give your design a niche. That’s not true that you have to pay for the good-looking fonts.

There are plenty of free, great looking fonts around the web. In this article you’re going to find 40 clean, crisp and, of course, free fonts for your minimal web design.

1. Raleway

Raleway-free-fonts-minimal-web-design

2. Extravaganzza

Extravaganzza-free-fonts-minimal-web-design

3. Caviar Dreams

Caviar-dreams-free-fonts-minimal-web-design

4. Lacuna

Lacuna-free-fonts-minimal-web-design

5. Junction

Junction-free-fonts-minimal-web-design

6. Delicious

Delicious-free-fonts-minimal-web-design

7. Danube

Danube-free-fonts-minimal-web-design

8. Gnuolane

Gnuolane-free-fonts-minimal-web-design

9. Expressway

Express-way-free-fonts-minimal-web-design

10. Cicle

Cicle-free-fonts-minimal-web-design

11. Sertig

Sertig-free-fonts-minimal-web-design

12. Mido

Mido-free-fonts-minimal-web-design

13. Metro Normal

Metro-normal-free-fonts-minimal-web-design

14. Colaborate

Colaborate-free-fonts-minimal-web-design

15. Quicksand

Quick-sand-free-fonts-minimal-web-design

16. PT Sans

Pt-sans-free-fonts-minimal-web-design

17. Walkway

Walkway-free-fonts-minimal-web-design

18. Cantarell

Cantarell-free-fonts-minimal-web-design

19. Josefin Sans STD

Josefin-sans-free-fonts-minimal-web-design

20. Molengo

Molengo-free-fonts-minimal-web-design

21. Mentone

Mentone-free-fonts-minimal-web-design

22. Hattori Hanzo

Hatorri-hanzo-free-fonts-minimal-web-design

23. Emily Osment Font

Emily-osment-free-fonts-minimal-web-design

24. Dezen Pro

Dezen-pro-free-fonts-minimal-web-design

25. Tuffy

Tuffy-free-fonts-minimal-web-design

26. Otari

Cotari-free-fonts-minimal-web-design

27. District Thin

Disctrict-thin-free-fonts-minimal-web-design

28. Aaargh

Aaargh-free-fonts-minimal-web-design

29. Sansation

Sansation-free-fonts-minimal-web-design

30. Tex Gyre Adventor

Tex-gyre-adventor-free-fonts-minimal-web-design

31. Yorkville

Yorkville-free-fonts-minimal-web-design

32. Telegrafico

Telegrafico-free-fonts-minimal-web-design

33. Opal

Opal-free-fonts-minimal-web-design

34. Decker

Decker-free-fonts-minimal-web-design

35. Disco

Disco-free-fonts-minimal-web-design

36. Apogee

Apogee-free-fonts-minimal-web-design

37. Circula

Circula-free-fonts-minimal-web-design

38. Jalane Light

Jalane-light-free-fonts-minimal-web-design

39. Franchise

Franchise-free-fonts-minimal-web-design

40. Dejavu Sans

Deja-vu-sans-free-fonts-minimal-web-design

September 16 2010

12:59

Typeface the movie is now on iTunes

“Typeface focuses on a rural Midwestern museum and print shop where international artists meet retired craftsmen and together navigate the convergence of modern design and traditional technique.

Typeface, Kartemquin’s latest documentary in progress, will bring this fascinating junction of historical and contemporary, as well as rural and urban America together for enjoyment and contemplation. This film will be of interest to art and graphic design enthusiasts, to teachers as an educational resource, and to anyone looking for a film about perseverance and preservation in the heart of America.”

August 08 2010

10:00

40 Awesome Free Fonts for Big Headlines

24 Free Fonts for Big HeadlinesWhen you are designing a website, brochure or even an advertisement it is very hard to find a big, clear, beautiful and effective fonts to use in your headlines. In this article I compiled a list of 23 free big fonts that are perfect for big headlines. These fonts can make a very beautiful touch on any design if used properly.

1. Franchise

2. Nevis

3. SansFat

4. Hit the Road

5. MUSEO

6. Museo Slab

7. Mabella

8. Qhytsdakx

9. Bitsumishi

10. Molot

11. Bebas Neue

12. Days

13. Capricorn

14. League Gothic

15. Orbitron

16. Ambrosia

17. Gayatri

18. telegrafico

19. Can-Can de Bois

20. Sertig

21. Gabo

22. Kilogram

23. Caprica

24. Code Free

25. Coolvetica

26. Age

27. LOT

28. HeadlineNEWS

29. Oregon LDO

30. Ferrum

31. Title Wave

32. TymesLittleCaps

33. Academic M54

34. UNbreakABLE

35. Excite

36. Powdah

37. Clearwerkkraftremix

38. Laconic

39. Calluna

40. 4th and Inches

Clearwerkkraftremix

July 22 2010

10:00

Learn the Basics: 25+ Sites And Resources To Learn Typography

Typography has been practiced and used in our daily life. Range from handwriting in a pocket notebook to the big advertising billboard. It’s sometimes typed using Times New Roman in 12 points for newspaper. Others use Edwardian in 26 points for their wedding invitations. When a designer decide to use the right font for the right job, the typography itself become an art.

Learning typography seems to be easy at a glance, in order to achieve a great impact from typography for graphic and web designs isn’t so easy. Many designers found it as a complicated design aspects to practice. Below are the 25+ sites and resources we have selected to help you understanding typography basics in print or web designs, choosing the right fonts for your project, and guide you to create a good typography which aesthetically pleasing.

1. Learning About Type

There are quite a few terms thrown around with regards to typography. Hopefully this article will help you understand more about the world of typography. If this is your first true introduction to typography you probably underestimate the effect it has on the world.

2. Five Simple Steps to Better Typography

This is a series articles, each part explains deep knowledge of typography and help you to understand it more. The kind of typography in these articles is not your typ ical “What font should I use” typography but rather your “knowing your hanging punctuation from your em-dash” typography.

3. Type Is Sexy

This is more like an online book, but presented in interactive way. You will find basic understanding of typography from this site, from Anatomy 101 to The Rules of Good Typography.

4. Know Your Type – Starting Points For Typographic Inspiration

Not every typeface is the right choice for every job, this articles will help and guide you to understand and picking the right choice for different type of job or concept theme.

5. The Type Studio / The Written Word

This page offers links to a number of articles on typography, including PDF versions of archived. These cover individual typography topics in detail, for both online and offline applications (including pull-quotes, visual alignment, bullets, and emphasis, among more than 30 others).

6. Typographic Marks Unknown

There are many typographic marks which are familiar to most, but understood by few. Most of these glyphs have interesting histories and evolutions as they survived the beatings given to them through rushed handwriting of scribes and misuses through history. They now mostly live on our keyboards and in our software, and a few are used often, so it seems only fitting to know where they come from and how to correctly use them.

7. Periodic Table Of Typefaces

A reference table for most popular typefaces and their classifications.

8. Typedia

Typedia is a resource to classify, categorize, and connect typefaces. It is a community website to classify typefaces and educate people about them, very much like a mix between IMDb and Wikipedia, but just for type. Anyone can join, add, and edit pages for typefaces or for the people behind the type.

9. Typographic Design Patterns and Best Practices

This article from Smashing Magazine gives you a broad knowledge of popular typefaces used in web design, also included with some case studies and inspirations.

10. The Right Font for the Job

In this article you will find four main ways fonts can differ, even if most of their letters look the same. Save, bookmark, or print this newsletter and ask yourself these questions the next time you’re choosing type.

11. How to Choose A Font

Have you ever had the problem of not knowing what typeface to use? Well of course you have, everyone has. This is a guide on how to choose a font.

12. 11 Essential Tips for Good Print Typography

You can’t just throw text on a page, it has to be laid out and organized in a clean way that adds to the information being presented. This article will give you  11 typography tips to help you convey information in print the right way.

13. A 20 Minute Intro to Typography Basics

This is an introduction for you who are still new in the design field. Its aim here is to introduce some of the basics and the most common areas of typography that will be important in your design work.

14. Fundamentals: Combining Type With Helvetica

In this article the Indra (the author) shares her favorite Helvetica companions with the following guidelines in mind: “Focusing on contrast makes combining fonts easier. Better not pair Helvetica (or other Neo-Grotesques) with another sans serif (like a Humanist Sans). Instead, choose a serif or a slab. Transitional and Modern (bracketed)serifs work quite well with Helvetica. So do most Garaldes like Garamond — it all depends on what kind of atmosphere you’re aiming for. Browse the list of ideas below, or look for faces with broad proportions, a large x-height, or similar characteristics, like an uppercase ‘R’ with a vertical tail.”

15. Four Techniques for Combining Fonts

This article gives you four tips for navigating the typographic ocean, all built around H&FJ’s Highly Scientific First Principle of Combining Fonts: keep one thing consistent, and let one thing vary.

16. How Do I Choose Paring Fonts?

This is an open typography forum regarding paring fonts. Get the suggestion or advice from the designers who have been professionally experienced in typography in this forum.

17. Beginners Guide to OpenTtype

OpenType (OT) is a cross-platform type format that includes expert layout features to pro­vide richer linguistic support and advanced typo graphic control. This beginners guide will help to illustrate some of the more common features found in OT fonts and when they should be used.

18. Making Geometric Type Work

For graphic designers beginning to experiment in type design, a geometric or modular typeface is a natural starting point. Illustrator and other programs offer a simple collection of elements such as circles, squares, and triangles which can be combined to create a passable alphabet. This is not an argument against all geometric or modular typefaces, but simply some guidance on how to make them more readable, work effectively and be visually consistent.

19. Font or Typeface?

An article which discusses both font and typeface because these terms evolved over a considerable period of time and saw several transitions in technology, they can sometimes be interpreted in varying ways. This resulted in a terminology that is often perceived as at best esoteric, at worst plain confusing.

20. On Web Typography

A List Apart gives you more knowledge for typography on websites, explore choosing and pairing fonts on the web, particularly in relation to the expanded options @font-face provides from this article.

21. Choosing Type Alignment For The Web

This is another article that will help you understand type alignment for the web. It explains each on Justified, Right-Aligned, and Left-Aligned and giving the reason of which is best to use on the web depends on your need.

22. Principles For Readable Web Typography

There are many factors that play into the readability of text. There are also a number of terms, all very important. This article explains a few of the more common Web typography terms and an explanation of how each term affects readability.

23. Setting Type on the Web to A Baseline Grid

And how about setting type to a baseline grid? Learn more and practice it after you read this article, it will guide you with the easy to follow examples and codes.

24. Clagnut’s Typography

Clagnut’s typography category archive is filled with great information on typography spanning the past eight years or so. Articles talking about theory, news, and technique are all included.

25. Type-Inspired Interfaces

Picking the right typeface gets you farther than you might think. Here are a few tips on taking cues from type to design interfaces and interface elements.

26. Inside The 3D Typography

This article will guide you to understand how to develop digital work in 3d typography, also included with 3D typography book and 3D typography inspirations.

27. Typography Books To Help You Learn Typography

The article gives you 15 typography books (with links to purchase) which are personally recommend by the writer to helped you learn, understand, appreciate and absolutely love typography and type layout.

28. Findings

Typography samples and inspiration.

Did you find that your favorite typography-related article is not on the list? Let us know in the comment section.

July 01 2010

13:33

The making of a typeface: Biome

Carl Crossgrove provides great insight, sketches, and his process on I Love Typography on the making of the Biome family (previously Nebulon).

May 27 2010

15:24

Learn: Anatomy of a typeface

Typedia lists a quick reference for the various parts of letterforms.

December 04 2009

22:56

KnucklePuck Font – Exclusive Vector Font Download


By Graham Smith

In this font exclusive, we present KnucklePuck, a modular display font created by Austin Roesberg. In my ongoing search for new fonts, I find myself writing to many font designers to see if they would ‘part’ with their digital creation. Sometimes they don’t answer, sometimes they answer ‘no’, and on occasion a ‘yes’ comes my way.

KnucklePuck was found on Behance. With no mention of font availability on Austins Behance Profile, I approached Austin to see if he would consider making KnucklePuck available as a download. With a few carefully crafted and well placed words, an email was promptly dispatched. Austin agreed. So here we are, Noupe can present KnucklePuck as an exclusive free font download for your enjoyment. You’ll find the download link in the bottom of this post.

824261222384546 in KnucklePuck Font - Exclusive Vector Font Download

Knucklepuck-free-font in KnucklePuck Font - Exclusive Vector Font Download

Designer Profile

0824261222376071 in KnucklePuck Font - Exclusive Vector Font Download

Austin Roesberg

I am a 24 year old designer currently living in Brooklyn, NY. A 2007 graduate of the Maryland Institute College of Art (MICA), I specialize in print design but have a background in designing for the web as well. I’m always looking for new methods of design and as well as the time to actually put new ideas into production.

About the Font

This font was all about problem solving. I had to find a method to designing a font using only 3 shapes (square, rectangle and quarter circle). I decided to make things a little difficult for myself by restricting the font to 3 rows and 2 columns per letter. The only exceptions to that layout were the I, M and W – for obvious reasons.

I also wanted to give the font a unique look by keeping something in common with each letter. in this case, most letters have a curved bottom left corner. The only letters that were exempt from this were letters that don’t have feet, such as the C and O.

The end result was a heavy, bulky font that had a somewhat playful look because of the curved shapes in the letters. It reminded me of a dense rubber hockey puck, so I chose to pay homage to a childhood favorite movie of mine, The Mighty Ducks 2 and named it Knucklepuck.

Connect with Austin

Behance Profile: http://www.behance.net/austinroesberg
Website: http://austinroesberg.com/

824261222384405 in KnucklePuck Font - Exclusive Vector Font Download

Font Licencing

All rights are reserved by Austin Roesberg. You may use KnucklePuck freely for noncommercial and personal purposes, such as creating a logo for a personal web site, free web design materials, goods or banners.

Please contact Austin Roesberg before using the fonts for commercial purposes, such as for commercial products, stores or companies logos, TV, books and magazines, or CDs.

Download The Font and Font Distribution

Austin Roesberg has made this font available as an exclusive to Noupe and as such, you are not permitted to re distribute this font, to supply it on CD or distribute it directly in other electronic form.

If you wish to link to this font in other ‘free font’ blog posts then please do so. Do not supply a direct download link, please direct your readers to this post only.

Download KnucklePuck from Noupe.

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.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...