Over the years I've worked on a lot of open source projects. I've also worked on quite a few commercial projects. What a lot of them have in common is the need to market themselves to developers, but without any marketing budget. When I worked on JFXStudio my budget was 20$ a month from my own pocket.
What you are about to read is an essay form of a presentation I gave at OSCON 2010 a few weeks ago in Portland. I considered just publishing the slides, but it's really not as useful without the spoken words that go with them. Since I consider this such an important topic I rewrote it as an essay that I hope will help open source project leaders market their projects successfully. Enjoy! (photo courtesy of Flickr user EraPhernalia Vintage)
Why should you listen to me?
Before I dive into the essay, let me tell you a quick bit about me and try to convince you why anything I have to say is useful. (We'll see how it goes. If I don't see you at the end I'll know I failed. :)
My name is Josh Marinacci, and I've worked at Sun for five years and now work on the Developer Relations team at Palm. Over the past decade I've worked on both commercial and open source projects, often with very little marketing budget because they are developer focused.
On the open source side I've founded or been involved with the Java lib Flying Saucer (xhtmlrenderer), the widget system: AB5k/ Glossitope / WigetFX, JFXtras, the JFXStudio community site, SwingLabs/SwingX, and I've been a community leader for Java.net for years.
Some commercial projects you might have heard of include Swing, NetBeans, JavaFX, the Java Store, and now of course Palm's webOS. While not all of those are still shipping products (I suspect the Java Store was canned), they were all projects that needed to attract developers.
The core of all of this is Marketing. Now, when you saw the word marketing in the title of this essay you probably came expecting me to show you some cheap ways to make users aware of your project. While I am going to teach you about that, I'm going to teach you some marketing first. We often hear the word marketing used when really someone means advertising.(a quick aside: This may or may not be the strict business school definition of marketing, but I've found it to be practical and useful for our purposes).
What are we marketing?
Before I can explain marketing, let’s consider what we are marketing. Throughout this talk I'm going to use the word product over and over. You may say: but we aren't selling anything, we are open source. True, you aren't selling a product for money. But you do have a product. It's the software you've created. And you are selling it. Customers are buying it from you, but they are buying it with their time and their code and their feedback rather than dollars. Even though it's not a monetary transaction all of the principles of marketing apply as if you were a commercial company.You see marketing really has multiple pieces:
- Marketing research: Who is your market? What do they want?
- Product Design: What does your product need to do to fit the needs of the market
- Advertising: making the world aware of your product
- customer feedback: using feedback from your customers (and potential customers) to improve the first three.
You need to know who your product is intended for: your market. You need to make sure your product fits the needs of this market (no less and no more). Then you need to advertise. Advertising isn't an dirty word. Advertising is simply making your target market aware of your product. There are lots of ways to do this that don't involve buy 30 second spots on TV, which we'll cover later in this talk. And finally you need a way to get feedback from your customers, or potential customers, and pipe this information into improvements of your research, design, and advertising. If you take a discipline approach to marketing then your project will be a success. (note, promise not legally binding. not valid in some states. mind the gap).
Who is your Market?
This is the most important thing you must figure out, possibly before you even start writing code, because it will shape everything you do.
Now, often open source software was created to scratch an itch. So often you are the target market. That's perfectly valid. So the question is whether that market contains more people than just you. Suppose you create an apache plugin to meet your needs as a website administrator, then your market might be other website administrators. With some thinking and searching you can figure out who is your market, and it may lead you to some users who are very different than yourself.
For example, when I created Flying Saucer I originally imagined it would be for people who wanted to put simple HTML content inside of desktop Java applications. However, I lucked into a new market. I added an PDF export option because I found a good PDF library and thought it would be cool. After I blogged about it I discovered that there were a lot of people who wanted to auto-generate PDF forms and reports from HTML because it was far easier than other code based PDF solutions. Once we knew this we started adding features to make better for those kinds of users. Things like the CSS 3 extensions for pagination. This was a case of customer feedback leading into our market research and then back into product design.
Defining your product
What is your project about? You need a brief and concise description of your project. If you can't summarize your project in a paragraph, or better yet a single sentence, then you haven't thought through your project enough and should go back to your market research and product design. Even a huge large mature project like tomcat still has enough focus to describe it briefly.
You should create a description of your project that is one page long, then a shorter one that's one paragraph, then a one sentence version. This will not only help you narrow your focus to the most valuable features, but you'll be reusing these descriptions over and over when you start your advertising.
Here's a simple example:
This screenshot is from the Flying Saucer home page. In a single paragraph it tells the new reader exactly everything they need to know: the library renders XML and XHTML content with CSS, and it's 100% Java. Right away the visitor can determine if they should investigate further or move on to look for a different project. This helps not only keep them from wasting their time, but also from wasting your time.
To effectively market your project you need a coherent message, and that starts with having a single place for people to learn about your project. It's the 21st century, so that means you need a website.
A Google Code site is not a website.
Other than maybe a short text blurb this site contains no information about your project. It's a great collection of tools for existing contributors but it doesn't provide anything that would make someone want to come back to your website again, much less contribute to your project.
This is a website:
The website is visually interesting and it gives users a taste of the application. This particular site is for a project I created called MaiTai. MaiTai a tool for creating audio visual mashups, so I chose a dark color scheme with splashes of intense seductive colors.
This page first draws you in with the design and some pictures on the side. Then it has clearly defined structure of news, about, and a gallery of samples. Most importantly it tells you what the project is about through the tagline at the top and a summary snippet. This is the most important part of your message. This is where you start to reuse the descriptions I had you create above.
Building your site
Keep your site simple. I recommend WordPress or one of the other great blogging / simple CMS platforms out there. As a Java guy I hate the idea of running my site on PHP, but I almost always choose WordPress because it's simple and it has a large rich community of themes, plugins, and support. It gets the job done with as little fuss as possible. Now, I'd like to think I'm a good developer. Could I build my own website by hand? Sure. But you know what, my goal here is to produce an open source project, not a website. My time is better spent working on the marketing and project code, not mucking with a webtools.
Some of you may still think: WordPress? Really? Will your site scale as you add users? Will it have the features you need? Probably not. But that's a problem you want to have. It's not something you need to worry about right now. Worry about it once you have tons of users, and then you'll have some help building the replacement site. Don't shave the yak. Get a site up ASAP and get on with your project.
And this goes double for the visual design of your site. If you are a programmer like me then you aren't a great designer, or at least it will take you a long time to design something good. Instead, choose from one of the hundreds of great themes already created for Wordpress and customize it. That's what I did with ProjectMaitai.org. I spent a half hour looking through themes, picked one, then added the splash image at the top. Done. Get back to coding.
Okay, so now you've got your target market, a first version of your code, and a website. Now you need some real users.
Step zero: be polite.
The next few weeks will be equal parts exciting and frustrating. Always be polite and considerate. Choose your words carefully and gently. Actually, pretty much throughout life I recommend this. If you are always nice to people and smile then wonderful things will happen. I promise.
Step one, don't get outside users yet.
There's probably still major bugs in your code or website that you've overlooked because you are too close. Get some other developer friends (yes, developers have friends) to look over the site and try the software. Go back and fix what they find. Now go get some users.
Step two: draft a press release.
Remember that one paragraph description I had you create? That goes here, followed by the longer version. That's all a press release is. Yes, I know. Press releases are the bane of modern news, but they exist for a reason. They are a concise description of what you've created, spelled out so clearly that even the dumbest chimp with a newsblog can't get it wrong. Your goal is to get your message out.
Step three: submit your press release to the right people
And by right people I mean website and news blogs who are likely to be interested in your project. Is this a game library? There's 8 dozen sites for game programmers. Is this a Java project? Then the first person you should email is the editor of Java.net. Editors are always looking for new content on a tight deadline, and your well written press release makes their job that much easier. When you email these people you don't want to come across as spam. Write a personal email to the editor politely explaining that you've been working on a cool new open source project and you'd really appreciate it if they'd mention it and link to your site. Then paste the press release after saying thank you. That's it. That's 90% of launching a project.
Step four: fire up the links.
After getting a little press coverage start submitting links to the press articles to the various aggregators like Digg and Reddit. You could submit your own press release, but I've found that the press coverage of your project is considered more authentic than a link to your own blog, and so it will probably get rated up higher. You should also link to your project from Twitter and Facebook. Your friends are your friends, so they will likely spread the word just because they like you. (Which is why you should always be polite, to get more great friends with other friends).
Step five: rinse and repeat
Now that you have some word out there and a connection with a few interested people, you need to do it again. That means you need something new to talk about. That's why I like using blogging platforms for the website. They are built with the idea of continuous new content in mind. Every time you work on a new release, blog about it with a list of what's new and cool. Having trouble building a new feature? Blog about it. Did you get mentioned in the news? Blog about it? Did another project pop up that competes with you? Yes, blog about it. Anything to create new content of interest. Then take a subset of this news and tweet about it. When you have a big new release, send it to the news editors. Keep the cycle going.
Every now and then you want to do something special to build interest, usually around the a new release of your project. This is called a promotion. There's a bunch of fun things you can do that are simple and cheap.
Have a contest.
Create a contest that is relevant to your project. For JavaFX we did a contest where you had to code up something cool that fit a theme, and you could only use 30 lines of code, and you had only one month. Keeping the contest constrained prevents them from becoming unwieldy, and if it's short then it gives you an opportunity to have another contest again soon.
The contest should have a prize, but a cheap one. You should have a prize because you want the contest to feel real. There should be a sense of accomplishment for the winners. But you should keep it cheap so that everyone understands this is really just for fun (plus you have a shoestring budget, remember!) A tshirt or mug is good, but I'm a big fan of amazon gift certificates because they can be used anywhere in the world and don't require expensive postage.
Remember that open source is often a status economy. When announcing the winners recognition is the most important thing. Plus announcing the winners gives you one more thing to blog about. :)
Write some articles.
As your project matures there will be need for longer form documentation and use cases. Lots of news sites want longer form articles for their sites, and some will even pay for them! Kill two birds with one stone by writing an technical article on your project. It can be an intro article or cover how to do something specific and useful with your project, perhaps by combining it with another project. My article on using Flying Saucer with [itext? the pdf article] was one of my most heavily read Java.net articles, and it has continued to serve as great documentation to new project visitors.
Better integrate social networking tools.
When you post to your blog you can cross post using social networking aggregators (links to some). Even better, you can let your users spread the word for you. Install a 'tweet this post' plugin to your blog. And create a facebook fan page. Fan pages were design exactly for this case letting people follow the news of a non-person like a software project. it also means your mom doesn't have to be spammed with updates on your open source code (unless she wants to). Creating a fan page takes just a few seconds and can provide a lot of valuable exposure.
Eventually you will want to talk about your project at a conference, perhaps a Open Source Convention of some sort. :) This means you must get comfortable with talking to a large audience. Don't worry, by this point you'll be so comfortable talking about your project that you'll be overjoyed to have more people listen to you.
When you write a session proposal don't make it sound like a vendor pitch. People come to a conference to learn how to do something or how to solve a problem. If your project helps with them with, then great, but your project shouldn't be the focus. Much like with the articles, pitch a session that uses your project to help solve real world problems. Make sure to spell out what the attendees will learn from your session.
Even if you aren't talking about your project, attending a conference gives you an opportunity to talk about your project to new people. And if you give a talk on another topic you can always mention the project in the 'about me' section and give people an opportunity to come up afterwards and ask questions.
Quick & Easy
Get some cheap & fun business cards. Biz cards are insanely cheap to get these days. Make them something fun, remember you aren't a for profit business so you can afford to be a bit silly if you want. The key is having a card that someone can use to get more information, so it *must* have your website and preferably direct contact to the person who gave them the card (probably you).
Use your email signature. This is a small bit of advertising space. Put a link and one sentence description of your project in your email sig. (check with your boss before using it on professional communication).
Self printed tshirts. You probably don't have the budget to print up a bunch of tshirts. But you can use a site like Printfection to create tshirts that others can pay to have printed for themselves.
Throw a party: yes, a party. If you've got a big release coming up then having a party is a great way to celebrate it. It doesn't have to be big, it can just be you and some friends getting together at a bar. All that takes is a tweet with the time ad place. Be sure to announce it beforehand, encourage locals to attend, and take pictures to post on the blog afterwards. Always be looking for new blog content. Oh, and have some way for people to recognize you at the bar, like a silly hat or project tshirt.
If you already have an existing project here's a checklist of things to make sure you've got covered
- description: one sentence, one paragraph, and one page description of your project.
- Web site & code site: blog, mailing list / forum, vcs, issue tracker,
- Social networking: Twitter, Facebook fan page, Linked-In group
- A product roadmap and a marketing roadmap listing the promotions you are planning.
Marketing your open source project doesn't have to be hard, or expensive. It just takes a bit of resourcefulness and passion. Most importantly, be patient. It will take time to build up your developer audience. Keep at it and they will come. Good luck with all of your projects!
posted Thu, 05 Aug 2010 20:21:35 +0000
20th century advertising has taught us to associate quality artwork and polish with quality products. Given two apps that do the same thing, a potential customer will pick the one that looks and feels better. This means every great app needs great art. Since most developers aren't artists or designers by trade, I've assembled a list of resources that can help. Here are icons, fonts, sounds, color schemes, and other great art assets to help you make your app stand out from the crowd.
Good use of color can really make your app stand out, but color can be tricky. The best color schemes often come from other people or real world objects. These sites have collections of color schemes created by people who work with color every day. They let you search by color, theme, and popularity.
COLOURlovers is a creative community where people from around the world create and share colors, palettes and patterns, discuss the latest trends and explore colorful articles... All in the spirit of love. (yes, they wrote that part)
Kuler at Adobe is a Flash based color searching site.
For more on the topic of color see my Color 101 article.
Every great app needs great icons. Not only for the app itself but also within the application for buttons and indicators.
The great FXExperience blog has several free PNG icon collections that are generic and useful for lots of things. Most are small so they work well on mobile devices. Free icons for your JavaFX applications @ FX Experience
The Crystal Clear icon set by Everaldo is licensed under LGPL and includes icons for apps, actions, devices and mimetypes.
The Nuvola icon set contains 600 icons with a cute cartoon feel to them.
Icon sets for Gnome, under various licenses
Tango Icon Library: another very complete set of desktop icons.
Free Sound has a huge collection of user contributed effects, clips, and just plain weird sounds. Great for building sampled music and effects in your games
Jamendo is a music site containing only Creative Commons licensed works. The perfect place to find your next soundtrack.
Imagery & Textures
Lost Garden focuses on video game design. The author, Danc, has literally decades of experience in the field. You can easily lose hours reading through amazing essays on the site. Today, however, we are here for the free game graphics. Spanning both vector and bitmap, retro and modern styles, Lost Garden has game graphics for many uses
Open Graphic Design and Think Design blog
OpenGraphicDesign.com has tons of cool shapes and vector artwork. They are great as starting points in Illustrator
ThinkDesignBlog.com has free textures and vector shapes. Good for backgrounds and skinning. Plus tons of inspiration articles.
For photos your best source is images licensed under Creative Commons at Flickr. Conveniently they have a search option for just such photos.
Well Placed Pixels is a blog containing only one thing: screenshots of beautiful software.
posted Wed, 28 Apr 2010 23:08:50 +0000
Color 101Color is important. We see in color. Different colors make us feel different ways, or remember different things. Most companies take their colors very seriously. Coca-Cola red is trademarked color. Pantone has copyrighted their color sets. The Brits feel it necessary to add an extra letter to their colours. Color is powerful but also dangerous. One false step and your carefully crafted website could look like this. Okay, so maybe it won't be that bad, but your choice of color has a huge effect on your designs. Still, color doesn't have to be scary. In this article I'm going to cover the basics of color, how colors works from a physics and technical perspective, and some quick tips on choosing great colors. In a future article I'll come back and cover the emotional aspects of color, and how to integrate color with other elements of design. This article will definitely not be exhaustive. Many PhDs have been earned exploring the expansive topic of color. Fortunately we just need to know the basics to begin using well balanced colors.
The EyeThe first thing to remember is that color doesn't really exist. Color is simply the sensation in the brain caused by our eyes responding to different frequencies of light. You may have taken a physics class in high school where your teacher talked about the visible spectrum of light, which is the set of frequencies the human eye can see. You probably saw diagrams like this: the rainbow represents the visible spectrum of light Human eye response to light. Our human eyeballs contain three kinds of color receptors that each respond to different ranges of light. These three ranges roughly correspond to red, green, and blue frequencies of light, (though only roughly). It's this correspondence that makes the Red/Green/Blue (RGB) color model so convenient for electronic displays. By combining red, green and blue a monitor can simulate most colors in the visible spectrum. Note that this is only a rough correspondence. There are colors our eyes can see which monitors cannot reproduce, as well as colors screens can show that our eyes can't really see. However, it's close enough to work pretty well in practice. (see this Wikipedia article for more on color vision).
Subtractive and Additive Color ModelsIn order to represent color on a computer screen we need to have a model for color. There are roughly two kinds of color models: subtractive and additive. With subtractive the colors combine to equal black. Additive means the primary colors combine to equal white. Subtractive color is how objects in the real world reflect light (it is often called reflective color for this reason). If you shine a white light on a red ball you will see only the red because the ball's paint absorbs all of the frequencies of light other than red. The other colors have been subtracted from the white, leaving only red. Additive color is used whenever something generates light rather than reflecting it, such as the phosphors in a traditional CRT, or the LCD segments in a modern flatscreen display. Red, green and blue are added in various amounts to create different colors, ultimately adding up to white. In subtractive color the primaries are red, blue, and yellow, which you may remember from art class as a child. That's because paint is subtractive, (and why mixing all of the colors together resulted in a dark brown mush). In additive color the primary colors are red green and blue. This is the last I will discuss subtractive color, at least until we come back to printing technologies (which reflect light and are therefore subtractive). Additive color is used in virtually all interactive computer displays (the reflective electronic paper display made by eInk for Amazon's Kindle is a notable exception). Since at least 99% of my likely audience is working additive color displays, that's all I'll cover here.
Basic Additive Color ModelsSo that's it for theory of light. Now let's talk about how computers actually put colors on screen. If you've worked with computer graphics at all you are probably familiar with the RGB color model. In this model a color is described by equal parts red green and blue. Virtually all computer systems use this model internally because it fits the hardware well and can be easily represented with a 32bit integer, using 8 bits for each color plus another for transparency (called the alpha channel for historical reasons). You can think of RGB as a cube with the value of each axis coming from one of the three colors. RGB is the most efficient format for the modern computer to use but it may not be the best for you, the programmer, to use. There is another common color model which you are likely to run across. The RGB Color Cube
HSV / HSB Color ModelHue, Saturation and Value (HSV) is the color model you are most likely to run into. It is sometimes called HSB, where the B stands for brightness instead of value. This model works hand in hand with the RGB color model, giving you a new way to specify colors which can then be converted into RGB for display. Think of HSV as a cylinder where the hue is an angle (0 to 360) representing the pure color (red, magenta, yellow, etc). The distance to the center is the saturation going from the pure color (1.0 == fully saturated) to white (0.0 == no saturation). The height within the cylinder represents the value or brightness of the color, going from completely bright (1.0) to no brightness (black, 0.0). The HSV Color Cylinder There is also a related color model HSL/HSI where the third component is lightness or intensity. HSL is similar to HSV except that saturation and brightness are arranged differently, represented as a double cone with the pure colors at the center. In practice all of the various computer color models convert into RGB for display, so which one you use is largely a matter of convenience for the particular task you are doing. That's enough theory for today. Here are a few quick tips that will help you pick and use color in your software designs.
Steal Someone Else's ColorsThe easiest way to pick colors is to let someone else do it. Go to one of these sites and search for something which matches your needs. For example, if I'm working on a design that feels like harvest or fall colors I could search for 'autumn'. ColourLovers.com search for 'autumn' Kuler.adobe.com search for 'autumn'
Steal Some*thing* Else's ColorsPick colors from some existing source, such as a photo or object that you think is pretty. For example, Ken Orr and Kathryn Huxtable started building a very nice Swing theme based on a photo of sea glass. If something looks pretty then it probably already has a good balanced color scheme; so steal it!
Sea Glass look and feel DeGraeve.com has a simple webapp which will turn a photo into a color palette. I used it to on the photo below to create a nice tropical sea palette. Color palette produced by DeGraeve.com
Pick a Color and Change One ThingMonochromatic designs are easy to do and usually look good. Take one color and change one thing, such as its brightness or saturation. This is especially good for creating gradients. That's all for this week. Please let me know if there are any particular topics you'd like me to cover.
posted Sun, 25 Oct 2009 21:57:58 +0000
Typeface vs FontFirst things first: typefaces versus fonts. A typeface, also called a font family, is a set of fonts designed with a stylistic unity, each comprising a coordinate set of glyphs. (wikipedia.org). A font is a complete character set of a typeface at a particular size, weight, and style. In software engineering terms you can think of a typeface as a class and the font as an instance of that class with a particular configuration. The exact meaning of typeface and font have changed subtly over the years as the technology has shifted from mechanical type to computer-set type to purely digital type. Originally fonts from the same typeface were literally different boxes full of chunks of metal shaping each letter at a given size. These days we have scaleable font technology so different sizes, weights and styles can be generated algorithmically or the multiple forms can distributed in a single physical file. Thus font and typeface have somewhat merged, and today you can safely refer to a typeface as a 'font' in general usage, and only use the more precise terminology when referring to particular instances of that font (or when talking to ornery typographers).
Anatomy of a Font
WeightThe weight of a font is the thickness of the lines that make up the letter forms. Since this thickness is relative to the size of the letters we refer to these as their weight. You are probably most familiar with bold vs regular, but some fonts have as many as nine weights from thin and light up to bold, heavy, and black. The True Type font format specifies weights on a scale from 100 to 900. CSS can use words or scale numbers to specify the weight. Helvetica (wikipedia.org)
Style: AKA Slope, Italic & ObliqueWe usually think of the slope of a font as italic or normal but, as with everything in typography, there's more subtlety to it. Italic text really means text which is drawn differently to indicate it is emphasized and should stand out in some way. Italic text can be programmatically generated by leaning the text to the right, called oblique text. Some fonts include a true italics form which actually draws the letters with different shapes. Fancier fonts may lower the fs, adjust the roundness of letters, or lean to the left instead of the right (depending on the language). roman, italic, and oblique (wikipedia.org)
WidthSome fonts have wider and narrower versions of the letterforms. The terms for these versions vary by font maker, but will often be called things like condensed and expanded. These fonts adjust the horizontal width of the letters themselves.
LeadingLeading (pronounced like treading or fed-ing) is the spacing between lines of text. Back in the metal typesetting days they used strips of metal lead to separate lines, which is where the name comes from.
Kerning & TrackingKerning and Tracking (wikipedia.org) Kerning and Tracking are adjustments to the spaces between letters of a proportional font. With tracking the extra space uniformly applied to all letters. With kerning the extra space allocated by letter pairs. This means that certain pairs of letters will have more or less space than other pairs, resulting in a more pleasing look. In some cases letters may vertically overlap to make them look better. Kerning values are very hard to generate algorithmically because it depends on the how the letter forms visually look to the human eye. For this reason well kerned fonts are created by hand by a font expert, and are therefore more expensive. The results can be well worth it, however, because the badly kerned fonts result in keming. Also available as a T-shirt. Keming, from Ironic Sans.
Font MetricsThe actual letter forms have a specific vertical anatomy based on how we measure them. Together these measurements are the font's metrics. We use these measurements to decide how to put letters together to form words, lines, and paragraphs of text. Font Metrics (wikipedia.org) Of the various measurements in this diagram the most important is baseline. The human eye finds baseline aligned text very pleasing, and will notice the tiniest imperfections in this alignment. In GUI software it is important to align UI controls containing text (which is most of the standard controls) along the baseline of the text rather than the visual bounds of the actual control. For example, a button should be aligned with the text inside the button rather than the rectangular edges of the button itself. It may seem like a small detail but it makes a big difference. I once spent a year fixing bugs in the Windows Look and Feel for Swing, and the most visible bugs were vertical alignment issues. Yes, I spent a year of my life turning this: into this All in all, I still think it was a year well spent :)
Odds and Ends
- Small capitals, aka: smallcaps, is simply smaller forms of the capital letters. Usually these smallcaps have the same height as the lowercase letters of the normal font. Smallcaps may be included in a font or generated algorithmically by shrinking the regular capital letters.
- Dropcaps or Initials: special forms of the intial letter in a paragraph or chapter. They are often much larger than the regular text on the page and will 'drop down' into the lower lines.
- Logical font: a font which doesn't actually exist, but will be replaced with a real font at runtime. For example, in webpage you can use the font 'sans-serif'. There is no real font named 'sans-serif', but the webbrowser will pick the user's preferred sans serif font and substitute it at runtime.
Categories of FontsIn Roman languages (languages which use the 26 letters of the Roman alphabet plus various accent and punctuation marks) there are five major categories of fonts.
SerifSerif letters drawn with features at the ends of their strokes. The serifs are the little feet we see in fonts like Times. These are some of the oldest type designs. The feet along the baseline help guide the eye from left to right, making them very 'readable' fonts. Serif Font
Sans SerifSans Serif (french for "without serifs") are letters drawn with straighter lines and no feet. Their larger letterforms make them very legible, but can cause greater eye strain when used in long runs of text. Helvetica is considered the quintessential sans serif font. Sans-serif Font
ScriptScript fonts imitate hand written letter forms. They are much harder to read than serif and sans serif fonts, and should never be used for body text.
OrnamentalOrnamental fonts are highly decorative and tend to work only at larger type sizes. They are often called 'display' fonts. They should never be used for body text (I'm looking at you, Comic Sans!). Type set in Baby Kruffy
MonospaceMonospace fonts have letterforms that are exactly the same width, or are at least equally spaced. These come from the days of typewriters and old computers that could only move fixed distances. The are rarely used today except when the vertical alignment of columns matters. Examples include code editors and laying out tabulated data.
Text PlacementMost of our type terminology in software comes from the world of newspapers. In practice we have three major kinds of text when building webpages and software: body, header, and navigation.
- Body: this is the bulk of your text organized into paragraphs. It is usually smaller than the other text and should use a simpler font that looks good at smaller sizes.
- Header: this text in short runs (usually a single line or less) that must stand out. Headers usually appear at the top of a page or paragraph indicating that the reader should move their eyes here to begin reading something. Headers also look good with serif and sans serif fonts, but you have more freedom because the text is typically larger.
- Navigation: this text is very short and is usually at the top or sides of the page or screen. It indicates the structure of the entire work, such as newspaper sections or different pages in a site. It should also indicate to the user how to navigate to that section. In a newspaper you would use page & section numbers. For software the text would be rendered as something clickable (a button, an underlined link, a hover effect etc.).
Use the right font for the sizeNot all fonts look good at all sizes. Some really shine at small sizes, others at large ones. Use the right font for your size. At smaller sizes you want fonts which are simpler and easier to read such as the basic serif and sans serif fonts. Try Arial, Helvetica, Times, Verdana, and Georgia. They are installed on virtually all computers and were designed to look good on screen at smaller sizes.
Use different font categories for different parts of textUse a sans serif font for the header and a serif font for the body, or vice versa. It creates a contrast without banging you over the head with it.
Use truly crazy fonts only for top headersUse the cool and crazy fonts only for the top most headers. In the example below I used a font meant to evoke mid-century Tiki-culture, with a funky light effect to suggest it's alcoholic origins. I only used this font in one place: the top most header of the page. Everything else is done with Helvetica; a standard sans-serif font. Home page of Project MaiTai Use restraint. Pick one crazy font to use for your whole site or application and use it sparingly. If everything is different then nothing is. You can use a fancy font (somewhere between the plain boring fonts of body and crazy fonts of only top most headers) for headers within the page. And use one of the plain boring fonts for body text. Leave the crazy fonts just for the top most header.
Use color and style to create contrastUse color changes or capitalization style instead of fonts to contrast between the headers, body, and navigation. For example, in recent versions of iTunes the headers in the sidebar are all capitalized and in a slightly lighter color with a hint of etching. iTunes 9
Bundle a font in your appFor the body text I still recommend sticking with one of the standards, but for your header font you can choose something a bit more distinctive. Here are some great places to get cheap or free fonts.
Avoid Cool FontsDon't use cool / cute / themed fonts unless the subject matter really warrants it. Your website on technology trends really shouldn't use a cutesy bubble font unless you are really targeting the tween market. Sniglet
Just the beginningTypography is an incredibly large topic. What I've covered here is just the beginning. In the future I'll cover text as part of the overall design and dive into the grid system. If you'd like to read more on typography, here are a few good resources: 20 Do's and Don'ts of web typography.
posted Thu, 03 Dec 2009 01:57:16 +0000