Web Design Ledger » typography

Six Super Helpful Typography Cheat Sheets

Henry — Tue, 06 Jul 2010 04:14:57 +0000

Some may argue that typography is the single most important aspect of web design, but yet it’s often one of the most neglected and overlooked. There’s a lot involved in typography, and becoming a master can be difficult. A lot of it requires much experience, practice, and knowing the rules and do’s and dont’s. Nevertheless, there’s a lot to remember. So to provide a little typography aid, we’ve rounded up Six Super Helpful Typography Cheat Sheets.

So You Need A Typeface

Mixing Typefaces

Web Safe Font Cheat Sheet

Common fonts to all versions of Windows & Mac equivalents

CSS Typography Reference Sheet

CSS Font Shorthand Property Cheat Sheet

30 Typography Focused Logo Designs

Henry — Thu, 10 Jun 2010 05:36:23 +0000

We frequently talk about typography here at WDL. Whether it be in web design or print design, typography plays a big part in making or breaking a design, especially if the design’s main focus is typography. In this post we are showcasing 30 typography focused logo designs. In these logos you won’t find any icons or symbols. It’s all about type.

26 Free Progressive and Experimental Fonts

Henry — Thu, 29 Apr 2010 05:38:17 +0000

Design is constantly changing and moving forward. However, typography is one aspect of design that seems to resist progression. When it comes to typography, there are standards and traditions that have been around for many years. These rules are there for a reason – to make sure that letters and words are legible. But to move forward, sometimes rules have to be broken. So for this post we’ve rounded up 26 free progressive and experimental fonts. These fonts might be pushing the limits of traditional type design, but the results are stunning.

Rounded

Cube 02

Paranoid

Mod Gothic

Ultras

Tozuna

Nano

Slukoni

VAL

Gordala

Quadranta

Metal

Playtime

Sylar Stencil

Sans Serious

Kain Block

LOT

Clutchee

Tribbon

KnucklePuck

Etcetera

Amputa Bangiz

Betlog Square

Slimbo

Days

FILE

55 Examples of Huge Typography in Web Design

gmuller — Mon, 22 Feb 2010 06:31:18 +0000

Choosing the correct typography for your website is a very important part of the design process. And as a website is also a communication tool – a very powerful one – you can use the typography to help you on exposing your ideas! Using HUGE typography, for example, you will get the attention you want and your site will also look cool. You can use huge typo only in a word, a sentence, everything… it’s up to you. Here we will show a selection of very nice usage of huge typo in web design to inspire you to go a little wild on your website typography!

CharlesElena

Chirp >> The Twitter Developer Conference

Happy Cog’aoke 2

Morphix

teez

Sketchen

Digital Podge

zee

Make Photoshop Faster

rareview.com

Me In Motion

Rich Brown

Biz Break

barneyfunk.com

TPUTH

Bills

Boxee

Mulletized

gapmedics.co.uk

merge

sketch.odopod.com

thePlant

carsonified.com

Glitch

goslingo.com

bigcartel

stackoverflow

gummisig.com

Ryan Keiser

finch

Cupcake Creative Studio

Hull Digital Live

Bullet Pr

electricpulp.com

notoriousdesign.co.uk

forabeautifulweb.com

Mark Boulton

Daniel Hellier

visualbox

Brunet-Garcia

fajnechlopaki.com

flashgamingsummit.com

Grow

wordit

objectified

polar gold

elysiumburns.com

blackestate.co.nz

Giant Creative

takeshape.it

Alpha Multimedia

blog.fl-2.com

oliverkavanagh.com

The Urban Landscape Lab

Denise Chandler

About the Author

Gisele Muller is someone that recently discovered a new career online. A person that really likes technology, design, photography and creativity. An eternal geek wannabe, tech fan and a communication lover! Current location: Porto Alegre, RS – Brazil. Twitter: @gismullr

20 Do’s and Don’ts of Effective Web Typography

MikeSmith — Mon, 16 Nov 2009 04:57:34 +0000

In a previous article here on Web Design Ledger, I broke down 20 do’s and don’ts of effective web design and today I would like to keep up with that topic and go over 20 do’s and don’ts of effective web typography. It’s an important part of designing for the web, yet it’s often overlooked (even by me previously). Below are the 20 do’s and don’ts and in the comments section, you’re free to let us know of any of the items we might have missed.

DO NOT use too many different font faces on the page

You may have 1,000+ fonts downloaded on your computer, but when they’re being displayed all on the screen at the same time, you’re not going to have many people impressed. Not only will this cause your website visitors to have a hard time reading, it’s also going to just make you look tacky.

