BlogmyQuery – BMQ

When combining typefaces, there are a couple of important principles you’ll need to keep in mind, namely contrast and mood. Effectively combining typefaces is a skill best learned through practice, and trial-and-error. Once you’ve mastered the principles covered here, you’ll have the tools you need to try out combinations while making educated guesses about what will and won’t work together.

Here, we’re mostly covering combining two typefaces, as you would for body copy and headlines. In the next part, we’ll cover combining more than two typefaces for things like navigation, image captions, and more.

Contrast

Contrast is one of the most important concepts to understand when it comes to combining typefaces. Without proper contrast, typefaces tend to clash, creating a random, scattered look to your designs (and not in a good way). Creating proper contrast relies on a few principles, all of which are discussed below.

But first, what exactly is contrast? Contrast is the amount of difference between two typefaces. Typefaces that are too similar tend to clash. Your mind doesn’t instantly recognize that they’re different typefaces, and when it finally does, it’s jarring. Typefaces that are too dissimilar can appear haphazard and accidental, which can be just as jarring.

Weight

The weight of a typeface plays a huge role in its appearance. We often think of weight in terms of “light”, “regular”, “medium”, “bold”, etc. But different typefaces have varying weights to begin with. Combining typefaces based largely on weight is a fairly straight-forward way of creating typographic contrast.

You’ll want to look for typefaces that have noticeable difference in weight, without being too extreme. Very extreme differences in weight need to be made up for with similarities in other respects, particularly structure and style.

Style and Decoration

The style of a typeface has a huge impact on how it’s received. Generally, when working with styles, you’re going to be either using regular or italic styles. Underlines are also used, but in web design, they should only be used for links (otherwise, they’re confusing). Other decorations include things like outlines or drop shadows, both of which can be used to unify varying typefaces.

Style and decoration can also be used to create contrast within a type family or typeface. Combine regular and italic fonts, varying weights, and things like shadows or outlines to create variation within a font family and sufficient typographic contrast.

Scale and Hierarchy

The scale of typefaces, or their size relative to one another, is another important factor in combining typefaces. The hierarchy of different elements within the design is greatly influenced by the scale of the typefaces used. For example, your headings should obviously be larger than your paragraph copy. To the same end, your H1 headings should be larger than your H2 headings, and so forth.

As a general rule, your hierarchy should start with your H1 heading being the largest, and your meta information or captions should be the smallest. You need to balance the differences in scale with differences in weight and style, too, so that you don’t have too much variation in size between your largest and smallest fonts.

Classificiation

In general, when combining typefaces, you’ll want to choose ones that aren’t from the same classification. Combine a serif and a sans-serif, or a serif and a script, etc., and you’ll have a much easier time coming up with a combination that has proper contrast and doesn’t clash.

Combining typefaces within the same classification is sometimes possible, but there are some extra considerations. For one, you want to find typefaces that are different enough that they’re immediately recognizable as different typefaces, while also using typefaces that have similar moods, structures, and other factors that tie them together. To some extent, trial and error is your best bet for finding typefaces within the same classification that can work together.

One trick is to choose typefaces that are in the same general classification, but fall under different sub-classes (such as a slab serif and a modern serif, or a geometric sans serif with a grotesk). This provides more contrast right from the start.

Structure

The structure of a typeface plays a huge role in how it works with other typefaces. You either need to choose typefaces that have very, very similar structures, or very different structures. Letterforms that are only a bit similar are going to clash. Typefaces that are very different in other ways can be unified by their similar structures, though the reverse rarely works as well.

Look at the letterforms side-by-side and see if they share a similar shape or other factor (such as x-height). It’s better to go with wildly different structures than structure that’s almost the same but not quite.

Color and Texture

When you need to add visual contrast or unify disparate typefaces, the use of color and texture can do wonders. For example, when you need to add contrast among typefaces that are nearly identical (or within a single type family), changing the color of some elements instantly adds interest. Adding texture has the same effect.

Alternatively, if you have wildly different typefaces, color and texture and unify those typefaces, creating a harmonious look. The principles of color theory still apply to typography, so be sure you don’t go overboard combining colors.

Extreme Contrast

Extreme contrast can be a great option if you’re working with display or script typefaces. In these instances, it can be difficult to find typefaces with good contrast that aren’t too dissimilar. So rather than trying to do that, go for completely different typefaces. Try combining a rather simple typeface with something more elaborate for the best results, rather than two elaborate typefaces.

Mood

The mood of the typefaces you select is vital to the way they work together. Mood can be anything from formal to casual, fun to serious, modern to classic, or anything in between. This is where a lot of people run into trouble with combining typefaces. Selecting typefaces that not only have similar (or complementary) moods, but also have moods to match the project you’re designing is crucial.

Examples

Oak Street Bootmakers
Oak Street Bootmakers Uses a combination of Hoefler Text and Franklin Gothic, both of which are very classic typefaces. It creates an image that is steeped in tradition.

Pound & Grain
Pound & Grain combines two serif typefaces, as well as a sans serif on their home page. The two serifs work well together because they belong to different sub-classes.

Burciaga
Burciaga combines three distinct typefaces: Droid Serif, Georgia, and Dancing Script. Droid Serif and Georgia work surprisingly well together, and Dancing Script adds extra elegance.

