Tag Archives: fonts

3 Little CSS Changes to Make Your Content Pop

April 14, 2014 Robin Leave a comment

It’s temptingly easy to get swept up in the visual/graphic part of a webdesign, and end up styling the content as what feels like an afterthought. But, as demonstrated in the following article, content styling is incredibly important–and the slightest changes can make a huge difference in whether your audience actually reads your content or not!

These 3 changes literally take less than a minute to implement, but they can radically improve your content design. Read on to find out!

Make Your Font A Little Bigger

CSS Rule: “font-size: 14px; font-family: “Arial”, sans-serif;”

CSS Rule: “font-size: 16px; font-family: “Arial”, sans-serif;”

The first and easiest change to make is to just enlarge your font, just a bit. This isn’t just for nearsighted people like me, either–bigger font simply looks easier to read for everyone. Even the change from 14px to 16px, as depicted above, can be enough to make words more distinct at a glance. Visually, it looks more appealing already–and visually appealing content means readable content, which means your site has an audience. Awesome!

Space Your Lines Out a Bit

CSS Rule: “font-size: 16px; font-family: “Arial”, sans-serif;”

CSS Rule: “font-size: 16px; font-family: “Arial”, sans-serif; line-height: 24px;”

Bigger font, however, looks even better when spaced apart a little bit more. Ever wondered why your teachers always asked for double-spaced papers? As a former teacher, I found out that my eyes boggle less when the text isn’t all scrunched together like it just went through a trash compactor (especially when grading dozens of student papers late at night). Your site visitors likely think the same–respect their eyes and give each line of text a good amount of space with the line-height property.

Use Subtle Color in Your Headings and Subheadings

CSS Rule (heading only): “font-size: 22px; font-family: “Arial”, sans-serif; color: #336699;”

Using font colors in a webpage doesn’t have to involve crazy-bright hues. Even just a little color in your headings and subheadings, slightly different from your body font color (like the deep blue alongside the black in the above image), can help visually separate your content out. For all types of readers, whether they gobble down words or savor each mental morsel, the heading and subheading color is another cue that the topic has changed and they need to pay attention. This helps your readers take in your content more easily and understand it quicker.

Summary

Styling your content, even with just the few simple changes outlined in this article, can be the difference your site needs to become widely read. After all, content is why sites exist–let’s make it as appealing as possible!

Monday in the HTMLab

Web-Safe Fonts: There are More than You Think!

January 13, 2014 Robin Leave a comment

When it comes to using fonts for my websites, I admit I’ve gone the “super-safe” route more often than not. In search of making my text readable on all devices, I end up using Arial, Garamond, Georgia, and Verdana…and that’s pretty much it, since I avoid Times New Roman like the default plague it is.

Imagine my surprise, then, when I learned that there are plenty of other web-safe fonts available–and even some which are friendly to multiple operating systems! Here’s how to make this work for your site:

Explore Which Fonts ARE Web-Safe

CSSFontStack is an excellent resource to begin searching for the web-safe fonts you want. It displays OS statistics on the most commonly-used web fonts, so you’re more aware of which OS (Mac or Windows) likely carries your chosen font. VERY handy!

See Which Mac and Windows Fonts are the Same

This Windows and Mac fonts list shows you which fonts are designed alike (for instance, Verdana and Geneva, Lucida Console and Monaco, Book Antiqua and Palatino). This will not only help you pick a good cross-platform web-safe font, but it will also help you choose fonts for your font stack in your CSS document (see next point!).

Build Your Font Stack Varied and Strong

As this W3Schools page shows, you can’t safely specify just one font name and be done with it–you must give the users’ browsers a range of fonts to choose from if one or more of the specified fonts is not natively installed. This range of font options is called a font stack, and will save your users from having to read your content in a really odd font.

See Examples of Font Stacks

Sitepoint’s “8 Definitive Font Stacks” article is a great jumping-off point for your sites, either to use directly or as a template for designing your own font stack. This will help you make your font choices as web-safe as possible!

Summary

Choosing fonts for your website content doesn’t have to be “same-old, same-old”–using these web resources can help you pick stylish yet standard choices for your design! (And now if you’ll excuse me, I’m off to select some new favorite fonts! :D)

Monday in the HTMLab

An Unexpected Font Resource: Pinterest

August 5, 2013 Robin Leave a comment

Most of the time, Pinterest is a happy mish-mash of clothing, wedding planning, gadgetry, home decor, and humor. But, as I recently discovered, there are also pinners sharing their favorite fonts–it’s a fairly well-hidden resource for not only the crafters and bloggers among us, but for us webdesigners, too!

Below is a selection of free fonts I’ve discovered through Pinterest thus far:

Font Download Links

Angel Tears
Bergamot Ornaments
Birmingham
Border Corners 2
Castro Script
Doris Day
Expansiva
Janda Stylish Script
Josefin Slab
Lavanderia
Monterey BT
Nevis Bold
Origin
Parisienne
Peoni Patterns
Petit Formal Script
Petita
PetuniaBounce
Print Clearly
Rainfall Black
St Marie
StateFace
Teen
Wendy Doodles
Znikomit

Want to find more fonts? Check out my Pinterest font board, “Fontalicious!”

Monday in the HTMLab

Stop Coding This Right Now, part 5: Informal Fonts for Business Sites

December 24, 2012 Robin Leave a comment

Choosing which font to use for your website’s graphics seems like such a small concern, especially in the light of all the other parts of building a website. For business websites, the font concern can seem even less important–there are so many other choices to make, like hosting, bandwidth, site colors, etc., that seem much more pressing. But even if your content is wonderful, your images superb, and your networking beyond compare, your site will still suffer if its font choices look less than professional.

What do I mean by “less than professional” font choices? Anything that looks informal, more like printing or cursive handwriting than typed text–like the following:

Comic Sans has gotten most of the bad press for being a rather overused and ill-advised font, but there are other fonts out there that are not good choices for business sites.

I’m not saying that these fonts are all-around bad–not at all! Tempus Sans ITC is one of my favorite fonts to use, for instance. But I use it for personal design and web projects only. It and other “handwriting” fonts give the right touch of personality and humanity to small personal sites; for a business website, however, it makes the business’ Web presence seem less polished and “finished”.

It’s like getting dressed for a job interview. If I went to an interview wearing my best blouse, but paired it with torn jeans, I wouldn’t be likely to get the job–torn jeans are more appropriate for casual events. The same goes for fonts; handwriting fonts are more appropriate for casual or personal webpages.

Look at the following example, using Kristen ITC for the top font and Palatino Linotype for the bottom font. With both fonts in similar sizes, styled with the same color and drop shadow, which font looks more professional and polished? Which site would you instinctively trust more to give you accurate information in a timely manner?

Fonts silently tell your visitors more about your content and your businesslike personality–for better or for worse. When you’re designing a page for a business, you want to make sure your website is putting its best foot forward, and fonts are a surprisingly important part of that. (This is one reason I’m looking at redesigning Crooked Glasses’ own look soon–I want to make sure I’m following my own advice!)

Monday in the HTMLab

Make Yourself a (Font) Map

August 27, 2012 Robin Leave a comment

As webdesigners, we make use of hundreds (and possibly thousands) of different fonts every year, choosing just the right text ook for each of our layouts, small graphics, headers, and other projects. Symbol fonts, especially, have become very popular as a way to design matching social media icons, as well as general site commands (like Refresh).

However, if you’re working with many different symbol fonts, it can be difficult to remember which symbol occurs on which key when you’re using a particular font. Or, you may want a particular symbol and can’t remember which font has it. Fruitless searching follows, usually with a little (or a lot) of frustration included.

That is, unless you create something I like to call a “font map.”

What IS a Font Map?

