Advertise here with BSA

From print to packages to web design and pretty much all other media that you can think of, typography always plays a big role. Not only can good use of typography add to your design from a visual standpoint, it can also play an important role in defining the heirarcy of the content. With this in mind, we gathered a collection of inspiring typography usage in web design. From small type to huge and colorful ones we will show you that typography can be very important in your design.

Life in Greenville

Cider

Circles – Meetups for the Creative Types

goodness

Yes Nurse

Viljami Salminen

unify

senic

7 Days in Havana

Planilandia

Captain Dash

inTacto 10 years

Nike Chosen Series

Hello Bar

Build Responsively

Roberto Paganelli

koppy

255 Creative

Haus of Design

Headset Press

deciduous

Source:

The Best Designs
CSS Design Awards

Advertise here with BSA

Here at WDL we love to show our readers inspiration from different media, especially inspiration involving typography. From package to web and print, we believe that typography can always be a great source of inspiration. Today we gathered a few examples of inspiring and creative typography usage in print ads.

Advertise here with BSA

Here at WDL we love to see beautiful typography and we never get tired of showcasing them to our readers. From Typography Wallpapers to Typography in Beverage Bottles and Typographic Logos, we are always trying to show you different type approaches. Today we gathered a few websites that use typography in an inspiring way. From hand drawn letters to colorful and minimalist ones, from small sizes to huge ones, you will find several examples of how to use typography in your website, enjoy.

Reveal Theme

Give Beyond

Rogge & Pott

Future of car Sharing

La Wine

Kansas City Creep Fest

Co-Work

MahiFX

nest

Austin Beerworks

Games We Played

Unlisted Collection

Fuzzco

English Workshop

Moody International

Henry Real State

K.A.N.T.T.

Shaw & Shaw

The Cocktail App

think moto

Outside the Wire

McFarlane

Source:

The Best Designs
unmatchedstyle
Site Inspire

Advertise here with BSA

Here at WDL we love typography and we are constantly showing our readers good typo usage, from print to logos, from web to random typographic works, we really feel the need to keep the juices flowing in that area, and we could not forget to mention all the free fonts we like to show you! So today we decided to show our love for typography gathering some examples of big typography in web design. From bold and colorful letters to delicate handwriting ones, you will find a lot of inspiring examples of how to get attention using typography, enjoy.

Riser

Karb

Bellstrike

The Lost Thing

Joel Andrew Glovier

Soulwire

cookiesound

McFarlane Change Management

Skewed Icons

Rice Bowls

Appmiral

Barcamp Omaha

Leaderbe Consulting

Andy Hillier

Ana Majik

River & Robots

Moreno

Contrive Digital

Francesca Nini

Daniel Martin

Ruth

Buses at the Brewery

Corkcicle

Smokey Bones

Mr Henry

Source:

The Best Designs
unmatchedstyle
Awwwards

Advertise here with BSA

The word typography, from the greek word typos, is the art and technique of arranging type. And I have to agree that arranging typography is an art. Some designers have the right skill to transform normal type in inspiring and eye candy pieces. We decided to gather a list with inspiring examples of typography from three great sources for that: Ads of the World, deviantART and Flickr. From simple and minimalist examples to colorful and illustrated ones, we have a lot of nice images to keep the juices flowing for your next project.

Ads of the World

deviantART

Flickr

Advertise here with BSA

Letter case – in orthography and typography is the distinction between the larger majuscule (capital, caps, upper-case, upper case, or uppercase) and smaller minuscule (lower-case, etc.) letters. The usage of capital letters can have different meanings – in emails CAPS can sound rude, but when used properly, especially in web design they can be pretty effective to get attention and to showcase main information, menus, and titles. So here we gathered a list with 25 examples of websites that use big bold letters to showcase their info.

Matthew Byrne

Dan Ogborn

LeetGeek

mediaBOOM

mediaBOOM

MacMillan Lynch

CenWood Kitchens

OwlConcept

Union Station Neighborhood

Twofold Creative

Tapp3 Media

Greenluv

Perkins

Idea Exhibit

Mercedes House

Booki.sh

Unfinished Business School

Yurbuds

ultranoir

Brand New Conference

9elements

Messages for Japan

Deda

Two Fish Illustration and Design

Nate Croft

Source:

The Best Designs
unmatchedstyle

Advertise here with BSA

Typography is one of the most important aspect of effective web design. Proper font use can improve your website’s readability and user experience. Well selected fonts can help you to make your website more attractive for your visitors. There are a lot of possibilities to implement custom fonts on websites using Cufón, @font-face, Google Fonts API, sIFR and other solutions. In this showcase you’ll find 30 inspiring websites with effective typography and unusual fonts used.

