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

February 26 2014

05:50

February 18 2014

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 28 2014

14:10

From the reader #21

A short lesson on the hyphen, en dash, em dash, and minus sign. Via Happy Cog.

Related is this 2001 post from the A List Apart archives: The Trouble With EM n’ EN (and Other Shady Characters)

Bebas Neue, “the Helvetica of free fonts,” is now available in five weights.

Italy flag from food

18 national flags made from each country’s traditional foods. Inventive promotion for last year’s Sydney International Food Festival, by WHYBIN \ TBWA. Via @ia.

How to fix those fat “l” (el) characters in PDF previews. Definitely appreciated. Via @Vonster.

Bahamas from space

Bahamas from outer space. Via @scienceporn.

And speaking of space, here’s a great one: Flat pack pre-fab garden library.

Say this instead. Such a simple change to how we construct sentences using “but.”

I like this Venn diagram. Cheers Dan.

Venn beaver platypus duck

This sitting/standing desk really looks the part. Via design work life. On similar lines, small-scale.

The ancient cycle of sunset, to night, to sunrise. Full-screen, lights down, volume up, awesome.

Previously: From the reader #20

January 24 2014

14:00

10 Portfolio Websites that Will Make You Say Wow

Why is it necessary to have a portfolio website? Is it a requisite for all designers? Here are 10 portfolio websites that can lead you to the answers.

Why haven’t I thought of that?”

Well, those were the first words I uttered when I saw this collection of websites that will make you say wow. I thought it would be great if I will be able to share these to you.

The answers to the questions above are very simple. It is necessary for a designer to have a portfolio website because it showcases your talent and provides your future clients with an idea of how good you are. If a prospect client wants to hire you, he will of course want to know what your previous projects are and how efficient you were on doing it. They will conduct research (Everybody does. Who wants to throw off their precious bucks for people who can’t deliver, right?) to have an idea about your professionalism, efficiency, speed and talent. If you don’t have a portfolio, where will your clients look?

So, why don’t we begin looking at these and in the end, just be awed and say Wow!

The Toke

portfolio-websites-01

Viewing the projects in this one is as simple as viewing them in a photo browser. With minimal audio and keyboard shortcuts, this portfolio website is professional looking and sleek.

Alex Abramov

portfolio-websites-07

The designer used the big background photo to serve as map-like design where points in the city were made to represent the page you will be viewing.

Zuppaduppa

portfolio-websites-02

This doodle-looking portfolio looks both cute and magnificent. Using Parallax to enable horizontal scrolling, this portfolio simply amazes me.

Insidepiet

portfolio-websites-06

Talk about being creative and interactive! This website rocks. With the cool background music and the transitions, it proves to be one amazing portfolio.

M-1 Design

portfolio-websites-03

Mouse-responsive motion, this website eats it like a piece of cake. Using clever and surreal designs with great transitions, you’d want something like this.

IE Studio

portfolio-websites-04

Simplicity is the main reason behind this website’s beauty. Nothing beats the minimalist. Check out the artistic use of images both of which are photographic and computer generated.

Harlo

portfolio-websites-05

Some things are more beautiful when naked. This website is a great manifestation of it. It is the simplest form of  being simple. No flashy effects, just the off-white colors blended with the occasional red will surely equal to an amazing portfolio website.

Vitor

portfolio-websites-08

This mixed the simplistic and minimalistic designs with great effects. Eyegasmic, this site is easy to understand and navigate.

Guided Creative

portfolio-websites-09

This one amped up retro designs with the flat design trends creating a bright blue beauty.

R Leonardi

portfolio-websites-10

Love interaction? This one interacts with you like a video game. With its clever use of animation and transitions, you’ll find yourself browsing to the last page just to see how it finishes.

Conclusion

Portfolio websites like these serve as inspirations for web designers to continue to hone their talents. Having a great portfolio website is almost tantamount to a great work. Of course, if you are able to design projects which are eye-popping, it is both necessary and obvious that you should have a great portfolio to hold them off.

WOW! Right? What do you think?

Further reading:

6 Tips for Budding Designers to Earn While Building a Portfolio

7 Mistakes that Force Potential Clients to Dislike Your Portfolio

Creating an Effective Online Portfolio: 40+ Tips, Tools & Inspirations

10 Easy Steps On How To Create A Good Photography Portfolio

10 Outstanding Tools to Build Portfolio Easily and Professionally

January 15 2014

14:00

10 Easy To Understand Photoshop Tutorials on Lighting Effects

Most designers find Photoshop very versatile. Photoshop tutorials on lighting effects is highly sought after. Although mainly used in photography, this favorite software of designers bridges different kinds of needs, from typography to web design.

Not to exaggerate, Photoshop can supply all your design needs. Today, we will be highlighting a very particular need. This article is directed mainly to graphic designers and photo enthusiasts but could be a very good springboard to web designers too. With lightning effects added in your photos, you will be able to add more dynamism and professionalism in your designs. In short, it would make your awesome website more awesome. How cool is that?

The need I am talking about is lighting effects. In photography and graphic design, lighting is very important because it stimulates the vision to think or perceive a certain period of the day. Light, in these specific art forms, creates the illusion of time and space. You can readily make people believe that you took a certain photo at night just because the lighting says so. One can also confuse a picture to be taken at dusk when in fact it’s otherwise just because the light says so. Having said that, it is important to put in mind these reminders and master the art of lighting.

For beginners, you’ll find these tutorials very fun-to-do and instructive. For experts and masters, you’ll find these links refreshing. So here they are:

Nike Ad in Photoshop

photosho-lighting-effects-11

Morning Light in Photoshop

photosho-lighting-effects-10

Lomography Effect

photosho-lighting-effects-09

Rainbow Light Effect

photosho-lighting-effects-08

Light Bulb Text Effect

photosho-lighting-effects-06

Apocalyptic Effect

photosho-lighting-effects-05

Fiery Explosion

photosho-lighting-effects-04

Dynamic Lighting

photosho-lighting-effects-03

Crystallized Effect

photosho-lighting-effects-02

Scarecrow + Sick Background Lighting

photosho-lighting-effects-01

Conclusion

You have to admit that Photoshop is the best editing software when it comes to photos. With its versatility, you can easily play with the lighting of your photos or graphic illustrations. These tutorials are just guides. Remember that you should never stick to them point by point. You should learn how each step works and how can you adjust them for different photos of different scenarios. This way, you can apply the concepts in your everyday designs.

December 24 2013

05:52

Run Ragged

Mark Boulton completes our calendar with some typographic techniques to improve the reading experience. Typography, like Christmas and advent calendars, relies on the accumulation of small gains for its best effects.

December 23 2013

07:30

December 20 2013

05:42

Untangling Web Typography

Nicole Sullivan understands how the accumulated weight of small typographic decisions can mount up into a tangle of CSS declarations. With a new tool at your disposal you can take stock and clear up the mess like it’s Boxing Day.

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.

November 21 2013

14:21

45+ Yummy And Delicious Food Typography Designs

This assortment is great treat for those who are working on food typography designs. In food typography two things are very important which give long lasting impression on others. One is delicatessen and the other is amazing fonts. Both of these two things make typography designs awesome and stunning. If designers use both of these two things in a smart or creative way then his food typography designs look awesome and fabulous. You can use food typography designs in your projects, whether project is a cooking contest or you are thinking to design some wonderful and fresh fonts.

In this assortment, we are showcasing 45+ delicious and yummy food typography designs for your inspiration. Have a look at these yummy food typography designs and use them in your work. Grab this amazing chance and start browsing through this cool assortment. And do not forget to give your feedbacks about this assortment via comment section is below.

Fast Cooked Poster

Blue Cupcakes

Smells like teen spirit

Pringles Galaxy

Sweet Amper

Lifelounge Magazine Covers

Los Logos Biscuitos

Eat me

Happy Birthday Donuts

Mustard Font

Promotion

Gourmet

Good Morning

Sweet 3D Type Experiment

Burger King: Burger

Edible Poster

Feast

Experimental Typography Candy

Horror Monday

Gunstringer Cookies

Typo Gingerbread

Pringles Galaxy 2

AIGA Poster Series

Handmade Typographic

Pringles Galaxy 3

Maxima

Shakespeare at Pratt

West Coast Cook Book

IL – Food

Food project

Font with pancakes

Chris Labrooy

McDonald’s McFlurry: Mona

Moonstruck Chocolate Classic Range

Chupa Chups: Lollypops, 2

Mayonnaise Type

Milk Typography

Coffee & Donuts

Delicious Alphabet

Autogrill

Gourmet Typeface

Cup Cake Typography wallpaper

Burger King: Wrap

McDonald’s McFlurry: Thor

Banana Drawings

Dinner Bells

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 11 2013

19:59

October 29 2013

04:07

Top 5 Most Unique and Beautifully Designed Typefaces

Advertise here with BSA


When you consider that typography plays a rather large role in the designs we see everyday, you have to be strict when choosing fonts to use in conjunction with the project you’re working on. There are many different style variants, for example handwriting, serif, sans serif and slab and if you plan on using a combination of these different typeface styles together within your design, they can portray a positive or negative tone. One incredibly useful article, which may be of interest to those who want to read more, on the subject is written by Daniel Eden, titled “Read all about it”, which you can find on his blog.

If you’re currently working on a new print, web or graphic design or are in need of some typeface inspiration, I have found the top 5 most unique and beautifully designed typefaces that are on the web, ready for you to download and use.

Metro Nova

Top 5 Most Unique and Beautifully Designed Typefaces

Metro Nova was designed in 1929 by W.A. Dwiggings and an update has been well overdue. The updated sans serif typeface is well rounded and looks great when it’s a dark shade on a light background and vice versa. One of the most common uses for the Metro Nova is for it being used on items such as book covers and product packaging.

One of the best examples I have found that makes good use of the Metro Nova typeface is the Pret English Lavender packaging. Their packaging uses a combination of the light and bold weights, with the lighter being more prominent to the consumer. The Pret logo and the variety label are solely reliant on the lighter weight in comparison to the description and origin of the plant, which relies on the bold weight.

Brand

Top 5 Most Unique and Beautifully Designed Typefaces

Maximillano Sproviero created the Brand typeface that is commonly associated with the Campbells soup branding and used on other types of product packaging. Brand is also used on other designs, such as wedding invitations, solely because of the calligraphy design.

Brand also works significantly well because it is the only typeface that belongs to a different font family as the rest of the product packaging relies on the sans-serif font family.

Gin

Top 5 Most Unique and Beautifully Designed Typefaces

Gin, like Brand, is another typeface that is based on the old fashioned packaging and ideology to mimic the old serif typefaces used on classic bottles of whisky and gin.

Created by Mattox Shuler, Gin is solely an uppercase font with some stylistic alternatives.

In order to create the font screen shot above, the words GIN and JUICE need to be between 25% and 50% larger than AND. The font also has styling in order to implement the live above and below words such as AND.

Selfica

Top 5 Most Unique and Beautifully Designed Typefaces

Selfica is the sister font and follow up to the sans serif typeface Selfico. It contains a large number of ligatures, which makes the font unique and gives it its own creative layout by connecting letters at the top rather than the bottom. Created by Nico Inosanto, Selfica has a range of weights to provide flexibility, which helps differentiate between different sections of text, such as article titles, quotes and paragraph text.

Fairview

Top 5 Most Unique and Beautifully Designed Typefaces

A typeface that is similar to Gin, which I mentioned earlier, is Fairview. Designed by Riley Cran, the condensed sans serif font has small cap alternatives, should that specific word doesn’t need to be in all uppercase lettering and helps to give some variation in the final design. Cran was inspired by the 20th century industrial lettering design.

October 18 2013

15:00

Incredible Typography Inspiration

Advertise here with BSA


Here at WDL, we love typography and we do believe that good type is really important to every design. From helping you with Tools for Better Web Typography to finding the perfect free fonts, we are all in for helping you find good type resources and inspiration. So today we have some pretty stylish typography artworks for you. There are examples of beautiful poster, print, hand lettering and much more to show you that style and type can deliver a lot of personality.Remember to click on each piece to learn more about it.

Type Inspiration

Type Inspiration

Type Inspiration

Type Inspiration

Type Inspiration

Type Inspiration

Type Inspiration

Type Inspiration

Type Inspiration

Type Inspiration

Type Inspiration

Type Inspiration

Type Inspiration

Type Inspiration

Type Inspiration

13:00

What is Swiss Style Typography?

The world would probably thank Switzerland for the invention of the Swiss knife but the world could not thank it any better for the popularization of the Swiss Style. That though this famous design style isn’t originally Swiss-made, the touch of the country is still present even to the smallest detail of the design.

Swiss Style typography, though traced from Russia, Germany and the Netherlands, was made popular by Swiss graphic designers. They have used it with many Swiss cultural institutions, political advertisements and a lot more because it was thought to have suited the drastically increasing global postwar market. It was used in street signs, maps, public service announcements, etc. In this demand, institutions, corporations and small firms needed a universal identification method that could be easily related to them. The trick was, the method should be universal enough to be understood by every citizen of the world. The Olympics was one good example of a global institutional event Swiss style helped because it has used the simplest symbols using the most universal colors possible.

Swiss style emphasizes on neatness, eye-friendliness, readability and objectivity. Its foundations go back to its strong reliance on elements of typography and universality. This basic knowledge of universal understanding made Swiss style earn its moniker dubbing it as the ‘International Typographic Style’.

Being modernist by nature, the Swiss Style served as the forerunner for the graphic web design trends. It is in this reason why it is called the King of Web Design. It can be easily identified for its immense simplicity and exhortation to beauty and purpose. These two principles are often manifested in the use of asymmetric layouts, grids, sans-serif typefaces, left-flushes and simple but impactful photography. These elements are produced in a simple but highly logical, structured, stiff and harmonious manner.

 Being the King of Web Design, it is but natural that the Swiss Style would have an impact to our websites. This is why studying this design style helps web designers and graphic artists to produce impacting, simple and aesthetically arranged outputs. Designers take lessons from the Swiss styles applying the norms on simple yet artistically and clearly delivered messages by:

  • Preserving uniformity and geometry
  • Allowing wider spacing
  • Using of grid systems
  • Structuring information
  • Keeping minimalism
  • Using sans serif fonts
  • Using different fonts sizes
  • Using of effective photography

Sizes, Shapes, Swiss!

 Swiss style works are generally attentive to the use of uniform design elements and geometric figures. It focuses on preserving the consistency of the shapes and their sizes. Most graphic artists practice the use of shapes collated together to form unique abstract designs. The use of polygons, rather than intricate lines and calligraphic designs assure the simplicity of the work. It also spices up the whole image, making it look sharper and purpose-directed. Aside from that, colors, text manipulations and abstract devices are also combined with shapes to produce a remarkably clear message to its spectators.

Breath in, Breath out

 It has been stressed out in almost every design school that whitespace is important. Most starting designers tend to discount this fact. And that’s what separates them from the better designers. In a work of art, whitespace is a very important element. It literally and figuratively breathes life to it. Having each element in the design will produce visual impact and readability. For a web page, using this technique will subtly influence your readers to think that there is organization in the web page and could convey an impression of a better output as well.

The popular belief is that a work would be perfect if there is nothing to add to it is clearly not the ways of the Swiss design. For Swiss designers, removing unnecessary elements makes it perfect. They believe that a work will be perfect if there is nothing to remove in it. So, instead of adding elements, they do the otherwise.

Nitty Griddy

Gridding is the usage of a very stable framework that allows designers to logically arrange the information they put in the page. This system, a practice that  is traced up to the medieval times, enables artists to easily identify where to put information and what kind of information is to be put.

Since the Swiss Style is characterized to be logical and purpose-oriented, the usage of gridding is very much recommended as it gives ease to the designer in doing the work and gives the readers easy access to the message the work is trying to send.

Info-manic

It is clear that the Swiss Style is information-oriented. This is why designers should think of the information dissemination activity more than anything else. It should send the message before entertaining the people of its art. Swiss Style should be more focused on the semantic arrangement of data rather than the aesthetic placement of it. The readers of the typography should feel like they are reading rather than seeing. That they are actually studying data rather than appreciating it.

A-B-C-D-Elementary!

The modernity of the Swiss Style connotes a very rudimentary feel. Using minimal designs to make the reader focus more on what is really important is the main goal of the Swiss Style. The fewer the distractions, the better. Removing all the distracting elements and making the elementary and only the important details remain is the basic principle of the style. This is to ensure that the true and main purpose of the design is met.

What’s Your Type?

Typeface is the core element of visual communication. It is the most direct and easiest route for the message to be delivered. In the Swiss Style principle, it would be an abomination for a designer to put into jeopardy the quality of the typeface for the design Typefaces should be presented in the most simple, expressive, and universally understood manner. For Swiss Style artists, the usage of letters in the simplest way possible is the best way to do it.

This is why a lot of artists who are into Swiss design use sans-serif typefaces. These are fonts that do not use serifs or ‘hats and shoes’. They are commonly single stroked, meaning, they have a universal brush-width and stroke size. Common forms of this kind of typeface is Helvetica.

Does Size Even Matter?

Of course it does. Font size matters in the Swiss Style. The difference in font size and the contrasts of typefaces arrives to the impression of visual impact and hierarchy of data presentation. It suggests separation or sifting of the important ones to the less important. Normally, the larger the font size is, the more important it becomes – similar to HTML heading tags where web crawlers prioritize H1 over H2 and H3.

Foot of Photography

Though the Swiss Style is generally focused on types, it is not discounted that photographs are good elements for the Swiss design. Most Swiss designers tend to use photos than images as the former gives an impression of realism and drama to the whole design. Commonly, these photos are taken without color, meaning, black and white.

The Swiss Style follows a very simple philosophy. Less is more. Just like any Swiss product, this design style is focused on its function rather than its look.This norm should guide all aspiring Swiss Designers. You should put what is needed and nothing more.

If you have a problem with this, try talking to the Swiss people. They might help you.

Image Sources: weheartit.com, flyergoodness.blogspot.com, swissted.com

October 17 2013

04:43

10 Super Useful Tools for Better Web Typography

Advertise here with BSA


It’s been said that web design is 95% typography. So as a web designer, getting the typography right is a must. Today with the growing popularity of web fonts and modern CSS techniques, this task has become easier, but it never hurts to have all the help you can get with something so critical. That’s why we’ve rounded up some useful tools to help you create better web typography.

Typewolf

Typewolf is a curated design showcase that identifies the fonts used in the design. Our goal is to serve as a one-stop resource for designers seeking typographic inspiration for the modern web.

10 Tools for Better Web Typography

Tiff

A type diff tool that visually contrasts the differences between two fonts.

10 Tools for Better Web Typography

TypeWonder

TypeWonder helps you to test web fonts on any website on the fly!

10 Tools for Better Web Typography

FFFFALLBACK

Web fonts are here, sparking an exciting new era in web design. FFFFALLBACK makes it easy to find the perfect fallback fonts, so that your designs degrade gracefully.

10 Tools for Better Web Typography

Fontdeck

Fontdeck is standards compliant, accessible and uses a pure CSS @font-face solution. No JavaScript required.

10 Tools for Better Web Typography

Typecast

Use Typecast to create visual and semantic designs. Check for readability, rendering and beauty then share a working prototype of your design.

10 Tools for Better Web Typography

FontFriend

Font­Friend is a bookmarklet for typographically obsessed web designers. It enables rapid checking of fonts and font styles directly in the browser without editing code and refreshing pages, making it the ideal companion for creating CSS font stacks.

10 Tools for Better Web Typography

Typekit

The easiest way to use real fonts on your website.

10 Tools for Better Web Typography

WhatFont

WhatFont also detects services used for serving the font. Now supports Typekit and Google Font API.

10 Tools for Better Web Typography

Font Combinator

This tool has been built to allow previewing of font combinations in a fast, browser-based manner. There have been numerous printed books through the years that allowed a designer to put a headline font next to a body font, and this is an attempt to recreate that for the web.

10 Tools for Better Web Typography

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 04 2013

14:34

Type and Color Inspiration from Package Design

Advertise here with BSA


Here at WDL we believe that great design is always inspiring, and it doesn’t matter if we are talking about print, product, web or package design. So today we will show you some beautifully designed packages. Designs that are inspiring for a lot of reasons, from typography to color, from textures to composition. We believe that web designers can always learn from good  design in all mediums. So take your time to observe how the elements are beautifully put together here. And remember to click on the images to learn more details about each project.

 

Silkmilk

Type and Color Inspiration from Packages

Type and Color Inspiration from Packages

Whimsical Playing Cards

Type and Color Inspiration from Packages

 

Karamelleriet

Type and Color Inspiration from Packages

Type and Color Inspiration from Packages

 

Turbo Flyer

Type and Color Inspiration from Packages

Two Step Apple Cider

Type and Color Inspiration from Packages

H.U.M.M Limoncello

Type and Color Inspiration from Packages

Hugo’s Hot Sauce

Type and Color Inspiration from Packages

Type and Color Inspiration from Packages

Type and Color Inspiration from Packages

RedLeg

Type and Color Inspiration from Packages

The Elegant Barber

Type and Color Inspiration from Packages

The Great British Butcher

Type and Color Inspiration from Packages

Bindle

Type and Color Inspiration from Packages

Type and Color Inspiration from Packages

Sticky Paws Molasses

Type and Color Inspiration from Packages

LIA Olive Oil

Type and Color Inspiration from Packages

Terroir

Type and Color Inspiration from Packages

Niagara Oast House Brewers

Type and Color Inspiration from Packages

La Michoacana

Type and Color Inspiration from Packages

White Key

Type and Color Inspiration from Packages

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