This is an example of the font maps I’ve created for myself–this one corresponds to the Wingdings font, which is default on most Windows computers. The top group of four rows contains all the symbols that can be created with lowercase keys; the bottom group is all the symbols that are created by hitting Shift and a key.

How Do You Make a Font Map of Your Own?

You will need an image creation program–I use Photoshop, but even Microsoft Paint can do it (as I discovered while writing up this blog post!).

Open a new blank image in your image creation program.
Select the Text tool, and place a text box or text cursor onto your image.
Type out all of the generally available keys on your keyboard, like I’ve demonstrated below:
`1234567890-=
qwertyuiop[]\
asdfghjkl;’
zxcvbnm,./

~!@#$%^&*()_+
QWERTYUIOP{}|
ASDFGHJKL:”
ZXCVBNM<>?
Select all the text you just typed/copy-pasted, and change the font to the symbol font you want to map out. Make sure the font size is big enough for you to read easily!
Presto! A new font map! (If you want to, you can label the two different groups as I have done, and put the title of the font on the image, too. Just makes using your new font map a little easier.)

Does This Really Help? You Better Believe It!

I’ve been using font maps successfully in web design for several years now–it’s a real time-saver, meaning less minutes wasted typing and backspacing on my image till I find the right symbol. In seconds, I can flip through all my font maps, find the symbol I’m looking for, and be on my way to a finished design.

Try making one for yourself, and see how much easier it is to use the various symbol fonts in your designs. You’ll thank yourself later!

Monday in the HTMLab

Font Series Wrapup: Fonts You Need for Your Toolbox

February 20, 2012 Robin 1 Comment

As an ending to this series of font-tastic posts, I am recapping some of the best fonts I discovered while doing font research. The five I have chosen for today’s post are, in my opinion, the most usable and easily-read of all the fonts in each category I wrote about (fancy fonts, sans-serif/serif body fonts, bitmap fonts, and symbol fonts). I hope you find them as useful and awesome as I have–I’ve already downloaded them all for use in my future designs!

(By the way, I provide links back to the articles I wrote for each category, so it’s easy to check through the articles and see if you agree with my picks. 😀 )

Best Fonts from This Article Series

Best Bitmap Font:

Ernest
Why? Because it provides the smallest and yet most readable text for itty-bitty graphics. I’ve long used it for link buttons, but it has a variety of uses around a website.

Best Symbol Font:

CD-Icons
Why? Because it has a ton of symbols–even symbols for special characters, like accented E’s, etc. It literally has a symbol for every character you can think of, and they are all useful in an icon-based design.

Best Fancy Font:

Dhe Mysterious
Why? Because it has a well-defined character set, and yet it has a beautiful wispy quality to it too…strong but soft. Great for titles and headings, but not too bold.

Best Sans-Serif Body Font:

Alido
Why? Because it’s not Arial, Verdana, or Helvetica, but it is still legible–it’s different without being tiring on the eyes after reading a page or two written in it.

Best Serif Body Font:

Timeless
Why? Graceful without being overpowering–and again, it looks different enough from Georgia, Garamond, and Times New Roman.

Summary

Fonts are, for me, one of the most important parts of web design, because a good font choice means that people can read your content (what they came for). Making a website beautiful AND easy to use/read is what webdesigners are all about, after all!

I hope that this font article series has helped you discover new fonts for your own site designs. It certainly has been fun for me to review all these different fonts (and find new favorites)!

Monday in the HTMLab

Leaving Letter Forms Behind: Symbol Fonts

February 13, 2012 Robin Leave a comment

Sometimes it’s just not feasible to make icons for every single thing you want to link to on your page. Yet, you want something different than just a text link; you want something more creative than just “Click here for [this content]”.

And it’s not just links, either. Often, you end up with a need for a small graphic, but you either don’t want to draw it out or you can’t draw it on the computer (like me controlling a laptop mouse–fail). What does one do when you want a cute little graphic that doesn’t require Photoshop to create?

ANSWER: Use a symbol font!

What IS A Symbol Font, Anyway?

A symbol font is any font that does not display the typical alphabet letters when you use it. The most common (and oldest) of these symbol fonts are the Wingdings series and the Webdings font, often included with many systems’ default fonts.

Well, Why Bother with Fonts that Have No Recognizable Letters?

Precisely for the webdesign opportunities it offers. Not only do you have ready-made, professional-looking icon designs, but you can also include your symbol font as part of your webpage using the @font-face CSS declaration. It saves you from having to create icons; instead, you can just type a letter and stipulate that it has to display in the symbol font. Instant icon!

And, if you want to dress up your icons a little more, you can always use the symbol font in your preferred image-creation program, masking, sizing, turning, and otherwise decorating the font to look like a traditional icon. Either way you go about it, symbol fonts provide icons and small graphics with more professional “pop.”

How Can You Use Symbol Fonts?

I find that symbol fonts used as icons are best at slightly larger font sizes, so that they are more visible and easier to click on. Too-small symbols can be frustrating for users, because it’s hard to tell what the symbol even IS at small sizes.

Also, symbol fonts need to be used with as sharp a color contrast as possible (i.e., white symbol on black background) so that all the symbols are easily visible.

What Kinds of Symbol Fonts Exist?

Literally everything you can imagine…including fonts with symbols and pictures that baffle the mind. (“Why would anybody make a font out of THAT?!”) What follows below is a fairly broad listing of some of the better symbol fonts out there.

The images are merely samples of each font–in each case, I tried to capture much of the range each font covers. Also, some of the symbol fonts in my examples, below, are sized smaller or larger than I like, due to the previews. Clicking on their links, however, will take you to the pages where you can see them in better quality, and see the entire character set.

Useful Icons and Signs

Cursor	FFF Extras
IconBit1	IconBit2
PepGenious10	PixArrows
BTD Cart-O-Grapher	The B.O.M.B. (Best of Magurno Brushes)
Symbolix	DNR Recreation Symbols
Spaider Simbol
CD Icons (not actually this huge normally)
WMSymbols

Little Faces and Emoticons

Skrewd Up Soulz	Spacy Stuff
SQCon	V5 Pixelpals

Decorative Designs

BitFuul	Rosette110621
Calligraphic Frames Soft Two (screenshot does not do it justice)	Picture Squares (screenshot does not do it justice)
Davy’s Dingbats 2	Gembats 2

Detailed Images

Suboel (Christmas/holiday theme)	Craft (Minecraft theme)
SL Mythological Silhouettes	Random Dingbats

(Fonts displayed in this section are from DaFont and Fontspace. Additional symbol fonts can be found at 1001Fonts.com.)

Summary

If you’re having trouble finding icons for what you want, try a symbol font–an easy and clean way to get icons without having to manage your own pixel-by-pixel design. For those of us who are not skilled in small designs (like me :P), symbol fonts can be a lovely way to dress up your page, whether used alone or within an image creation program.

Monday in the HTMLab

Itty-Bitty Bitmappy Fonts

February 6, 2012 Robin 2 Comments

Big, beautiful, fancy fonts are awesome for making huge first impressions on a user. They’re like wearing a bold-patterned coat or a brightly-colored dress–they instantly grab attention. But the itty-bitty details on a website design help “finish” the site, just like jewelry or shined shoes give an outfit a more polished and put-together look.

Today, we’ll be looking at several itty-bitty fonts, called “bitmap fonts,” that can help do all sorts of small decorative tasks around your website. Labeling link buttons, crafting social media graphics, doing copyright text or watermarks, and even making up parts of hovered navigation can all be done using one or more of the fonts I’ll cover today.

Bitmap fonts are generally best used at smaller sizes, so today’s previews will have two sizes of each font. The larger font is more to show you what the font looks like. Also, bitmap fonts are usually best used without anti-aliasing–the harder edge gives the bitmap font its shape.

With the exception of Baby Blocks, all fonts were tested with the text “crooked glasses” in lowercase letters.

Squarish & Space-Agey

Aansa	Bit 1 no custom preview available	Ernest
Hilogin	Micro N56

Small and Graceful

BF Mnemonik

Chixat 8

Venice Classic

Outlined/Shadowed Letters

Bit Out no custom preview available	Fipps	Half Life (un-outlined also available) no custom preview available
M04 Fatal Fury (un-outlined also available)

Fun, Blocky Effects

Baby Blocks
(blocks appear for capital letters only)

V5 Bloques

Summary

I find that bitmap fonts are some of the best little tools in my font toolbox. Where other fonts are illegible at small sizes, bitmap fonts are perfectly legible; where other fonts would be too busy or too elaborate, bitmap fonts are just decorative enough without struggling to read them.

But what do you think? Might there be a place on your site for a few itty-bitty fonts?

Monday in the HTMLab

Getting Your Body Font in Shape

January 30, 2012 Robin 1 Comment

Last week I covered fancy fonts, primarily used for headings, images, logos, and special text. But what about body fonts in web design, those used for all the rest of your text content?

With body fonts, I’ve always felt just a little stuck in a rut–a rut called “I can only use Arial, Verdana, Helvetica, Georgia,” etc. And I would be willing to say that many designers are wary of using specialized fonts in our body text. It’s one more thing for our users to download, and possibly one more thing that won’t display correctly.

But in fact, we now CAN use special fonts for our body text designs, using the @font-face declaration in our CSS. (More about how to use that here–this article from SixRevisions explains it so much better than I ever could.) Using @font-face is a way we can include slightly different body fonts that help brand our sites. Not only that, we can better match body fonts to our special fancy fonts–always a nice way to pull a site together!

As part of my own research for new fonts, I began hunting through DaFont again, looking for lovely sans-serif and serif fonts that were readable and basic enough for body text–i.e., nothing too hard on the eyes at small pixel sizes. I came up with the following list of body fonts that are just different enough. Check through this list of sans-serif and serif fonts, all chosen for legibility and coolness–download links are below each image.

Each font below is previewed with the text “crooked glasses” (all in lowercase), and the display size was set to “Tiny” on dafont.com.

12 “Just Different Enough” Sans-Serif Body Fonts

Ageone	Alido	Bird Cherry	Cuprum
Existence Light	Forgotten Futurist	Lintel	Myndraine
Passion Sans	Print Clearly	Susanna	Tin Birdhouse

12 “Just Different Enough” Serif Body Fonts

Angleterre Book	Berylium	Day Roman	Dualis Lite
Gentium	Happy Phantom	Just Old Fashion	Mary Jane
OldStyle	Sanford	Springsteel Serif	Timeless

Monday in the HTMLab

Fancy Fonts Your Users Can Still Read

January 23, 2012 Robin 3 Comments

Designing a beautiful layout is not just about choosing the right color/style or picking the most fitting image format. It’s also about choosing fonts that work well for your website’s topic (and are readable to users’ eyes).

To elaborate more about the important role of fonts in web design, I’m beginning a series on fonts this week, tackling the chief issue I have with modern fancy fonts: legibility. What’s the use of using a pretty or nifty font if no one can read what it says, after all?

Why Focus on Legibility?

A site’s logo should be easily read and understood
Content and navigation should be easily distinguished
Headings and subheadings should be emphasized, but not overdone

If we want users to stay on our sites and enjoy the text content we’ve written, we need to make it easy to read our sites. Thus, legible fancy fonts, fonts that are decorative and yet still readable, should be at the top of our design list.

Where ARE Some Fancy Legible Fonts?

After doing a thorough search on my favorite font resource, DaFont.com, I found five fonts each in several fancier categories that meet my criteria for legibility, which is the following:

Each letter is distinguishable from others
Not too thick
Not completely obscured by flourishes

Each font has been previewed using the text “crooked glasses” in lowercase letters, set to “medium” size. Some previews have had to be shrunk to fit in the content space.

Cartoony Fonts

Andrea Karime