Mobilezr

Singleframe DESIGN

Really Simple

CodeMyConcept

YEBO Creative

HTML5 Lab

Network Hoops

Lee Munroe

Sylvain Prevost Design Studio

Redesign de Site et Logo

Raven Internet Marketing Tools

I do surf better

Portfolio of Kristof Orts

Converge SE

Auxilium Lab

David Hellmann

HTML5 Boilerplate

Coucou

Vayknights

Inktype

Made by Mike

Two Paperdolls

Studio Adam

Docteur Bourdon

Circle

The City Is Burning

CNC

TestingScrum

Solo

Drum Studio Tuition

Advertise here with BSA

Typography is an art form rarely covered in the spotlight. Web designers too often indulge into page graphics and CSS effects. Ironically page text is what carries the information you’re trying to spread, thus should hold much higher importance to your visitors. I find the problem isn’t with a lack of interest but a lack of knowledge on the subject.

When discussing typography there are many aspects concerning such a topic. Aside from font families you’re dealing with serif/sans-serif typefaces, weight, kerning, leading, and similar ideas. This article is meant to slowly introduce designers into the wacky world of digital type.

Base Term Definitions

Let’s discuss a few key terms which should clear up some confusion right away. The first important set of keywords defines font and typeface. A font is described as a specific set of characters which make up one font face. This could be Arial, Tahoma, Times New Roman, Georgia, and the many others we encounter.

Similarly a typeface defines a family of font styles. The key word here is font styles which separate many different fonts into groups, or families. These typefaces could include sans-serif, serif, script, monospaced, and others. You may also categorize typefaces by styles such as bold text, italicized text, etc.

The most important consideration building your site out is styles of fonts to use. There aren’t as many which can be shared via the Internet since there is such a variation between installed fonts in Windows and Mac environments. Thankfully Google Web Fonts offers a very elegant solution to this problem which many web designers have adopted.

Some of the more obscure terms include weight and kerning. These can all be manipulated through CSS properties applied to paragraphs, headings, or other text elements. The weight of your font can be adjusted and displays a “heavier” bolding of each letter. Kerning is a technique used through the letter-spacing property to add or remove extra space between letter symbols.

Breaking the Norm

It’s entirely rational to discuss the need for new fonts on the web. For the past decade many pages have become stale and ripe with repetition. The same Arial and Geneva font stacks can become old using them on every project. And although you can still manipulate colors and special effects, often times paragraph font will be much more readable in black/dark grey Arial type.

Where many of us wish to customize our text starts with page headings. From the many possible effects granted with CSS there are countless opportunities for personalization. These include such packages as Google’s Web Fonts which will also expand your library of possible font families to choose from.

For branding purposes it’s generally a good idea to match headings with your site theme. These may include a color scheme, underlines, background icons, or in-text graphics. Ultimately the decision is yours and there are plenty of resources to help you work out typographic combinations.

Rally ‘Round the Family

Between the many font families available to Windows and Mac users these just don’t seem to cut the cake with logo design. Working in Adobe Photoshop or Illustrator requires much more precision and creativity. The base font families are okay, but this seems like a lacking in the imagination to seclude yourself into this set.

Although there are many free font directories online, you can spend hours wasting away browsing archives for just the right choice. Check out our collection of sleek fonts to get some ideas flowing.

Keep in mind not all typefaces will fit within the mood of your website. For example calligraphy has been popular with fancy venues showcasing the handwritten style. Also high class corporations and restaurants will use these fancy styles. On the contrary If you’re building an arcade or gaming website you may steer towards larger, more vaulting type faces to leave a big impression on your visitors.

Distinguishing Page Dynamics

It’s important to use typography as a liner map of your page design. Paragraph text should mold into block formation with easy-to-skim alignments. Similarly if your visitors are skimming for hyperlinks ensure these will stand out and be easily clickable.

If you’d like to find other advice on hyperlink design I recommend our modern typography tips article. Hyperlinks are vital not only in paragraphs but also in your heading, sidebar, and list content sewn throughout your pages. Since you’ll generally be working within the same font family the distinguishing factors would include background colors or rounded corners within hyperlink text.

Reading Moods

Each font family will bring about differing moods within your readers. If you are not very connected with the Internet it is simple to overlook these feelings. However just because you tend to pass up recognition does not make them any less “real” in the grander scheme

For example serif font choices in your paragraphs denote a feeling of professionalism and reputable information. This is often seen in mainstream media resources such as The New York Times. For smaller blogs you may enjoy large paragraph text with a greater line-height so readers may skim and clip out portions of your blog posts.

Font combinations can be very difficult. They provide a typical balance which isn’t often construed in today’s modern web atmosphere. In this brief article outline Jennifer Moline mentions a few techniques for working with differing font families in your webpages without botching the entire design. It’s a delicate process but with enough practice not too difficult in project work.

Conclusion

Above we’ve gone into a collection of ideas to work with font families. Building fonts for Photoshop designs vary greatly compared to web-based applications. This explains why so many webmasters find it difficult to customize their typography.

The resources shared above should be a huge jumping off point for newbies in the field. I highly recommend messing around with Google’s Font database if you haven’t already. There is a lot of information and content available if you know where to look. And Google is just one of these service providers.

Digital writing is a deep topic and requires a very dedicated study. I haven’t touched upon everything here, so please do share your ideas and suggestions in the comments below. On the same note if you have links to helpful typographic resources the design community would prosper greatly.

Advertise here with BSA

What is the Most Important Element in Designing Your Website? When you begin to design that perfect website, what do you think is the very first thing that you should be concerned with? Color? Templates? Graphic design? No. The first thing on the agenda should be font size.

“Font size,” you say? “Why should one be concerned with something as mundane as font size when there’s a whole website to be concerned about? So, you must be joking, right?”

Image Credit: Dekar Font from Fontfabric

Font Size Must Be the First Consideration

Sorry, this is no joke. Font size can, and will, make or break your website. The fact is that if your website is not readable, no one will stick around to try and decipher it, no matter how attractive the site may look at first glance.

The font size needs to be considered with care; a too large font can be just as unreadable as a font that looks like an array of tiny dots, no matter how hard you try to focus.

Four Ways to Consider Font Sizes

Fonts sizes are usually defined in four specific ways:

1. Absolute
2. Relative
3. Length
4. Percentage

Font sizes that are absolute are defined by the user-agent. These include the familiar xx-small all the way to xx-large; the default size usually being the x-medium. When a font size is relative, it means it is relative to the parent element, which makes it either larger, smaller or the exact size.

Length usually means a font that has some absolute measurement, such as an inch or centimeter, while a percentage is an absolute font that is relative to the parent element.

Reader Accessibility is Top Priority

One thing to remember in selecting the correct size for your typography is how accessible it will be to your readers. If your readers are mostly young adults, a smaller size may work but if you are wanting to appeal to a more mature audience, then your best bet is to choose a font size that is not only larger, but extremely readable.

Ems or Pixels?

A good accessibility trick is to create your design in ems. This function lets your chosen fonts become larger or smaller according to your readers’ individual browsers. Designing in ems allows the size of the font to become relative to the parent element. On most websites this would designate the font to be sized relative to the user’s browser.

One word of caution – one issue to consider in the use of ems is the possibility of not controlling the look of your site. With ems, your website fonts will scale relative to the default size of the browser, which can sometimes create a rather wild font size.

If desiring control over the look of your site is a must, then the alternative, and possibly best option, is to create in pixels. Pixels are the standard and results will usually hold few surprises in the look you want for your website.

Just remember, whatever decisions you make for website viewing, always consider your reading accessibility and the comfort of your visitors. This one area can make or break your website.

Advertise here with BSA

We would all agree that content is the most important aspect of any website. And in most cases content is made up of type. So, as a web designer, it makes sense to have a strong understanding of typography. With that in mind, we rounded up some free ebooks that should help you strengthen your typography skills.

Meet Your Type

Meet Your Type, by the FontShop, will help you overcome common obstacles, and keep your heart thumping for your one true love: typography.

Better Font Stacks

A comprehensive comparison of various font stacks.

The Typographer’s Glossary

The Typographer’s Glossary, by the FontShop, is a glossary of typography related terms.

The Elements of Typographic Style Applied to the Web

In order to allay some of the myths surrounding typography on the web, this ebook is structured to step through the principles found in Robert Bringhurst’s The Elements of Typographic Style, explaining how to accomplish each using techniques available in HTML and CSS.

Type Classification

This book has been made to help you learn the 10 broad classifications of type. These are the basic foundations of what you need to learn to learn typography and it is essential for any designer to know how to classify type.

The Right Font for the Job

This nine page ebook will help teach you how to choose the right font by illustrating the four main ways fonts can differ.

The Vignelli Canon

A 96 page book to help you better understand typography in graphic design.