Stuart Bicknell Photography
Stuart Bicknell Photography uses font size and style to create contrast on the site, depsite the fact that virtually all of the typography is Times New Roman (there are a few small touches of Arial).

Foundation Six
Foundation Six uses a mix of Clarendon and Helvetica Neue, which creates a modern but still conservative look.

CalebAcuity Americas
CalebAcuity Americas uses a combination of YanoneKaffeesatzBold and Lucida Sans. It’s a very modern look, and a great example of how to successfully combine sans serif typefaces.

Analog
Analog is a great example of a site that uses a single typeface, but uses styles, colors, and scale to create contrast.

Thor Datacenter
Thor Datacenter combines a few typefaces, including AllerDisplay, JournalRegular, and Arial. The addition of a script font like JournalRegular to the otherwise sans serif typography palette results in a much more casual and inviting feeling to the site.

47 Degrees
47 Degrees combines LeagueGothic with ChunkFive and Helvetica for a very modern, casual style. They also use Museo300 sparsely on their site, which adds more visual interest.

Logo Nest
Logo Nest combines a huge number of typefaces on their site to create a vintage look. They keep everything unified, though, through color (virtually all the type on the site is either black or white).

More Resources:

• Typographic Contrast and Flow
  From WebDesignerWall. Covers the basics of contrast in typography.
• Typographic Contrast and the Web
  A very comprehensive aritcle that covers the basics of typographic contrast as it pertains to web design.
• Focus on Typography, Part 1: Contrast
  From SitePoint, this article covers all the basics of contrast, fully illustrated.
• A Guide to Web Typography
  A fantastic, comprehensive article covering web typography from I Love Typography.
• 29 Principles for Making Great Font Combinations
  A list-style post that covers some excellent rules for combining typefaces.

(ik)

“Look at her: so beautiful, so friendly, so smart. And what a personality. She must be mine. Hooking up with her would make me the envy of all my friends. Sure, she’s young and she’s gorgeous. Besides, I can easily try something new if I get bored or something better comes along.”

No, that’s not an excerpt from Lolita. As cruel and inappropriate as they might seem, these thoughts are fairly common in our society. In fact, in the past year, millions of people have entered into exactly that type of relationship. Don’t bother calling the Special Victims Unit; what we’re discussing here is not what you think it is. It’s the Apple iPad.

Apple seems to have entranced people. It’s hard to walk down the street without passing someone who is plugged in to those iconic white headphones or to enter a coffee shop without hearing someone gabbing on their iPhone. Apple’s stores are crowded, and its products sell in absurd quantities.

Why is this? Apple might be a visionary company with a strong grasp of what’s hip. Yet I believe Apple’s appeal lies in something more than trends, something deeply ingrained in our psyche: relationships.

Psyche Revived by the Kiss of Love, Antonio Canova. (Image: Wikipedia)

We don’t simply own products; we have relationships with them. Intimate ones at that. We are in a state of courtship with every brand in existence. Each of them wants to be a part of our lives, and each wants love in return. Thinking about our relationships with particular products and brands in the same way that we think about interpersonal relationships yields interesting insights. When we decide to bring a person or product into our lives, we must first evaluate our options. The criteria we use to decide whether we love, hate or are indifferent to another person are the same we use to judge a product or brand.

There are many types of relationships, but we can put brand-consumer relationships into three categories: acquaintance, friend and lover.

When someone purchases a bag of apples at the grocery store, they’re demonstrating an acquaintanceship with apples. They’ve interacted with apples before, but there’s no deep attachment, and there has been very little bonding with the product.

The next step up — friendship — emerges because of branding. For example, I always purchase a certain brand of gum. I’ve come to know the brand and its offerings, and I enjoy having its product in my life. We’re friends, but that’s where the relationship ends. There’s no romance involved, and no longing or desire is felt.

Only certain brands manage to take the step from friend to lover. Apple is one of the most valuable companies in the world. It also provides a useful model of consumer courtship. Just about any iPhone user will proudly tell you, like a love-struck teenager on prom night, that they “love� their phone and would be “like, totally lost without it.� There are dozens of cell-phone manufacturers, but only one iPhone. Successful visionary companies, such as Apple, have mastered the art of relationship engineering.

Designing Attraction

Love is often likened to fire. In the early stages of a relationship, things start heating up. As the love grows stronger, the flames grow higher. When a relationship falls apart, we say that the fire has gone out. Whether someone lights or douses your fire has to do with the two core aspects of their being: how they appear on the outside and who they are on the inside. That is, a person’s appeal is based on two things: looks and personality. Let’s take a closer look at each of these aspects of appeal and examine how they influence people into relationships with brands and products.

Looks

Attractiveness spurs lust. It’s a simple cause-and-effect paradigm ingrained in our very nature. We all long for the cute guy or girl in class, and that same desire guides us when choosing a product.

Since the days of Plato, philosophers and artists have tried to pinpoint exactly what makes something aesthetically pleasing. No universal formula for beauty has ever been agreed upon. Beauty is subjective. The designer’s job is to appeal to the collective subjective, or the average of personal preferences. Doing so ensures a product appeals to the largest audience possible.

