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

February 18 2014

16:07
14:58
11:47

February 14 2014

14:00

February 03 2014

14:30

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.

.create-your-own-font

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.

create-your-own-font-01

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.

create-your-own-font-02

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.

create-your-own-font-03

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)

create-your-own-font-04

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.

create-your-own-font-05

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.

create-your-own-font-06

Photo by Viktor Hertz

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

create-your-own-font-07

  • 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!

Conclusion

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

16:28

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!

Coalition

Star Jedi

Vermin Vibes 2 Black

Earth Kid

Teio

OmegaForce

CF Spaceship

Prometheus

Complex bruja

Spac3 neon

Planet Kosmos

Space Age

TR2N

Xolonium

Nasalization

Moiser font

Zian

CGF Locust Resistance

FoughtKnight

Not Just Groovy

Orena font

Star Trek Future

Digital tech

Rawengulk

Elemental End

Resagokr

Rixon

Bule

Arkitech Medium

Dead Space Box Art

Individigital Black

CF TechnoMania

Groovy Fast

Eunomia

Angled

Zuber stone

Robofan Free

Bim

Capsture

Hexa

Technonomicon

Battlestar

X-Files

MANABU

January 06 2014

13:46

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!!

Inky

( Download )

Gayatri Sans Serif font

( Download )

Rich McNabb Font

( Download )

Verano (Tipo)

( Download )

Hanoi Typeface

( Download )

Higher

( Download )

Rhyder

( Download )

Newsense

( Download )

Good Intent Typeface

( Download )

Wamed Font

( Download )

Glitch

( Download )

London

( Download )

Ontwerp Free Font

( Download )

Quirky Nots

( Download )

Newgeo

( Download )

December 24 2013

11:52

471 Premium Design Resources for Free from InkyDeals.com! (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.

471-premium-design-resources-free-InkyDealscom-1

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.

471-premium-design-resources-free-InkyDealscom-2

Partners

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:

471-premium-design-resources-free-InkyDealscom-3

Resources

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

471-premium-design-resources-free-InkyDealscom-4

Pixel Perfect Social Media Icons from Design TNT

471-premium-design-resources-free-InkyDealscom-5

Dead Stocker PSD Website Template from DesignModo

471-premium-design-resources-free-InkyDealscom-6

Subtle Patterns Set from Design TNT

471-premium-design-resources-free-InkyDealscom-7

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

10:00

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

17:20

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

Smorgasbord

Before Breakfast

CF Ribbon

Cylburn

Baron

Slant Geo

Distractor free typeface

Escape

Brooklyn Font

CF Jeans Collection

Track free font

Bamq Typeface

Serious Man

Relapse Into Madness

Drakolomb

EtXetera Font

Kill The Noise

Sequi

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

Livia

American Brewery Rough

Graphic Design font by weknow

Low poly typography

Wild Scratch

Phantom

Cellos Script

Chomp! Typeface

Expansiva

HIGH TIDE free typeface

Yuma Typeface

Nexa Slab

Billion Stars

Southern Aire

Zwodrei

Motion Picture

9sqgrd

December 10 2013

16:23

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.

cover-500

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

comparison-500

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.

hamburge-500

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.

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

exo2-typeface

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.

(ea)


© The Smashing Editorial for Smashing Magazine, 2013.

07:30

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

14:49

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

Glamor

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

14:00

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

myriad-pro

Ubuntu

ubuntu

Lobster

lobster

Helvetica Neue

helvetica neue

Roboto Slab

roboto slab

Oswald

oswald

Stalemate

stalemate

Josefin Slab

Josefin Slab

Lato

lato

Pt Serif

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

11:00

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


  

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

November 05 2013

16:37

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

freefonts

Valk Display font

freefonts

Johanna Free Font

freefonts

HECTICA Typeface (Free)

freefonts

CHE’s Bone – Free Font

freefonts

Typometry Free Font

freefonts

Higher – Free Font

freefonts

Lovelo Inline – Font

freefonts

NOUGATINE free font

freefonts

Rispa Regular Typeface

freefonts

Navia Type Free

freefonts

Oh! Mai Mai!

freefonts

Liquor Typeface

freefonts

Mood Type

freefonts

Hyped Free Font

freefonts

Tetra Free Font

freefonts

October 29 2013

15:01

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 WhatFontIs.com.

1

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.

2

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”.

3

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.

4

5

 

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 WhatFontIs.com.

Tags: Fonts

October 15 2013

12:28

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.

SilkTricky

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.

SilktrickyB500
(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)

crocketandjonesB500
(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.

FourseasonsA500
(Larger view)

FourseasonsB500
(Larger view)

Nowness

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

BarcampB500

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.

Warhol500
(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

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.

CombadiA500
(Larger view)

CombadiB500
(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.

Aria

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.

AriaA500
(Larger view)

AriaB500
(Larger view)

AriaC500
(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.

BeetleA500
(Larger view)

BeetleB500
(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.

IlovetypeA500
(Larger view)

IlovetypeB500
(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.

WallcreekA500
(Larger view)

wallcreekB500
(Larger view)

wallcreekC500
(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.

Caravus

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.

caravusA500
(Larger view)

CaravusB500
(Larger view)

caravusC500
(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.

Conclusion

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

Articles

Website Designs

(al ea)


© Jessica Glaser for Smashing Magazine, 2013.

October 10 2013

06:30

IcoMoon, Fontello and Fontastic.me: 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

13:00

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

Free-Font-1

2. Benito Clean Italic

Free-Font-2

3. Yeseva One

Free-Font-3

4. Matchup Light

Free-Font-4

5. Otsu Slab Mediuma

Free-Font-5

6. PIXACAISM Free Font

Free-Font-6

7. Airbag

Free-Font-7

8.  Iversal Font

Free-Font-141

9. EtharnigSc & EtharnigNo12

Free-Font-140

10. Ponsi Rounded Slab

Free-Font-10

11.  KG A Little Swag

Free-Font-11

12. What’s My Age Again

Free-Font-12

13. Quirky Nots 

Free-Font-13

14. Font (free vector download)

Free-Font-14

15. Kelson Sans

Free-Font-15

16. Summit

Free-Font-16

17. Bamq Typeface

Free-Font-17

18. Moderna Unicase Medium

Free-Font-18

19. Corbert Regular

Free-Font-19

20. Xclv.Neon Pro 

Free-Font-20

21. Foro Rounded Light

Free-Font-21

22. Corbert Italic

Free-Font-22

23. Langdon

Free-Font-23

24. Brisko Sans Bold Italic

Free-Font-24

25. Muchacho

Free-Font-25

26. Sex and Candy

Free-Font-26

27. Jack Runner

Free-Font-27

28. Brisko Sans Bold

Free-Font-28

29. Modular free Typeface GADO

Free-Font-29

30. PALO ALTO

Free-Font-30

31. Dragon Force

Free-Font-31

32. Fopi Rush

Free-Font-32

33. Dickson’s Tales

Free-Font-33

34. Bisurk

bisurk

35. Bacana

Free-Font-35

36. Liquor Typeface

Free-Font-36

37. Cyntho Slab Pro Regular

Free-Font-37

38. Cyntho Slab Pro Italic

Free-Font-38

39. Lev Serif by TypeFaith*Fonts

Free-Font-39

40. Digitalino

Free-Font-40

41. Myra free font

Free-Font-41

42. Oami

Free-Font-42

43. Quark

Free-Font-43

44. Capita Light

Free-Font-44

45. Aleo free font

Free-Font-45

46. Intrique Script

Free-Font-46

47. CHRONIC Typeface

Free-Font-47

48. Borgia Pro

Free-Font-48

49. Altrashed-Rough

Free-Font-49

50. Bouh Type

Free-Font-50

51. Dense

Free-Font-51

52. South Rose

Free-Font-52

53. Sanchez Slab Regular

Free-Font-53

54. Sanchez Slab Italic

Free-Font-54

55. Heister Type

Free-Font-55

56. Dos Amazigh Font

Free-Font-56

57. ARSENAL

Free-Font-57

58. Nudo Free Font

Free-Font-58

59. Dollar Lemonade Font

Free-Font-59

60. Sequi

Free-Font-60

61. Les Etoiles

Free-Font-61

62. Chomage

Free-Font-62

63. Chomp

Free-Font-63

64. BRIG 

Free-Font-64

65. Grandma’s Garden

Free-Font-65

66. Belladone

Free-Font-66

67. Versa

Free-Font-67

68. Discreet Font

Free-Font-68

69. Free fonts Namskout & Namskin

Free-Font-69

70. Free Font!

Free-Font-70

71. Agilis

Free-Font-71

72. Sabado

Free-Font-72

73. SANOTRA TYPEFACE

Free-Font-73

74. Massief typeface

Free-Font-74

75. Corduroy Slab

Free-Font-75

76. Hair Problems

Free-Font-76

77. Track free font

Free-Font-77

78. Smitten Over U

Free-Font-78

79. Valkyrie

Free-Font-79

80. LINUX BIOLINUM

Free-Font-80

81. Global Medium

Free-Font-81

82. Global Medium Italic

Free-Font-82

83. Global Medium Stencil

Free-Font-83

84. Speakeasy

Free-Font-84

85. Lovelo font

Free-Font-85

86. Canter Typeface

Free-Font-86

87. Hapna Slab Serif

Free-Font-87

88. Truelove

Free-Font-88

89. LeHand Font

Free-Font-89

90. «zwodrei»

Free-Font-90

91. Born

Free-Font-91

92. PROMESH

Free-Font-92

93. Uralita Bold

Free-Font-93

94. BELLOTA

Free-Font-94

95. Tomahawk Font

Free-Font-95

96. RELIC TYPEFACE

Free-Font-96

97. XXII Centar Sans

Free-Font-97

98. BARON

Free-Font-98

99. Vidaloka

Free-Font-99

100. ROUNDA

Free-Font-100

101. Brassie Regular

Free-Font-101

102. Scribbage

Free-Font-102

103. Maw Free

Free-Font-103

104. AC Filmstrip

Free-Font-104

105. Biko Regular

Free-Font-105

106. Valk Display

Free-Font-106

107. Dia Font

Free-Font-107

108. London

Free-Font-108

109. STELA UT

Free-Font-109

110. VETKA

Free-Font-110

111. MERRIWEATHER SANS

Free-Font-111

112. Hiruko Pro (FREE)

Free-Font-112

113. Look Up

Free-Font-113

114. Saniretro

Free-Font-114

115. Higher

Free-Font-115

116. SEAGLE FREE FONT

Free-Font-116

117. Villa font 

Free-Font-117

118. Laika FREE

Free-Font-118

119. Mexicano Chili Sauce

Free-Font-119

120. BoB Font

Free-Font-120

121. Gabriela

Free-Font-121

122. Orange Juice

Free-Font-122

123. Attentica

Free-Font-123

124. Distractor free typeface

Free-Font-124

125. Engine font

Free-Font-125

126. Brain Flower

Free-Font-126

127. Braxton font

Free-Font-127

128. Marta free font

Free-Font-128

129. Iron Typeface

Free-Font-129

130. Idealist Sans

Free-Font-130

131. Supra Thin Compressed

Free-Font-131

132. Urban Circus Deco (Personal)

Free-Font-132

133. Equip Light

Free-Font-133

134. Clinica Pro Regular

Free-Font-134

135. Babetta Neon Tube

Free-Font-135

136. Supra Extra Light Mezzo Italic

Free-Font-136

137. PEYO Regular – Free Font

Free-Font-137

138. Ore Crusher

Free-Font-138

139. Track&Field

Free-Font-139

140.  Paihuen Mapuche Free Font

Free-Font-140

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.

Don't be the product, buy the product!

Schweinderl