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

February 18 2014

Sponsored post
09:01 will be discontinued :(

Dear fans and users,
today, we have to share very sad news. will stop working in less than 10 days. :(
It's breaking our heart and we honestly tried whatever we could to keep the platform up and running. But the high costs and low revenue streams made it impossible to continue with it. We invested a lot of personal time and money to operate the platform, but when it's over, it's over.
We are really sorry. is part of the internet history and online for one and a half decades.
Here are the hard facts:
- In 10 days the platform will stop working.
- Backup your data in this time
- We will not keep backups nor can we recover your data
July, 20th, 2020 is the due date.
Please, share your thoughts and feelings here.
Reposted bydotmariuszMagoryannerdanelmangoerainbowzombieskilledmyunicorntomashLogHiMakalesorSilentRulebiauekjamaicanbeatlevuneserenitephinangusiastysmoke11Climbingpragne-ataraksjisauerscharfArchimedesgreywolfmodalnaTheCrimsonIdoljormungundmarbearwaco6mieczuuFeindfeuerDagarhenvairashowmetherainbowszpaqusdivihindsightTabslawujcioBateyelynTabslaensommenitaeliblameyouHalobeatzalicexxxmgnsNorkNorkarthiimasadclownsurprisemeTriforcefemiMalikorCyamissiostrablackmoth7Kore

February 14 2014


February 03 2014


Expert Tips When Creating and Selling Fonts

Fonts are essential for the feel of the website. Font developers, like you, need to be smart when creating and selling fonts. In media, where typefaces are very much used, fonts have changed in the same rate as any other web page elements, adjusting to the need and time of its use. As there are people who are able to read, fonts will continue to evolve in its styles, uses and forms.


Photo by Juan Joro

With that being said, the growing importance of font designers is also heightened. Because of the need for constant development, typefaces should adapt to the changes that the users demand, ergo, the talent and skill to create aesthetically beautiful and purposely readable fonts.

Actually, creating your own font is pretty rad. Imagine seeing your own handwriting or something you developed being used in designs and even in websites. At the most, if you have been trained well and created awesome designs, you could even sell your fonts! So it’s really a pretty good thing to learn.

This article will help you achieve that goal. 1stWebdesigner will be very much willing to teach you the following:

  • Things you need to know before designing a font
  • Shall I sell it or give it away for free?
  • Tools you might need to use, and some alternatives

With these points, let’s see if you can stand up to the challenge of being great font-designers and developers.

What do I need to know before starting to design my own font?

Sun Tzu once said,

“If you know the enemy and know yourself, you need not fear the result of a hundred battles. If you know yourself but not the enemy, for every victory gained you will also suffer a defeat. If you know neither the enemy nor yourself, you will succumb in every battle”

You’re probably wondering why I wrote that. Well, those words should be the guiding principle in designing your own fonts. Knowing your ‘enemy’ and ‘yourself’ is a sure-shot weapon on making magnificent and potentially sellable typefaces. Once you mastered these principles, you can truly design fonts as sharp as the samurais.


Photo from Career Girl Network

The first thing to keep in mind is your ‘enemy’. Now, who is your enemy? Let’s just say your enemy is your target. What is your purpose for designing this font? Knowing where to use it and to whom you shall use it for will be the key in making fonts that impact (pun intended) in the world of web design.

Ask yourself:

  • Am I targeting kids for this design? If yes, then, design a comical font.
  • Am I targeting professionals here?  If yes, then, you might want to think of a typeface that would suit them.
  • Do I want to see my handwriting on the computer screen? If yes, then you might want to think of a font that will suit this answer.

You should be careful in targeting your audience because you might fire a stray bullet and hit the ones you’re not targeting. So keep in mind that fonts have their specific uses for specific purposes.

Try reading: Font Police: 20 Fonts to Avoid to Maintain Your Readers’ Sanity

Next, consider if what type of font you will use. There are a few types of fonts out there. What you need to do is to know where to place your font in these categories. Doing this will easily make your font sellable and searchable in case you wanted to make money out of them.

Read Working with Types: Typography Design Tutorial for Beginners for the different types of fonts.

After knowing what font you will use, you will be challenged to know what fonts to suit you. As a designer, you probably have your own niche. Are you comfortable with script fonts? Do you prefer comical fonts rather than formal ones? What will make your design workflow easier, faster and better?

You need to address those cases and try to look at your own designs. Assess your strengths and play with them. If you are good at formal typefaces, then go for it. Learn where are you going to put yourself and also where to have fun doing it. Remember, if you love what you do, your target will  love what you make out of your designs. So choose.


Shall I sell my fonts or give them away for free?

Now this is a pretty good question. Say, you were able to design a handful of awesome fonts. Your friends are pressuring you to sell them out so that you could take them out for dinner. And now, you come to ask yourself, “Can I really sell these?”

The answer is yes. Though the second question will arise, will they buy it? Now that’s another good question.


Making people actually buy your fonts could seem very difficult, though, very possible. With the Internet growing more vibrant as each day passes by, you are basically given an unlimited number of people wanting fonts. Now, with a growing number of demands, your fonts will be competing with other designers which, in some ways, could be better than you. Now, how do you win? Try these:

  • Foundry Method – Foundries are font manufacturers. They distribute typefaces to a lot of outlets like web shops and resellers so it’s a pretty big opportunity to sell your font through them. It is an exclusive deal as the foundry will maintain the right to sell the font you designed as dictated by the contract. In return, you will be given royalty.

Good points of this method:

  • It requires minimal to zero business knowledge. The foundry will take everything in. No headaches.
  • They can improve your design and make it more sellable.
  • Foundries protect you from piracy and misuse.
  • You can focus on designing more fonts rather than thinking about how to sell them.

Bad points:

  • Little to no control at all with the method of selling the fonts.
  • You will receive only a portion of the earnings.

Things to consider about your foundries:

  • The niche of the whole foundry.
  • Their assistance to the production of your font.
  • Target market of the foundry.
  • Length and terms of the contract.

Here are some foundries you’ll want to take a look at.

  • Reseller Method – Resellers offer fonts from a lot of different foundries. What they do is they sign contracts with font publishers or foundries and sell the fonts in the latter’s library. They receive a particular percentage from selling the fonts. Each reseller can have different and various customers. It’s up to them how to sell the fonts.

Good points:

  • You could be able to reach more diverse markets, hence, more customers.
  • You could maintain the brand pricing and rights with different resellers.

Bad Points:

  • You need to know a lot about business.
  • You have to share your earnings with the reseller.

Things to consider about your foundries:

  • Who are their clients?
  • Are they pretty respected?
  • What are their methods?
  • What fonts do they actually sell?

Here are some resellers you can visit: Graphic Design Forum

  • Forever Alone Method – if you think you can handle it, you could go by yourself. Though it may be pretty scary to sell fonts on your own, it can give you a very good value boost. But it could be pretty difficult as you have to have great designs that stand out to do this.

Good points:

  • You have full control over your design and selling strategy.
  • You could take home 100% of the profit.
  • You can establish a name for yourself.

Bad Points:

  • You need to know a lot about business.
  • It requires less time on designing, more on selling.
  • It is pretty difficult to go in the system.

Tools you might need to use and some alternatives

As you will be delving into the world of font creation, you will appreciate the following tools, which will make your life easier and your designing experience, more fun.

For Drawing the Fonts

  • Paper and Pen – very rudimentary, yes, but this method is still accepted. If you have a cool handwriting and a pretty decent pen and a clean sheet of paper, you’re on the go. You could just scan it afterwards. (Tips: Draw big to achieve higher resolution and detail)


Photo by Jeenie Green

  • Pen Tablet Input Tool – this is for serious designers. This will cost you money but will spare you from scanning the fonts. So it’s also a good deal.


Photo by James

  • For Editing the Drawings

 Adobe Illustrator –Adobe Iillustrator is a very versatile tool to vectorize your fonts. It’s pretty complicated but learnable.


Photo by Viktor Hertz

GIMP – GIMP is very easy to use, though, lacking the features that Illustrator possesses.


  • For Rendering the Fonts

Fontographer ($350) – easy to use yet powerful font editor. You can design typefaces, customize existing fonts and it displays them in high resolution!

FontLab Studio ($650) – is a professional font editor used by major computer companies and most font foundries. It is very comprehensive and yet flexible software that targets professionals and amateurs alike.

Fonstruct(free) – is a fully operational web-ran software that allows you to create your own fonts. You can register as a user to be able to render your design.

Other free tools here!


The creation and selling of fonts just proves that the typeface is important in any aspect of design. Creating new typefaces signifies that this notion is still alive and moving. With newer designs emerging almost every day, it’s pretty good to see that it adds a sense of uniqueness in the design, making it more viable for income. Truly, when you learn how to make fonts, you’ll be in places you’ve never been.

January 21 2014


44 Free Sci-Fi & Techno Fonts For Creative Designer

Choosing right kind of fonts for a design can go a long way in making that design a true success. Moreover, by using fonts appropriately you can also make your design stand apart in the crowd. Though, there have been different types of fonts released recently that make choosing the most suitable font for a design even more easier. For this session, we are presenting 44 striking and free to use techno and sci-fi fonts.

Such types of fonts are extremely popular among the designers, and they are most suited for showcasing your creativity rather than readability. By using these fonts in a design, you can set a tone of the design and make it look even more interesting. Do have a look at this collection and feel free to download them. Do share your comments with us via comment section below. Enjoy!


Star Jedi

Vermin Vibes 2 Black

Earth Kid



CF Spaceship


Complex bruja

Spac3 neon

Planet Kosmos

Space Age




Moiser font


CGF Locust Resistance


Not Just Groovy

Orena font

Star Trek Future

Digital tech


Elemental End




Arkitech Medium

Dead Space Box Art

Individigital Black

CF TechnoMania

Groovy Fast



Zuber stone

Robofan Free








January 06 2014


14 Creative And Quirky Fonts For Free Download

Font selection can play an important role in the success of any design. fonts always have a fundamental role in design and using them appropriately can bring out some amazing results. Fonts, when selected carefully, can have the power to completely change the message and feeling of your design that you are trying to convey.

Below, you will find an interesting collection of 14 free and creatively quirky fonts. Now let the need cool down with these 14 really cool, creative and quirky Fonts to set your styles to the real nitty-gritty essence of what you’re trying to express… Click on and get funky!. Do let us know what you think about this compilation. Feel free to share your opinions and comments with us via comment section below.
Have fun!!


( Download )

Gayatri Sans Serif font

( Download )

Rich McNabb Font

( Download )

Verano (Tipo)

( Download )

Hanoi Typeface

( Download )


( Download )


( Download )


( Download )

Good Intent Typeface

( Download )

Wamed Font

( Download )


( Download )


( Download )

Ontwerp Free Font

( Download )

Quirky Nots

( Download )


( Download )

December 24 2013


471 Premium Design Resources for Free from! (sponsored)

Advertise here with BSA

Inky Deals is one of the leading deals websites in the design community, with an extended family of more than 300,000 design enthusiasts. It’s the place to go if you want to buy premium resources at unbeatable prices, whether you’re a graphic or web designer, developer, or business owner looking to improve yourself and your work.


They’re the only deals website who offer a 200% money back guarantee on every product. This means that if you’re not happy with it, you get your money back and you also get to keep the product.

471 Premium Design Resources for Free

Because Inky (the lovable little ink blob and mascot of Inky Deals) and his team enjoy giving back to the community, they’ve created a huge free web design bundle: 471 Premium Design Resources for Free value $519, which you can find exclusively on Inky Deals.



It contains textures, UI kits, HTML, PSD & WordPress templates, patterns, fonts, courses and much more. Here are their partners who helped them put this great bundle together:



This bundle has got dozens of good reviews, hundreds of shares and thousands of fans from all over the world. Let’s see what you get by downloading this full pack of resources:

45 OpenType Fonts from 128Bit Technologies


Pixel Perfect Social Media Icons from Design TNT


Dead Stocker PSD Website Template from DesignModo


Subtle Patterns Set from Design TNT


This is just a small part of the design goodies you get by downloading this free bundle. Check out the entire 471 Premium Design Resources for Free!

December 17 2013


Let It Snow: Festive Resources to Santa up Your Website


In these special times we tend to not only decorate houses, streets, the whole country, basically. We don’t even leave our websites untouched. Christmassy looks are mandatory these days. If you are on the lookout for a bunch of effects to implement on your blog, portfolio, whatever, look no further. We have compiled a small collection of just what you need to bring that Santa sparkle to the eyes of your visitors.

December 12 2013


45 Fresh And Free Fonts For Creative Designers

Once again we are going to share with you what we have gathered from all over the web. In this assortment, we are presenting 45 free and outstanding high quality fonts for your next projects. This collection is the treat for the designers because they always want and are ready to add new and fresh fonts to their design toolbox so that they can use them for their wonderful designs. All these fonts are packed with complete information so that you can easily use them. We hope that these fonts will help you in your designing.

So, here is the complete collection that showcases some of the best, fresh and high quality fonts which we gathered for you from all over the web. We hope that this collection would be of great assistance for all the creative and outstanding designers. Click through and feel free to download these wonderful, fresh and free fonts. Feel free to share your opinions with us. Enjoy!

Iron Typeface


Before Breakfast

CF Ribbon



Slant Geo

Distractor free typeface


Brooklyn Font

CF Jeans Collection

Track free font

Bamq Typeface

Serious Man

Relapse Into Madness


EtXetera Font

Kill The Noise


CF Anarchy

Damaged Serif

Benthem Free Typeface

Happy Birthday, Baby

Dooodleista Type

DK Sleepy Time

Luna Kronik Light Font

Alright Scrapbooky

True Love Free Font


American Brewery Rough

Graphic Design font by weknow

Low poly typography

Wild Scratch


Cellos Script

Chomp! Typeface


HIGH TIDE free typeface

Yuma Typeface

Nexa Slab

Billion Stars

Southern Aire


Motion Picture


December 10 2013


Freebie: Exo 2.0, A Contemporary Geometric Sans Serif Font


Back in the days when he was a student, Portuguese graphic and type designer Natanael Gama started to play with glyphs — as a way to discover typography. Doodling around, he created Exo, a font which he released for free in a Kickstarter project. The project turned out to be quite successful. Exo became so popular that Natanael did a complete redesign.

It was two years ago. Today, Natanael is no longer a student and Exo has evolved into what we are happy to present to you today: Exo 2.0, an elegant, contemporary geometric sans serif typeface.


For Exo 2.0, every single glyph has been redesigned from scratch to achieve maximum legibility without compromising on the aesthetics.


Exo 2.0 has a more organic look and increased contrast, so it performs much better at small font sizes and on long passages of text. The fatigue of the reader is reduced by increasing the white space around the glyphs. Exo 2.0 has been released under the SIL Open Font License 1.1.


Exo 2.0 now has a bigger language coverage specially due to the integration of cyrillic characters in all the glyphs on all of the 9 weights both in upright and italic. All glyphs were hinted. Hinting adjusts the design of the glyphs to the pixel grid, creating a better flow of text specially on small font sizes.

Exo 2.0 is a very versatile font. It has 9 weights (the maximum on the web) and each with a true italic version.


Download The Freebie

Behind The Design

Here are some insights from Natanael himself:

Along with the redesign of the glyphs, I also redesigned the space around the glyphs. Typography is designing the form as much as designing the counter form. Spacing and kerning was a problematic issue in the older Exo, but now it looks beautiful (however, don’t buy it from me, test it for yourself).

This new design is very versatile and I hope to see it used in very different contexts, as the first version has been used. Exo 2.0 has a very contemporary look, so if you want your design to look fresh and stand out, I encourage you to use it.

Even though this font was primarily designed with screens in mind, I also thought about print, so don’t be admired if you see subtle ink traps and find some ligatures for you to have some fun.


© The Smashing Editorial for Smashing Magazine, 2013.


Make a Snatch: More Than 2,000 Commercial-Use Fonts for the Price of Not Even One


There are a handful of things every designer cannot have enough of. Ready-made resources are one of these things and, thus, always appreciated. They need not necessarily be free, yet shouldn’t cost a fortune, either. In this Deal of the Week we have fonts for you – loads of fonts. More than 2,000 fonts out of more than 300 font families will have you spoilt for choice. What you don’t need to decide is which ones you’ll wanna buy. They are all great, so there’d just be the agony of choice again. Instead, just snatch them all for a mere 27 dollars. Don’t laugh, we’re serious…

November 22 2013


6 Free Fonts for your Projects

Advertise here with BSA

Here at WDL, we love to browse the web to find good freebies for you, especially fonts. Good typography is something every designer should be concerned with, and having a diverse collection of fonts makes it that much easier. With that in mind, we’ve gather six excellent free fonts for you to add to your design library.

TUA Type

6 Free Fonts for your Projects
6 Free Fonts for your Projects

Pancetta Pro

Free versions are: Regular & Italic, but make sure to check all other versions.

6 Free Fonts for your Projects
6 Free Fonts for your Projects


You need to go to dribbble to get the font.

6 Free Fonts for your Projects
6 Free Fonts for your Projects
6 Free Fonts for your Projects

Sketchetik Fill

Free version: Ligth, but make sure to check all other versions.

6 Free Fonts for your Projects
6 Free Fonts for your Projects

Adria Grotesk

Free versions: Adria Grotesk, but make sure to check all other versions.

6 Free Fonts for your Projects
6 Free Fonts for your Projects

Klaus FY

Free versions: Medium, but make sure to check all other versions. The font Klaus FY Medium will be free till Jan 2 2014 only.

6 Free Fonts for your Projects
6 Free Fonts for your Projects
6 Free Fonts for your Projects

November 17 2013


10 Professional-Looking and High Quality Fonts for Web Designers

The importance of fonts to designers has always been emphasized. Many design blogs also agree that as designers, choosing high quality fonts is like choosing your clothes. People will think of you differently if you sport the wrong one.

That is why we collected ten beautiful fonts for you that you will never hesitate using. They are fonts that will both compliment your body texts and titles. They are very flexible and trendy, so you will have no problem using them in your designs!

I will not make you wait any longer, so here they are:

Myriad Pro






Helvetica Neue

helvetica neue

Roboto Slab

roboto slab





Josefin Slab

Josefin Slab



Pt Serif


Every designer has their own say on things, and we would love to hear what you think about this collection! And if you have a favorite font that you regularly use and recommend to people, feel free to post it below!

Here are some relevant articles that you might want to read:

November 08 2013


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…

November 05 2013


High Quality Free And Stylish Fonts For Graphic Designers

There are many elements that are of crucial importance in every field of life. These elements have the nature that they either make or break the appearance of anything just by their presence in the arena.

In graphic designing world, fonts and typefaces are the elements that either bring your design to life or cause the fatal elimination of it altogether. Their impression counts most as everything about them is important, where you place them, how you compose them, their style, their size, texture etc. and none of these are manageable and until one key factor is well met, and that is “High Quality”. No High Quality fonts and you risk losing the quality of your design on the whole.

Considering that, today we have a collection of astounding High-Quality fonts for free so you can meet up with any type of theme to design and spark up your creation like pros. Download to load up!

Ford – And is Better


Valk Display font


Johanna Free Font


HECTICA Typeface (Free)


CHE’s Bone – Free Font


Typometry Free Font


Higher – Free Font


Lovelo Inline – Font


NOUGATINE free font


Rispa Regular Typeface


Navia Type Free


Oh! Mai Mai!


Liquor Typeface


Mood Type


Hyped Free Font


Tetra Free Font


October 29 2013


How to Identify Any Font That Caught Your Fancy

Advertise here with BSA

Designers and bloggers from all around the world acknowledge the importance of using a catchy font in their endeavors, insofar as the actual text encased in a piece of work/article has to ignite the attention of all visitors, and secure it for any important information that you wish to convey. Whereas the visual impact of an image hardly ever fails to raise interest, there are no guarantees that the same interest will grace written content. The best way to impress in this sense is to apply a great-looking font to text.

I’m sure we’ve all been in the following situation, on more than one occasion: you’re surfing the internet and suddenly catch sight of a wonderfully written word, which compels you to obsessively spend what afterwards seems like ages in the attempt to track down that font and employ it in your projects. You can break this unhealthy habit by choosing to enlist the help of


Basically, the service helps you identify fonts which eluded your keen “hunting” skills so far. As such, you may either run a manual search by typing in keywords into the search box and wait for relevant results to be extracted from the huge database and then placed on your plate. Alternatively, users can insert the URL of a picture which contains the word written in the avidly sought-for font. On the flipside, the best way to go about this would be to simply take a screenshot of that word, and upload the capture onto the website.


In just three easy steps, you’ll have your font. Firstly, you need to upload the captured screenshot so that the online tool can focus on it and run a thorough search. Before the service takes up a task, though, you should also be careful to check the box indicating whether the background is lighter or darker than the letters, and then press “Continue”.


Secondly, you’ll notice that your word is spliced by letters, which must be individually confirmed in their adjacent boxes. Afterwards, you need to tick the right option: either you will be presented with all matching/alternative types of fonts, or with just those that are free of charge, or exclusively with the commercial ones.




Thirdly, you click on “Continue” once again, and behold the results page. If you followed the prior steps to the letter, you’ll be presented with the exact matches or the closest resemblances to your quarry. And that’s it! Give it a try by visiting

Tags: Fonts

October 15 2013


Type Makes A Difference: An Exploration Of Type-Focused Websites


In this article, we’ll take you on a thought-provoking journey through a couple of carefully selected Web designs. Certainly, these websites have some captivating interactivity; however, the selection of type and the typographic styling and spacing are the reasons why we chose them for this piece. In the context of typography, considering composition and grid structure is also important.

Why Grid Structure And Composition Are Crucial To Typography

Composition and grid structure are vital factors in effective communication with type. In Thinking with Type, Ellen Lupton comprehensively explains the benefits of working with a grid. She addresses the flexibility of grids, what grids offer in integrating type and image, and how they can organize a complex hierarchy.

There is an inextricable link between typeface, type size and measure (i.e. line length). While a design’s appearance can vary from screen to screen, good designers are experts at creating enticing, digestable amounts of information, carefully composed to hold our interest. However, losing the connection with the audience is all too easy. For example, text set small on long lines can make for daunting reading, and text set large on short lines is equally problematic, though for different reasons.

In the latter case, the line breaks could overwhelm the punctuation, demanding the reader to refocus their attention every few words. In both situations, the extra long or extra short lines could lose the reader’s interest all on their own.

Long line type500

short lines typeB500
These two examples demonstrate well the challenges of fitting relatively small text into either a very wide or very narrow measure. Neither is easy to read and both are unappealing. (Design by Bright Pink) (Larger views: Image 1, Image 2)

Sections with different levels of importance require different levels of prominence to guide the user through the website and hold their attention. A consistent measure in sections of relatively equal importance is a helpful and reassuring guide. Inconsistency is confusing.

uneven columns 1000
When text of the same priority extends across multiple columns, a sudden change in measure for no apparent reason would be confusing. (Design by Bright Pink) (Larger view)

Grid Structure

In this section, the websites we’ve highlighted show how a grid can affect typography, creating appeal, accessibility and structure and supporting the hierarchy.


The grid structure of SilkTricky has six columns to break down information into enticing segments. The consistent typographic system for headings contrasts the lighter tones of Bookman Light Italic (for category descriptions) with the very different visual rhythm of Futura Condensed Bold.

Silktricky A 500
(Larger view)

These typefaces complement each other well, creating a dramatic change in scale, case, texture and weight. The contrast tempts you to look further, drawing you to each segment’s few lines of descriptive sans-serif text.

(Larger view)

At the click of a button, the copy smoothly expands to a few paragraphs and across two columns, just enough to get you hooked while still adhering to the grid. This longer descriptive copy creates another level of typographic texture and tone that contrasts effectively with the headings, providing a welcome change of pace and visual rhythm.

Percussion Lab

Percussion Lab also makes effective use of the grid, flexibly using four columns to feature a detailed mix of sets from contributing artists. Each featured item fits into the column structure and overall hierarchy, including details on the date, artist, set name and genre. The highlights expand to fill two columns and feature a track listing and helpful details.

Percussion lab A 500
(Larger view)

Percussion labB 500
(Larger view)

The fonts, a blend of serif and sans serif, feature changes in weight, case, orientation and spacing to reinforce the hierarchy. Typographic detail and the grid structure also establish and maintain interest and trust.

The New Art Gallery Walsall

The website for The New Art Gallery Walsall in the UK uses sans-serif letterforms clearly and appealingly, but the changes in scale and the pleasing grid are what make this website truly memorable. The main body of text extends down the left side, with other aspects, such as links and highlighted details taking up columns to the right.

Walsall A 500_mini
(Larger view)

Wasall B 500_mini
(Larger view)

The open uncluttered typography and generous space reflect the gallery’s own architecture, its important collections and its commitment to making art both accessible and enjoyable.

Type That Attracts Users

Is the substance of the text what matters most? Undoubtedly, this can be true, especially if the language is stimulating or addresses the user’s personal interest. Text that makes us laugh or that is risqué or controversial can be a great draw, too.

However, there is more to drawing interest: the type’s style, texture and tone, general appearance and layout play a great part in whether users take an interest. Type can also enhance the subject matter of an article, reinforcing the emotional weight, the aesthetic, or the exclusivity of the product.

Crockett & Jones

The website of Crockett and Jones is one such example. The English company has been handcrafting fine shoes since 1876, and its website undoubtedly reflects this wonderful heritage through both its imagery and type. The name style appears on each page, and the individual letterforms echo the decorative style of Victorian design. Microsoft Georgia is used sensitively for body text to complement the name style and to reinforce the sense of heritage, quality, style and attention to detail.

Crockett and JonesA500
(Larger view)

(Larger view)

In writing this piece, I found myself thinking of Beatrice Warde’s well-known article from 1932 on printing and type, “The Crystal Goblet,” in which she argues that “printing should be invisible.” She specifically addresses type, using the metaphor of wine in a glass to explain that the printed word shouldn’t in any way hinder the meaning of text. Warde reasons that type should complement and enhance meaning and increase our understanding and appreciation.

This connects well with what Marko Dugonjic says in “Designing for the Reading Experience”: “Seamlessly digesting written matter is possible only when the typography is well thought out and legibility is facilitated by a considered reading experience.” Obviously Warde’s article predates the Web, but the principles it espouses are relevant today.

Combinations Of Typefaces

Selecting and combining typefaces to reinforce a theme is always a challenge. It demands patience to try out alternatives and visual acuity to assess effectiveness. The websites in this section mix pleasing and well-chosen faces and type styles to emphasize subject matter, to boost appeal and sometimes to surprise.

Four Seasons

Dramatic contrast in texture and tone is achieved with type on Four Seasons’ website, which brings together different styles and weights of Garamond with some of the many variations of Helvetica. The visual rhythms of uppercase and lowercase Garamond Italic sit side by side with the strong vertical strokes and very different pace and texture of uppercase Helvetica Condensed.

Delve into the website to experience this dramatic contrast reinforcing the hierarchy and the style, quality and reputation of the Four Seasons brand. Both Garamond and Helvetica are available in numerous weights and styles, making them both very useful for complex hierarchies.

(Larger view)

(Larger view)


With the headings on Nowness, CreateThe Group has elegantly mixed uppercase and lowercase Garamond Italic with uppercase P22 Underground Titling. This combination exudes class; the graceful strokes of Garamond Italic have a pleasing textural contrast with the sophisticated lines of P22.

Nowness 500
(Larger view)

CreateThe Group has paid careful attention to intercharacter spacing and changes in scale, carefully controlling the tone and hierarchy and reinforcing the stylish subject matter of the website.

Barcamp Omaha

Barcamp Omaha’s website, designed by Grain and Mortar, promotes what is described as an “unconference,” an informal occasion to listen to and meet others and network. With a considerable amount of illustration, the website brings together three well-chosen, contrasting fonts, two of which have obviously been selected for their potential as heading fonts.

Barcamp A500


These two — one a bold, slightly condensed uppercase sans serif, and the other a companion all-cap slab serif — have a slightly retro feel that is often associated with an American college aesthetic. The text is enclosed within multiple small panels; however, the change in font and the variation in weight and color are the things here that prioritize detail and reinforce hierarchy.

Warhol Initiative

The website for the Warhol Initiative, by Toky, shows typographic audacity. Condensed typefaces can be a challenge to read; strong vertical strokes of letterforms combined with compact characters can, on occasion, hinder legibility. Here, Toky brings together a serif font with a dramatically contrasting condensed face, showing great skill and bravery.

(Larger view)

The careful intercharacter spacing and measured type sizing help to ensure ease of reading. The pace and texture of type are well supported by the condensed font, speeding the user through the condensed headings to the details that follow. This condensed typeface has been well selected to complement Warhol’s style and era.


Combadi, designed by Radial, could easily appear in a number of the sections in this article. Its grid structure is based on 12 columns and can be seen in various configurations as you progress through the pages. However, the combination of typefaces is the really arresting aspect of this design. Brandon Grotesque and Museo Slab combine with great sensitivity and finesse to reinforce the hierarchy.

(Larger view)

(Larger view)

Museo Slab is used for the body text, and the generous x-height, short ascenders and descenders and wide letter spacing make for easy reading. Changes in color are also applied to instances of Museo Slab, adding emphasis and reinforcing Combadi’s brand and color palette. Brandon Grotesque is complementary and contrasting, mostly restricted here to secondary headings, navigation and Combadi’s name style.


Designed by Un.titled, Aria’s online shop has elegant high-contrast serif letterforms. Headings in italic feature particularly unusual forms of lowercase v’s and w’s, reinforcing the exclusivity of Aria’s designs. Contributing to the distinctive typographic character are the limited tonal changes within the text. To adequately capture hierarchical differences with considerable subtlety, Aria has varied the scale and adopted italic type.

(Larger view)

(Larger view)

(Larger view)

Spacing, Leading And Intercharacter Spacing

Spacing within and around type is crucial to making the text appealing and legible. Even if you’ve selected the ideal typefaces, the design’s ultimate success could fall by the wayside if spacing is not satisfactorily addressed. On the websites in this section, spacing around and between letterforms has been carefully considered, not only making the designs more appealing, but helping the user to read the copy comfortably.

STL DesignWeek

The design for STL DesignWeek is unusually angled and highlights what can be achieved by subtle line and letter spacing. The sans-serif face has been selected for its proportionally large, open, rounded x-height and slightly wide letter spacing. Line spacing is broad, too, reinforcing the airy feel and guiding the reader from line to line, making for a pleasant experience.

STL A 500_mini
(Larger view)

STL B 500_mini
(Larger view)

The Beetle

DDB Tribal designed The Beetle’s website, which focuses on the spirit and heritage of the Volkswagen Beetle. The character of the car — a reliable, hardworking vehicle for all — is admirably captured in the type. Typographically, the website is simple, with letterforms limited to two weights of Futura.

(Larger view)

(Larger view)

The clarity of the type is evident, with careful letter and line spacing that reinforce the simplicity of the Beetle’s story. Headings are given extra letter spacing, as if to slightly enhance its tonal difference from the rest of the copy and to reinforce the character of this iconic brand. Generous, broad leading draws the user comfortably along each line of text, making the Beetle’s story an enjoyable read.

I Love Typography

If you are not familiar with I Love Typography, do take a look; anyone with a passion for type will find so much of interest. Some beautiful selections of typefaces appear throughout the website, and as you progress from article to article, you are helpfully told the names of the fonts used, which include FF Basic Gothic Web Pro, Le Monde Journal STD and Le Monde Sans STD.

(Larger view)

(Larger view)

The typefaces and combinations are elegant, but the leading and intercharacter spacing also reinforce the sophisticated and refined feel. The title for each article is set in a lightweight, relatively large-scale uppercase and lowercase sans serif, with intercharacter and word spacing that also show a delicate touch. The link between the space within the counterforms of the letters and the letterforms themselves is pleasing. This delicate touch complements well the type that follows.

I Love Typography takes a careful approach to the spacing in the opening text for articles. It strikes the right balance between just enough space to draw the eye along each line, guiding it to the next, and leaving just enough space for links, with their generously spaced, dotted underlines. The underlines are frequent and are centered below the base line and above the x-height; they have been positioned to avoid any clash with ascenders or descenders. The space throughout all levels of text creates a contrast that reinforces hierarchy, aids reading and helps to captivate.

Changes In Scale

Changes in the scale of type are frequently done to indicate prioritization and hierarchy. One of the most common approaches is to set headings in large bold type and body text in smaller, lighter type. The examples in this section show much more ambition.

Design Waller Creek: The Final Four

Changes in scale are an excellent way to create structure and assign priority, and they can be one of the few solutions available if the selected font has few weights and styles. The “Final Four” section of Design Waller Creek’s competition page changes scale to reinforce hierarchy. Four lines of the largest type form an introductory statement, followed by a section of considerably smaller copy set in the same face. For the heading that follows, the text returns to the size of the introductory copy, possibly in a slightly lighter weight, before reverting to the smaller size for the bullet points.

(Larger view)

(Larger view)

(Larger view)

The tone here is noteworthy, too; copy is predominantly set in gray, but the much larger, lightweight slab-serif headings that serve as section indicators are tonally very similar to the smaller text on the website. This comes down to the hairline weight of the slab-serif font, which echoes the weight of the smaller letterforms.


There are many pleasing aspects to the typography in Caravus, by Toky, but the changes in scale merit particular attention here. The text has a varied hierarchy, setting the stage for changes in weight and dramatic changes in scale. Large lightweight slab-serif letterforms are used for headings, contrasting with the much smaller, darker body copy.

(Larger view)

(Larger view)

(Larger view)

This is a departure from a typical hierarchy, with large bold type for headings and smaller lighter type for the body. Throughout the website, quotes, statistics and other high-impact information are accentuated by changes in scale, often in combination with bright color. You could describe this as “type as image,” playfully attracting attention, while reinforcing the hierarchy in a memorable way.

As in most cases, visual judgement is key, and the hierarchy here is well supported by the textural and tonal contrast arising from the changes in scale and color.


All of the designers we’ve showcased use type sensitively, making careful typographic choices that reinforce their message and brand values. The design decisions establish hierarchy and stimulate appeal, and the combination of images, color and typography make for highly memorable visuals.

We’ve focused on typography and on how engaging it can be; hopefully, it has broadened your view and drawn your attention to some of the minutiae involved in effective typography. Perhaps this piece will move you to continue on your own thought-provoking journey through the typographic details of other websites. Since the time of Beatrice Warde, new technologies have enabled us to more easily experiment with typographic alternatives and new letterforms to speedily communicate content while maintaining appeal.

Useful Links


Website Designs

(al ea)

© Jessica Glaser for Smashing Magazine, 2013.

October 10 2013


IcoMoon, Fontello and Best of Icon Fonts


Icons are the best invention since canned beer, at least designers might agree. They are definitely on the rise in popularity. Mobile devices with their comparably small screens boost the use of icons as natural choices for navigation menus in modern web design. New icon sets get created by the hour. Especially mobile design is the trigger for a new breed of icons. These are no longer implemented in the form of individual PNGs or so-called sprites. Icon’s successor is the icon font. Iconfonts have many advantages with the biggest being their free scalability to any size, while at the same time reducing server requests to an absolute minimum. The downside of icon fonts is, that in most cases you will not need the whole font set or – even worse – need icons from different font sets. Font generators have come to deal with both of these problems. Today we’ll take a look at three of the best generators the web has to offer…

October 09 2013


140 Quirky and Serious Free Fonts of 2013

Choosing the perfect font for your projects is an important step, as it could make or break your design entirely.  Wrong choice of font can break your flyer, poster, business card, blog, just about anything. We know that it takes a lot of time to look for a font that would really fit your design, that is why it is also important to have as many fonts as you can!

In my previous article I made a list of FREE UI Kit to Boost your Design in No Time! And now to make it even faster for you to create an astonishing design, I’ve compiled a long list of FREE fonts made within 2013! More choices means more fun!

Feel free to play with these free fonts and find the best match for your design!

1. Kenzo


2. Benito Clean Italic


3. Yeseva One


4. Matchup Light


5. Otsu Slab Mediuma


6. PIXACAISM Free Font


7. Airbag


8.  Iversal Font


9. EtharnigSc & EtharnigNo12


10. Ponsi Rounded Slab


11.  KG A Little Swag


12. What’s My Age Again


13. Quirky Nots 


14. Font (free vector download)


15. Kelson Sans


16. Summit


17. Bamq Typeface


18. Moderna Unicase Medium


19. Corbert Regular


20. Xclv.Neon Pro 


21. Foro Rounded Light


22. Corbert Italic


23. Langdon


24. Brisko Sans Bold Italic


25. Muchacho


26. Sex and Candy


27. Jack Runner


28. Brisko Sans Bold


29. Modular free Typeface GADO




31. Dragon Force


32. Fopi Rush


33. Dickson’s Tales


34. Bisurk


35. Bacana


36. Liquor Typeface


37. Cyntho Slab Pro Regular


38. Cyntho Slab Pro Italic


39. Lev Serif by TypeFaith*Fonts


40. Digitalino


41. Myra free font


42. Oami


43. Quark


44. Capita Light


45. Aleo free font


46. Intrique Script


47. CHRONIC Typeface


48. Borgia Pro


49. Altrashed-Rough


50. Bouh Type


51. Dense


52. South Rose


53. Sanchez Slab Regular


54. Sanchez Slab Italic


55. Heister Type


56. Dos Amazigh Font




58. Nudo Free Font


59. Dollar Lemonade Font


60. Sequi


61. Les Etoiles


62. Chomage


63. Chomp


64. BRIG 


65. Grandma’s Garden


66. Belladone


67. Versa


68. Discreet Font


69. Free fonts Namskout & Namskin


70. Free Font!


71. Agilis


72. Sabado




74. Massief typeface


75. Corduroy Slab


76. Hair Problems


77. Track free font


78. Smitten Over U


79. Valkyrie




81. Global Medium


82. Global Medium Italic


83. Global Medium Stencil


84. Speakeasy


85. Lovelo font


86. Canter Typeface


87. Hapna Slab Serif


88. Truelove


89. LeHand Font


90. «zwodrei»


91. Born




93. Uralita Bold




95. Tomahawk Font




97. XXII Centar Sans




99. Vidaloka




101. Brassie Regular


102. Scribbage


103. Maw Free


104. AC Filmstrip


105. Biko Regular


106. Valk Display


107. Dia Font


108. London




110. VETKA




112. Hiruko Pro (FREE)


113. Look Up


114. Saniretro


115. Higher




117. Villa font 


118. Laika FREE


119. Mexicano Chili Sauce


120. BoB Font


121. Gabriela


122. Orange Juice


123. Attentica


124. Distractor free typeface


125. Engine font


126. Brain Flower


127. Braxton font


128. Marta free font


129. Iron Typeface


130. Idealist Sans


131. Supra Thin Compressed


132. Urban Circus Deco (Personal)


133. Equip Light


134. Clinica Pro Regular


135. Babetta Neon Tube


136. Supra Extra Light Mezzo Italic


137. PEYO Regular – Free Font


138. Ore Crusher


139. Track&Field


140.  Paihuen Mapuche Free Font


These fonts are certainly free for personal use. For commercial use please check the license that comes with each item.

To avoid having caught by a Font Police you should from time to time update your font library!

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

Don't be the product, buy the product!

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