Making your product visually appealing is not superficial. In fact, design is often a product’s primary competitive advantage. iPod wasn’t the first MP3 player on the market; it didn’t have the largest capacity; it didn’t have the most features; and it certainly wasn’t the cheapest. It was, however, sexy. It was simple and self-explanatory. Its scrolling wheel was as intuitive as it was revolutionary. Perhaps most importantly, it introduced a unique and (now) iconic form factor. The market had been flooded with matte gray devices with black headphones, but this entrant had a clean white front and mirrored back. Even the earbuds were white. Many people tuck their devices into their pockets, which makes the headphones the most visible hardware. Apple exploited this and turned the earbuds into a mnemonic device. Spotting someone with white earbuds, even from afar, immediately told you which brand was on the other end.

The iPod now accounts for well over 70% of the audio-device market. Why? I think it’s because the iPod is just more distinct than its competitors. In a market full of brunettes, the iPod is Marilyn Monroe.

Facebook vs. MySpace

Facebook has more than 500 million users, and that number is growing steadily. MySpace has plateaued at around 125 million. How has MySpace, once the leading social network, fallen behind by such a large margin? There are a number of reasons, but design seems to be one of the most obvious (Newsweek and Mashable seem to think so, too).

Much to its detriment, MySpace allows users to apply their own style sheets. I can imagine the brainstorm that led to this decision: “Wouldn’t it be great to let users customize the look of their page? People love to make things their own and flaunt their personalities. This will surely encourage new users and give us the edge on Facebook. Hurrah!�

MySpace somehow failed to realize that most people’s design education consists entirely of WordArt tutorials taught by Microsoft’s Clippy. Perusing MySpace profiles is torturous. Hideous background images overshadow content, while animated GIFs and illegible text make for an irritating user experience.

Facebook realized that people want to connect with friends more than they want to customize style sheets, so it offered users a clean and uniform interface. Everything was nicely designed; nothing was gaudy or tasteless. The whole experience was much more visually appealing. While MySpace was pushing personalization, Facebook was refining a community to change the way we interact.

To Sum Up

• People are programmed to judge by appearance, so every interaction they have needs to be groomed to visual perfection.
• To maximize appeal, designers must be observant of the collective subjective.
• Design is not superficial. It can be your greatest competitive advantage.
• Visual distinction becomes a mnemonic device for your product. Incorporate it to increase awareness and encourage recall.
• Allowing others to control your appearance, while nice in theory, can lead to chaos and brand deterioration.

Personality

As we get to know someone, the novelty of their appearance fades, and something more substantial is required to maintain our interest. We start looking beneath the surface and noticing abstract qualities: intelligence, sense of humor, likes and dislikes, ambitions. These qualities have the power to shape how we see the true person. A person’s personality — the DNA of their character — builds lasting appeal.

Character compatibility forms friendship and love. Looks alone might seal the deal for a one-night stand, but acceptance of personality is required for healthy long-term relationships. We’re often told to “be ourselves.� This is good advice. Like a pheromone-ridden glue trap, flaunting your personality attracts and ultimately bonds you with like-minded individuals.

Personality has this effect in the commercial realm as well. Aligning yourself with your target audience is critical to success. I’m sure this is excruciatingly obvious, and many organizations are already tuned into their demographics, but many others either are too shy to display personality or fail to do so properly.

Humor is one of personality’s strongest pheromones. If done right, humor evokes laughter. And yes, laughter is enjoyable in itself, but have you every wondered why we laugh? Anthropologists are discovering that laughing is not necessarily something we do merely for enjoyment, but is actually a subconscious technique that builds rapport. By laughing, we indicate to others that we agree with or accept them. Dr. Robert Provine, who has done extensive research on how, when and why we laugh, likens laughter to a glue:

…“Ha ha ha’s� are bits of social glue that bond relationships… When we laugh, we’re often communicating playful intent. So laughter has a bonding function within individuals in a group.

Applying a coat of humor to your product or advertising campaign is a great way to spark the subconscious urge to bond. Just make sure people are laughing with you, not at you.

Going back to Apple, its “I’m a Mac; I’m a PC� ads focus explicitly on personality by actually personifying brands (Apple and Microsoft). The casual dress and easygoing nature of the Mac character exudes fun, simplicity and intelligence, especially when juxtaposed with the conservative, uptight PC character.

Also, the subtle dose of geek humor gets you laughing (and thus successfully bonding) with the Mac, and laughing at (disapproving of) the PC. These ads strengthened Apple’s reputation as a hip, intelligent, friendly company, while pegging Microsoft as uptight and out of touch with users’ needs.

Microsoft attempted to salvage its reputation by recruiting — or shall we say, throwing money at — Jerry Seinfeld, who starred in a series of ads alongside Bill Gates. For personality, Jerry Seinfeld is a great candidate. He’s famous, his show had some 75 million viewers, he understands everyday people with everyday problems, and he’s funny.

In a swing-and-miss attempt at comedy, the ads follow Bill and Jerry as they “connect� with “real� people. Is it me, or do these ads actually enhance the perception we have of Microsoft as unhip and out of touch?

Digg vs. Reddit

Have you seen the top story on Digg today? Neither have I. A year ago, I would have been able to recap all of the top stories for you. The website was powered by people like me, so I came to rely on Digg to keep me up to date on topics I was interested in. My personality meshed with those of other Digg users, and visiting the website became part of my daily routine. Yet I rarely visit this social-bookmarking website anymore. Instead, I look to Reddit for my democratically selected links.

What has changed? Ever since Digg released version 4, back in August, content quality has dropped significantly. Front-page stories lack relevance, top stories are now decided by far fewer Diggs, and the sponsored links disguised as genuine articles sour the whole experience.

Digg’s personality changed. It destroyed the very foundation upon which it was built. Suddenly, publishers could auto-submit content and bypass the users who once acted as a filter to determine whether articles were relevant to the Digg audience. No longer was Digg a democratic platform. The power shifted from user to publisher. In other words, Digg sold out.

This personality switch rightfully pissed off the core user base. Alienated users began flocking to… well, an alien. Some stayed to plead with Digg that it revert to its earlier version. Digg refused. In revolt, users began to submit direct links to Reddit. Within months, Digg crumbled and users flocked in hordes to Reddit.

Reddit offers a platform similar to Digg and, despite being owned by Condé Nast, lacks the tinge of corporate influence. Before Digg’s redesign, Reddit was serving a respectable 429 million page views per month. Condé Nast has just announced that Reddit now serves more than 1 billion. That’s more than double its pre-Digg-blowout numbers and a 300% increase over its January 2010 figures. Digg has finally pulled some of the features that led to the mutiny, but it might be too little, too late.

A valuable lesson can be learned from Digg: stay true to yourself. With followers come expectations. Personality attracted them, and every action that is out of character will push them away. Introduce advancements incrementally, and users might put up with it; change drastically, and they’ll leave.

To Sum Up

• Personality builds rapport. Don’t be afraid to flaunt it.
• Laughter is a powerful social glue, but use it with caution. You want people laughing with you, not at you.
• Define your personality and stay true to it. Out-of-character actions will be seen as inauthentic and will alienate your audience.

Conclusion

Studying the art of seduction and the rules of relationships can help you craft engaging user experiences and forge strong connections with users. Getting your audience to fall in love with your product is no easy task. It requires a holistic approach involving members of every team. As interactive professionals, our work bridges brand and consumer. We are the cupids of commerce. Sharpen your arrows; it’s time to spread some love.

This has been the first in a two-part series on relationship engineering. In part two, we’ll explore the art of maintaining a relationship and how to trigger purchase recursion via timely break-ups. Stay tuned!

Further Reading

• Andy Budd – Seductive Design
• Stephen Anderson on Emotional Design, Boagworld
• The Added Value of Design, AllAboutBranding.com
• Design With Personality, Culture, and History, Logo Design Love
• Designing Websites with Personality, Six Revisions

(al)

© Thomas Giannattasio for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: apple, relationships

Those of us who work in creative fields tend to need to return to the wells of inspiration for a bit of a recharge for our imagination. In these times we turn to many, many different areas, looking for anything to spark those creative fires once again so that we can enthusiastically charge back into the proverbial fray. Hopefully with enough juice to punch through any of those roadblocks that may have been in our way when we went in search of inspiration.

In this post we are going to be focusing our inspirational radar in the typographical waters to help all of those enthusiasts and fanatics alike to get their fix of all kinds of font-related goodness. Here is an inspirational roundup we’ve collected to keep our readers busy for the weekend. We hope that you find enough typography inspiration in the sections below to keep your creativity flowing nicely for some time.

Typographical Based Artwork

The first stop along the way in this search for inspiration is in the various galleries of some talented designers who have created some imaginative artwork based around, or heavily featuring some typographical elements in the pieces. We have several artists with a handful of their designs in this first showcase, followed by a few random pieces from some other artists that we did not want to leave out. Some you may have seen before, some you may have not, but either way hopefully they will be that needed spark.

�ron Jancsó

�ron’s work is colorful and those featured are compromised of linework as the foundation for each piece. Used in completely different styles and weights, the work still shows a dynamic sense and versatility from the designer. Inspired and inspiring.

Lowercase G

From the Vector Graffiti Collection

Tokyork Logo

David Waters

First up beneath the spotlight is David Waters. David’s work ranges from both the grunge heavy to the sharp and crisp, but always present is an imaginative type work that accentuates the overall voice of the pieces they inhabit. With such inspired in his portfolio, this easy addition to the showcase should be rubbing off on you in no time.

The KDU Brochure

Ecosystems

Dichotomy

Adolfo Correa

Is a talented designer with some colorful examples in the showcase, where the type elements are the central element of each of the pieces. Below, Adolfo demonstrates that his skills lie outside the digital arena as well with the paper art tribute he created that we have featured.

A Tribute to Yulia Brodskaya

Steve Aoki

Enedi Collaboration 2

Alex Beltechi

As our showcase keeps on moving forward, we stop on the works of Alex Beltechi, a designer whose style and works are filled with a lighter, somewhat playful approach. His in-depth, layered styles lend well to the large typographical centerpieces of the pieces that we have showcased below.

Type Treat

Steampunk Typography

Changing Actions Wallpaper

Diego L. Rodriguez

The next designer that we find filling the wellsprings of inspiration with their amazing work is Diego L. Rodriguez. Diego’s designs are as big and as bold as the typographical elements that he crafts into his pieces. Once again, we see a range of styles skillfully employed in each piece as the work explodes from their digital canvases.

Solomon Tribute Album Cover

NAS – The Lost Tapes 1.5 Album Cover

Needles

Michal Sycz

Speaking of playful designs, our next artist up on the showcase is designer Michal Sycz, whose work is certainly no stranger to this fun loving nature as is proven in the first piece on feature. Though this whimsical approach is not in any way the standard for Michal’s work as we see the powerful voice of public commentary in the showcase as well.

Milk Sucks

Barcelona

slashTHREE / Order vs Chaos

Dan Beckemeyer’s Ampersand Food Groups

This next feature is all about the fun, with something of an unconventional look at typography. Well, at least one character of type that is. Dan Beckmeyer has created a series of Ampersands using two commonly combined foods to give the typographical character both form and a quirky, yet original series of pieces.

Wine & Cheese

Peanut Butter & Jelly

Coffee & Doughnuts

Cris Wicks

Cris Wicks is a designer whose works you have more than likely seen being featured around the webs as their breathtaking typographical portraits tend to catch the eye no matter their surroundings. Using a popular technique to create a portrait out of words, Cris has created some truly inspiring works that rank high in most folk’s favorites.

lyric portrait 2nd attempt

Beautiful Boogieman

Mr. Marley

Markie Darkie

Speaking of popular works that tend to make the rounds, you might have seen one or two of our next designer’s works. Markie Darkie has some vibrant and explosively colorful and bold typographical artwork that we just would not have felt right about excluding here from our inspirational showcase. For these works are proven useful inspirational tools.

CMYK

Fusion

GK

Steve Goodin

Our next showcase entries come from a talented designer who masterfully transports his typographical elements into a layered bed of classical grunge beauty. Steve Goodin delivers some simply stunning works that are sure to help kick-start your inspirational mojo machine into high gear.

Blackout

Open House

Signal

Dimo Trifonov

Next up along this road to inspiration, comes the work of designer Dimo Trifonov, who wonderfully submerges his typographical elements into his designs until they are nearly lost and merely art themselves. His interesting creations for a range of clients make a dynamic slice of his work which shows a versatility to his voice.

Trust the Mutation

Ashton Illustration

It’s all about the shoe

Neil Hanvey

Here our typographical journey for inspiration takes a turn for the whimsical and more playful side as we visit work from the portfolio of the talented Neil Hanvey. Neil’s designs are filled to the brim with exciting and colorful elements and sometimes characters. If fun tends to fan your flames of inspiration, then these next few pieces might be the dose you need.

Atomic Circus

Mecha Owl vs Steam Dragon

Hope for Haiti

Daniel J Diggle

The next designer that we are showcasing today is Daniel J. Diggle. Daniel uses intricately designed typographical drawings that heavily rely on various artistic elements to create and give form to the type, instead of the other way around as we have seen. Brilliant and beautiful work that certainly raises the proverbial bar.

Random Got Beautiful

The Roots

5125

Andreas Scheiger’s Evolution of Type

Next up, we find an original set of sculptures unlike other works you may have seen before from the Evolution of Type Exhibit by: Andreas Scheiger. This is a uniquely morbid, if not completely awesome idea for a set of typographical sculptures that looks beneath the surface, so to speak, of our type.

Exhibit Number 3

Exhibit Number 2

Exhibit Number 1

Tariq Yosef

As we are winding down in this section of the post, we have the final designer with multiple artistic typographical pieces from their gallery being featured here today and that is the imaginative works or Tariq Yosef. Tariq’s chaotic and explosive pieces are both rich and charged with emotion. Definitely an easy add to the showcase!

Numbers Man

typoGeo

its sad

Individual Artist Showcase

Now we have a handful of other designer artworks that not only caught our eye, but got the wheels of inspiration turning as we took them in, so naturally we couldn’t check out of this section without stopping in them first.

Nuzzles – Wooden Typographic Puzzles by: John Christenson are an extremely creative and fun break from the other works that we have been showcasing in the post. Once we laid eyes on them, we knew they had to get a spot on the list!

The Antidote by: Jared Nickerson is a simple retro design that uses typography to bring the whole meaning of the piece together and present it stylistically to the viewer.

Typefaces

How could we do a post focusing on typography inspiration and not actually deliver some typefaces that are sure to please and douse those creative embers with a little fuel? Short answer, we couldn’t. So feast your eyes and typeface appetites on the gatherings below and don’t forget that you need to still come up for air on occasion.

Slinkytype by: Paul Hollingworth

It may not walk down stairs or travel in pairs like its namesake, but the Slinkytype font is a stroke of creative genius. Taking the spiral, coiled visuals from this toy that has entertained countless kids across generations and distilling it into a highly unique typeface made this an easy addition to our showcase.

VAL – Free Font by: Fontfabric

VAL is a Fontfabric typeface whose weight and bubbly nature have made it a virtual splash among the community. The fact that it is free has not hurt either, but given its size and style you would expect it to be somewhat difficult to read, but that is not the case here. With a unique style for fitting the letters together, this font is certainly worth checking out. Click on the images to visit the page with the download link.

ROKE 1984 – Free Font by: Wete

ROKE 1984 is a typeface so refreshingly original that we could not exclude it from this post without feeling horribly guilty for shorting the readers. Wete, the designer, has delivered a font that really sets the bar high for others to follow, with several variations of the font to give your work just the look you were craving. Click on the images to visit the page with the download link.

Kalevi Typeface by: Ossi Gustafsson

Kalevi is another typeface whose elegance and sharp nature made it nearly impossible to pass up as we put this showcase together for our readers. Even with its somewhat boxy style, this font still comes across as classic and professional, and also has a stencil variation that takes it to more of a laid back place. So it works on numerous levels.

my Angle Type by: Andre Roquette

my Angle Type is another highly unique font that has evolved artistically into a funtional, wonderfully stylish typeface. The designer’s imaginative approach to the font’s creation has seemingly infused the work with an inspiring tone that is almost guaranteed to get those juices flowing.

Disorder Type by: Sig Vicious

Speaking of unique approaches to the font’s origins, our next typeface on the showcase shares this spotlight, and that is Disorder Type. Trying to encapsulate the symptoms and feelings associated with Dissociative Identity Disorder, the designer delivered upon a powerful, if not singular, typeface to the community at large.

Perforama – Free Font by: Alexey Frolov

Perforama is a fun font with a retro feel that takes a simple lined character, rounded corner approach to pulling together this typeface. Has the look and feel of an older seventies genre design, while still managing to keep it relevant and from feeling truly dated. Click on the images to visit the page with the download link.

Bardelin – Free Font by: Alexey Frolov

Bardelin is a bold and full typeface that still has somewhat of a lightness to it that most weightier fonts tend to be missing. The subtle waviness to the characters keeps the font from feeling constrictive and as concrete as most bolder fonts do as well. Click on the images to visit the page with the download link.

Dekar – Free Font by: Fontfabric

Dekar is another Fontfabric release, that is tight and crisp in all the ways a professional feeling typeface should be. With both a bold and a light variation of the font, this sharp type has a versatility to it that just might take you by surprise. Click on the images to visit the page with the download link.

Adec – Free Font by: Serge Shi

Adec is another uniquely crafted typeface that would make an inspirational addition to any designers virtual toolbox for sure. Taking somewhat of a split level approach, so to speak, the font combines character elements to give the type a slight sense of whimsy, while maintaining a sharp modern edge. Click on the images to visit the page with the download link.

Deibi v1.0 – Free Font by: Wete

Deibi is the second typeface by Wete that we have featured, though it has a completely different feel and tone to it. Though the font itself has the hand drawn, somewhat loose look, it still comes together in a tight-knit professional look that gives the font a unique personality of sorts. Click on the images to visit the page with the download link.

A Couple More For the Road

Before we go, we have a couple more places to turn when you are looking for typography inspiration that we thought we would drop into the virtual mix to cap things off. We hope that you have enjoyed the post and gotten some inspiration out of its holds.

Baseline Magazine is a magazine that is focused completely on typography. This is certainly a publication for every enthusiast and pro alike to look into to keep their fingers on the pulse of the typography in the design world.

Type Foundry Wiki is the Wikipedia entry for Type Foundries. Plain and simple. Want to know where to go to get all of your font fixes, then visit the foundry entry for lists of typeface sources to turn to!

Friends of Type helps you discover great fresh visual content. Four creative fellows are responsible for the project which features type artwork from artists around the world, yet mainly their personal work. The project values typographic design and serves as a sketchbook, archive as well as dialogue.

Consider Also Some of Our Previous Posts:

• The Beauty Of Typography: Writing Systems And Calligraphy Of The World is a post from the Smashing vaults that can also help out with the inspiration end by taking you through examples of scripts from around the world.
• Typographic Design Patterns and Best Practices is another post from the ghost of Smashing past that can help you once that inspiration gets rolling once again, and you begin your next typography focused design.

(ik)

I don’t know about other parts of the world, but here in Sweden many people talk about week numbers instead of dates. It drives me absolutely crazy since I never have a clue what the current week is. I wish people would just start using dates instead… but that will never happen, so I have to adapt somehow.

One way is to go to vecka.nu every time someone starts talking week numbers. It works, but it feels awkward to have to visit a website just to find out what week it is. Well, you don’t have to, at least not if you’re using a Mac (I have no idea about other systems).

Read full post

Posted in Mac, Productivity.

Recently we’ve been receiving more requests for carefully selected, useful round-ups. We try to avoid round-ups on Smashing Magazine, but sometimes the format is useful and — if the resources are relevant — can be extremely helpful. Besides, we are glad to drive traffic to some obscure, yet useful resources and thus support the developers of these resources.

In this round-up, you’ll find some of the useful JavaScript and jQuery tools, libraries and plugins that we have stumbled upon recently. Hopefully, you’ll find them valuable for your upcoming projects. Among other things, you’ll find handy services and online utilities, recently released JavaScript libraries and jQuery plugins.

You might want to take a look at the following related posts:

• Time-Saving and Educational Resources for Web Designers
• 45 Powerful CSS/JavaScript-Techniques
• 50 New Useful CSS Techniques, Tutorials and Tools
• Useful Web Services, Tools and Resources for Web Designers

Useful JavaScript Libraries

Respond.js: Fast CSS3 Media Queries for Internet Explorer 6-8 and More
The goal of this script is to provide a fast and lightweight script to enable responsive Web designs in browsers that don’t support CSS3 Media Queries. In particular, Internet Explorer 8 and under.

Blackbird: Open Source JavaScript Logging Utility
Blackbird offers a dead-simple way to log messages in JavaScript and an attractive console to view and filter them.

Treesaver.js
Treesaver is a JavaScript framework for creating magazine-style layouts using standards-compliant HTML and CSS. It is free for all uses and made available under the MIT or GPLv2 licenses.

Bibliotype
Bibliotype is a (very) simple HTML, CSS and JS based library for rapid prototyping long-form typography and reading on tablets.

Highcharts – Interactive JavaScript charts
Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie and scatter chart types.

jStat: a JavaScript statistical library
jStat is a statistical library written in JavaScript that allows you to perform advanced statistical operations without the need of a dedicated statistical language (i.e. MATLAB or R).

highlight.js
Highlight.js highlights syntax in code examples on blogs, forums and in fact on any web pages. It’s very easy to use because it works automatically: finds blocks of code, detects a language, highlights it.

Visual Event JS Library
Events in Javascript are often seen as a bit of an enigma. This is odd given that Javascript is very much an event driven language, but it is typically down to their complex nature and difficulty to debug. To this end the author created Visual Event to help track events which are subscribed to DOM nodes.

Underscore.js
Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects.

Popcorn.js
Popcorn.js, is a HTML5 javascript library for integrating the web into video production.

SlickGrid!
SlickGrid is a JavaScript grid/spreadsheet component.

JavaScript InfoVis Toolkit
The JavaScript InfoVis Toolkit provides tools for creating Interactive Data Visualizations for the Web.

Handlebars.js: Minimal Templating on Steroids
Handlebars provides the power necessary to let you build semantic templates effectively with no frustration. You might want to read ThinkVitamin’s article Getting Started with Handlebars.js, too.

Backbone.js
Backbone supplies structure to JavaScript-heavy applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing application over a RESTful JSON interface.

Load JavaScript and Stylesheets on Demand | SidJS
SidJS is a lightweight JavaScript library used to load JavaScript scripts and CSS stylesheets on demand. It increases AJAX applications performance by loading resources when they’re needed.

OpenFaces
OpenFaces is an open-source library of AJAX-powered JSF components, an Ajax framework and a client-side validation framework. OpenFaces is based on the set of JSF components formerly known as QuipuKit. It contains fully revised codebase of QuipuKit and introduces many new components and features.

d3.js
D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document.

Tempo: JSON rendering engine
Tempo is a tiny JSON rendering engine that enables you to craft data templates in pure HTML. It not only makes AJAX content easier to work with but also manages clear separations of concerns, i.e. no HTML in your JavaScript files!

Art Deco – Selectable Text
A quick proof-of-concept of split typography, based on Pierre Fix-Masseau’s Art Deco style. The challenge here was to achieve ‘split letters’ as part of a Web page layout, while retaining the ability to select text.

Using Less.js to Simplify Your CSS3
LESS is an amazing little tool that extends CSS with the addition of variables, mixins, operations and nested rules.

PhantomJS: Headless WebKit with JavaScript API
PhantomJS is a headless WebKit with JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.

JavaScript Tools and Utilities

TestSwarm: Continious & Distributed JS Testing
TestSwarm is an open source project by Mozilla Labs (and created by John Resig) which aims to simplify the complicated and time-consuming process of running JavaScript test suites in multiple browsers. It offers a continious & distributed testing environment that can be used by multiple users running the tests in various browsers with a “set-and-forget” logic.

Minimee
On the Web, speed is important — so when it comes to CSS and JavaScript files, size does matter. By automatically minimizing and combining your files for you, Minimee takes the heavy lifting out of keeping your files nice and clean. Minimee is an ExpressionEngine add-on only.

Doctor JS
Doctor JS is a tool which analyzes your JavaScript code. The tool tests how well your code is written in regards to polymorphism, prototypes, exceptions and callbacks. You might want to check out JSLint as well.

Remy Sharp’s JSConsole
A JavaScript (and CoffeeScript) web console, useful for quick experimentation, debugging, presentations (for live coding) and workshops. Also available as a native iOS app from the iTunes store.

JavaScript Library Boilerplate
Why go through the tedium of creating both a closure AND a .noConflict method when all you want to do is create your own JavaScript Library? With JavaScript Library Boilerplate, you can hit the ground running and create your own JavaScript Library in no time!

jsdoc-toolkit
JsDoc Toolkit is an application, written in JavaScript, for automatically generating template-formatted, multi-page HTML (or XML, JSON, or any other text-based) documentation from commented JavaScript source code.

Jasmine: BDD for your JavaScript
Jasmine is a behavior-driven development framework for testing your JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests.