DO NOT switch from serif and sans serif fonts multiple times

Sticking with the theme from above, switching from Serif and Sans Serif fonts multiple times per page will do you more harm than good. Readibility is the #1 thing you need to be worried about with your website, because no matter how “cool” it looks, if the visitor can’t read whats on the page easily, they’re going to leave.

DO NOT ignore planning for font increase by the viewer

Older audiences will adjust the font size view on their screens in their internet browsers settings, so no matter what font you default the text at, it might not be showing this way for the visitor. This can cause errors if you aren’t taking larger fonts into account for headers and other various items which might break the design if they break into two lines.

DO NOT use Sans Serif fonts for large bodies of text

Sans Serif fonts are great for the clean, uniform look – but when you’re putting together large bodies of text (10+ lines), switching your fonts to a serif font will allow for better readability as the curves and shapes help guide the eyes better than the straight, uniform lines of the Sans Serif fonts.

DO NOT overuse font replaces like Cufón and siFr

Cufón and SiFR are just two of the various ways you can replace text in your browser to give off a more custom look, but use it wisely. Using the font replacement for the entire web page is going to be a bit overload and will distract the visitor from the actual reason you’re typing on the page in the first place – you want them to be able to read it. I would advise to generally stick with headings and calls to action for your font replacements and leave the major bodies of text as regular, web safe fonts.

DO NOT overdo the emphasis in your text

A good writer will be able to emphasize the words they want without using bold, italics or underlines. If you’re text is littered with tons of strong and italics and underlines, you might want to rethink what you’re doing. Utilizing the codes to emphesize specific items wisely will make things look – and read – thousands of times better.

DO NOT forget to utilize font stacks in your css codes

When I’m building websites, I tend to like using helvetica for the text of specific items. I realized early on that not a lot of people will have purchased helvetica, so the font won’t display properly on their page if I simple use “font: helvetica;” in my css, so I read up on font stacks and use them religiously now. Basically, it gives you the option to use any font you want, and also allows for back ups in case the visitor doesn’t have the specific font you give first. An example would be like this: “font: Helvetica, Arial, sans-serif”, which basically says that you want the page to display helvetica for the text, and if thats not available on the visitors computer, you want the page to use arial – and if for some reason that isn’t available, it gives a generica sans-serif font.

DO NOT type in all caps – use text-transform when you need it

So, lets just say that you want your headings to all be capitalized – how do you do it? DO YOU EXCESSIVELY TYPE IN ALL CAPS? There are a few problems with that. First, it’s annoying. Second, it’s not easy to edit them out later on if you redesign your site and do not want all caps anymore. So what do you do? Utilize the text-transform css code. Here’s an example.

text-transform: uppercase;

DO NOT forget to use accent characters when needed

Typing words like Cufón numerous times on the page without the accent characters will make you look sloppy and uneducated. Yes, it’s true. So utilizing the accent characters will allow you to display the words properly (it’s really polite to do so) and it also is a lot easier than you’d think. You can get a full list of accent characters by visiting this article from w3.org.

DO NOT – I repeat – DO NOT use comic sans or papyrus on anything!

This is actually a rule across all forms of design that use typography – web, print, ect. Never – I repeat – never use comic sans or papyrus on anything. It’s tacky and deserves to be lumped in with IE6 – and we all know how bad people hate IE6, right?

DO use line height to your advantage

Relying on the default line height for your text will bite you in the ass in the long run because it’s honestly just not enough room between lines and will not allow you to work with a proper baseline grid (more on that below). I tend to keep my line height 5-6 px larger than the font size I choose – so if my font size is set to 13px, I will make the line-height 18px.

DO use the proper text colors on the page background