ObfuscateJS: JavaScript compressor
The obfuscator currently removes whitespace and comments. It renames variablenames with a local scope to a shorter version, And as an advanced option it renames all variables with a certain prefix to a shorter name.

Online JavaScript beautifier
This beautifier will reformat and reindent bookmarklets, ugly javascript, unpack scripts packed by the popular Dean Edward’s packer, as well as deobfuscate scripts processed by javascriptobfuscator.com.

PEG.js
PEG.js is a parser generator for JavaScript based on the parsing expression grammar formalism. It enables you to easily build fast parsers which process complex data or computer languages. You can use it as an underlying tool when writing various data processors, transformers, interpreters, or compilers.

JSONView
JSONView is a Firefox extension that helps you view JSON documents in the browser.

jsPerf: JavaScript performance playground
jsPerf aims to provide an easy way to create and share test cases, comparing the performance of different JavaScript snippets by running benchmarks.

JSonduit
JSonduit is a service that can turn practically anything on the web into a JSON feed that any website or mobile app can consume.

jsplumb
jsPlumb provides a means for a developer to visually connect elements on their web page, in much the same way you might have seen on Yahoo Pipes. It uses Canvas in modern browsers, and Google’s ExplorerCanvas script for stone-age browsers. The current version (1.2.5) can be used with jQuery, MooTools and YUI3.

Helma
Helma is a server-side JavaScript environment and web application framework for fast and efficient scripting and serving of your websites and Internet applications.

HTML + JSON Report
Online HTML5 JSON Report format to view any JSON data in a human-readable HTML view.

JSON Editor
This editor allows for easy editing of json strings, after loading a sample from the dropdown list click ‘build tree’, expand the tree, click nodes and start changing.

JSCSSP, a CSS parser in JavaScript
JSCSSP is a CSS parser written in cross-browser JavaScript. It parses a string containing CSS styles and outputs a CSS Object Model (warning: not the CSS Object Model). It can preserve some comments, at-rules and style rules that your browser does not recognize and trashes, and even whitespaces if you absolutely need to preserve indentation and blank lines.

jQuery Plugins

sausage.js
Sausage is a jQuery UI widget for contextual pagination. It complements long or infinite-scrolling pages by keeping the user informed of her location within the document.

jQuery Waypoints
Waypoints is a small jQuery plugin that makes it easy to execute a function whenever you scroll to an element.

Pietimer jQuery Plugin
Pietimer injects a canvas element into the page which has an ever reducing pie shaped timer.

ImageLens: a jQuery plug-in for Lens Effect Image Zooming
You can use this jQuery plug-in to add lens style zooming effect to an image.

Timeglider jQuery Plugin/Widget
Timeglider is a zooming, panning data-driven timeline — great for history projects, project planning or any other tasks where you’ll need to display a time frame.

960 Grid on jQuery-Mobile
A port of a 960 grids to use in jQuery mobile. It aims to bring more flexibility to jQuery-mobile layouts and thus makes it easier to use on tablets. The code is available on Github under MIT license.

diagonalFade jQuery plugin
A jQuery plugin allowing you to easily specify direction, fade-in, fade-out, and a host of other options to a grouping of elements.

Wijmo jQuery UI Widgets
Wijmo is a complete kit of over 30 UI widgets with everything from interactive menus to rich charts. If you know jQuery, you know Wijmo. Complete with documentation and professional support, every widget is hand-crafted and includes premium themes.

Lettering.js – A jQuery Plugin for Radical Web Typography
CSS does not offer a complete down-to-the-letter control. Here you’ll find kerning type, editorial design, manageable code and complete control — just a few examples of what can easily by done with Lettering.js.

jslide
jslide is a jQuery plugin to create a simple slideshow of list elements, containing either images or other content.

Isotope: A jQuery Plugin for Magical Layouts
An exquisite jQuery plugin for magical layouts. Enables filtering, sorting, and dynamic layouts. Isotope’s capabilities are designed to be used together cohesively. You can do it all — filter, sort, change layout modes, add items — and Isotope will handle it with ease.

Better Check Boxes with jQuery and CSS
In this short tutorial, the authors will create a replacement for the default browser checkboxes in the form of a simple jQuery plugin.

Thumbnails Navigation Gallery with jQuery
In this tutorial the authors are going to create an extraordinary gallery with scrollable thumbnails that slide out from a navigation. They are going to use jQuery and some CSS3 properties for the style.

jQuery Quicktag
Quicktag is a tagging plugin for the jQuery JavaScript library.

DataTables (table plug-in for jQuery)
DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.

jQuery Tags Input
This plugin will turn your boring tag list into a magical input that turns each tag into a style-able object with its own delete link. The plugin handles all the data — your form just sees a comma-delimited list of tags.

jquery.timepickr.js
a jQuery library that enhances a date picker input area with a more convenient date selection.

Last Click

JavaScript Commodore Emulator
This emulator is meant as a ‘proof of concept’ and uses the HTML5 Canvas-element to render the Commodore 64 screen layout.

BreakDOM
A remix of the classic Breakout game. This one will keep you busy for a while.

© Smashing Editorial for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us
Post tags: javascript, jquery, tools, useful