The best thing to do (in my opinion) is to utilize an off-white (#F8F8F8) font on a black background and a dark gray (#252525) font on a white background. It helps the contrast become minimal and doesn’t strain the eyes as much for your visitors when they’re reading your content.

DO use web safe fonts as often as possible

When you’re building your font stacks, make sure you’re using the web safe fonts as much as possible. The fonts that are installed on both PC and MAC can be found by reading this article on ampsoft.net. When you have a knowledge of what web safe fonts are out there, you can better prepare your website for the break down from your original fonts to the fonts that are most common and would be used if the visitor didn’t have your font installed.

DO use a proper hierarchy for your pages

Utilizing a great hierarchy for your web pages will allow your visitors to quickly scan your content and find the most important items. Nothing is worse than getting to a page and having to spend 30-60 seconds looking for the content and finding out what it’s even about. Use proper title tags for the most important sections and smaller title tags for less important sections. You can also use different colors and spacing to vary the hierarchy for your pages.

DO make use of a baseline grid

A consistent vertical grid will help readability for your web page and also increase the visual appeal of the overall design. Proportion and balance shouldn’t be broken by font sizes, so sticking to a proper vertical baseline grid will allow your page to flow naturally from top to bottom as well as from left to right. Acheiving this effect is as simple as these few lines of code below. Notice that the line height for the text is the same size as the margin for the bottom of the paragraph blocks of text (you should also keep this in mind for header tags as well as images).

body {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 13px;
	line-height: 18px;
}

p { margin: 0 0 18px 0; }

DO utilize white space as much as possible

Keeping up with the above do, utilizing white space in your design will help your pages readability. It will allow your page to breathe and give your visitors eyes a rest. Don’t believe me? check out the image below and let me know which item you think is best for readability.

DO keep the use of centered text to a minimum

Centering text is good for one line or maybe a speech bubble in your design, but requiring your visitors to read large blocks of text will cause their eyes to drift and not follow line by line as easily as if the text were aligned to the left or right.

DO use shade variations to help areas stand out more

When designing your next site, keep this in mind – if your body text is black and your sidebar text is a medium gray color, your content will visually stand out and be read faster than the sidebar items. The same goes for blockquotes and other non-essential items that you do not want to take away from the attention of your main content areas.

DO make sure you know about, and use, proper letter spacing for titles

This is an item I didn’t think about very often – until recently. If you are utilizing the text-transform css code I wrote about above, you’re going to notice that the text might be a bit hard to read. Utilizing the letter-spacing property in your css will help curve that problem. There is an example below but please know that the letter spacing is relative to your fonts default letter spacing so it might work differently for various fonts and font sizes.

h1 { text-transform:uppercase; letter-spacing: 1.25em }

DO make use of a typographic scale in your css codes

Using a proper typographic scale will allow your page to be read easily by the visitor and will allow you to keep the hierarchy in tact that we spoke about above because if your main text is 12 pixels, then the blockquote and paragraph fonts will be 125% larger by using the 1.25em code in your css. If you properly use a typographic scale, it will actually look like a flieght of stairs – like the image below.

body { font-size: 12px; }
h1 { font-size: 5.0em; }
h2 { font-size: 4.0em; }
h3 { font-size: 3.0em; }
h4 { font-size: 2.0em; }
blockquote { font-size: 1.5em; }
p { font-size: 1.25em; }
input { font-size: 1.0em; }
small { font-size: 0.75em; }

Anything I missed?

Let me know in the comments. I’m ready to learn from you all and I hope you learned a thing or two from me today as well. Thanks for taking the time to read my article and don’t forget to share it with friends through email and social networks if you enjoyed it.

About the Author

Mike Smith is a blogger who writes about social media and marketing and he’s a blog designer at Guerrilla.

10 Useful Text Enhancing Plugins for WordPress

Henry — Mon, 09 Nov 2009 07:51:54 +0000

Out of the box, WordPress is an amazing product and comes loaded with tons of features. However, one area that might be lacking is text formatting. There’s not really any tools built in to do things like dynamic image replacement, code highlighting, and other styling to improve the look of your text. Luckily there is a community of talented developers that have created plugins to fill this need. I’ve listed here 10 of the most useful text enhancing WordPress plugins.

TTFTitles

TTFTitles lets you use images to replace the titles of your posts, thus circumventing the problem of guessing what fonts your end-users might have installed.

wp-Typography

wp-Typography is a one-stop-shop for improved web typography in WordPress. Some of it’s key features include: hyphenation, spacing control, and intelligent character replacement.

Drop Caps Plugin

With the Drop Caps plugin, all drop caps are added on the fly meaning you can disable them if you change theme and you don’t need to think about them when you write your posts.

Simple Pull Quote

The Simple Pull Quote Wordpress Plugin provides an easy way for you to insert pull quotes.

Google Syntax Highlighter

This plugin easily integrates the Google Syntax Highlighter by Alex Gorbatchev into WordPress.

WP-Syntax

WP-Syntax provides clean syntax highlighting that supports a wide range of popular languages. It supports highlighting with or without line numbers and maintains formatting while copying snippets of code from the browser.

WP-Syntax Colorizer

WP-Syntax Colorizer is a plugin that runs along side WP-Syntax and gathers all of the functions required to set custom colors for your code snippets.

Text Control

Text Control lets you to choose from a variety of formatting syntaxes and encoding options.

PS Disable Auto Formatting

PS Disable Auto Formatting stops automatic formatting of WordPress (wpautop), and modifies the html source generated by the visual editor.

Dynamic Font Replacement

Dynamic Font Replacement allows you to use your own ttf- or otf-fonts with WordPress.

14 Best Online Typography Tools for Web Designers

Henry — Mon, 28 Sep 2009 05:35:43 +0000

Since typography is one of the most challenging and important aspects of web design, it’s important to have useful tools that can make things easier. Here’s a list of tools that will be a big help in making your typography beautiful, and you won’t even have to leave your browser.

CSS Type Set

CSS Type Set allows you to visually and interactively style text and it generates the CSS.

Typetester

The Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated.

Typechart

Typechart lets you flip through, preview and compare web typography and then grab the CSS.

WhatTheFont

WhatTheFont allows you to scan in or provide the URL of a font and it will tell you what it is.

Fontstruct

FontStruct lets you quickly and easily create fonts constructed out of geometrical shapes, which are arranged in a grid pattern, like tiles or bricks.

Baseline Rhythm Calculator

Baseline Rhythm Calculator generates CSS from a base font size and line height entered by the user.

PXtoEM

PXtoEM is a calculator that does conversions of pixels, em’s, points, and percentages.

Font Burner

Font Burner gives you a simple block of code to put in your webpages so you can transform your headlines from boring system fonts to any of the quality fonts in their archives.

TypeNavigator

TypeNavigator is the world’s first interactive visual font search system.

Font Tester

Font Tester is a free online font comparison tool. It allows you to easily preview and compare different fonts side by side with various CSS font styles applied to them.

Flipping Typical

Flipping Typical allows you to enter text and then preview it in many different fonts at one time.

Identifont

Identifont lets you identify a typeface from a sample by answering a series of questions about key characteristics.

STC FontBrowser

STC FontBrowser lets you preview all of the fonts active on your computer.

Convert TrueType Font to Sifr Flash File

The name of this one is self explanatory, plus it emails the Sifr file to you.

33 Epic Works of Typography Art

Henry — Fri, 04 Sep 2009 13:41:17 +0000

If your creative typography juices aren’t exactly flowing, you’re at the right place. The impressive works of art below are all focused on typography and showcase a wide range of type treatments that are guaranteed to inspire.

Click on the title or image to view a bigger version.

Folk Love

PolkaCore

Belio Experiments

Typographic Illustration

Tongue Twisting Type

Crude

Waste Not. Want Not.

lyric portrait

I Love Typography

Fresh Style

Times- Type Factory

A Tribute to Yulia Brodskaya

Destructive Vintage

Beautiful Decay

Colorcubic Experimental Prints

Children of the idiom

Gold

Blackout

No Lies Just Love

tangerine

Type tips

PINK PARTY FLYER

Things Fall Apart

positive/negative

Brown Fox

“M” Typographied v.2

GMS 09 Type

Chanel 4 – 25th Anniversary Book

Typography

Desktop Battle with SELECT

Decogrunge Type Treatment

3D Type Experimentst

FATBRASS Typeface In Use

14 Most Impressive Photoshop Typography Effects

Henry — Wed, 01 Apr 2009 05:46:41 +0000

In web design, there are often times that you will have text to which you want to draw extra attention. We all know the power of Photoshop. So why not use it to add an impressive effect to that text that will be sure to get peoples attention.

There are many Photoshop typography effect tutorials out there, but I believe that these are some of the best. Not only are the final results stunning, but contained in each are many techniques that you can add to your bag of design tricks.

Create a Dream Design with 3D Typography

This one does require Adobe Illustrator to create the 3D text.

How to Make Patch on Clothes

Dynamic Recessed Watercolor Typography in Photoshop

Create Destructive Black and White Lettering with a Dramatic Splash Effect

How to Create High Quality Metal 3D Text in Photoshop

Create a 3D Flowery Text Effect

This one does require Adobe Illustrator to create the 3D text.

Create a Spectacular Grass Text Effect in Photoshop

Colorful Glowing Text Effect in Photoshop

Transparent Glass Lettering in Photoshop

Smoke Type in Photoshop in 10 Steps

Super Cool Frilly Bits Typography

Smooth Glass Type

How to Create a Copper Photoshop Text Effect

Create a Layered Glowing Text Effect

12 CSS Tools and Tutorials for Beautiful Web Typography

Henry — Wed, 25 Feb 2009 06:07:27 +0000

Achieving beautiful typography with CSS on the web is no easy feat, and there are many limitations to what can done with type on the web. However, there are generous people out there that have taken the time to build tools and write tutorials to help you overcome these limitations and create websites with beautiful typography.

Here are some that I find most useful: