Fancy Fonts Your Users Can Still Read

January 23rd, 2012 by , in Monday in the HTMLab
Tags: , , ,

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?

  1. A site’s logo should be easily read and understood
  2. Content and navigation should be easily distinguished
  3. 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 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


Witches’ Magic


Jinx


Lounge Bait


Skinny Jeans

Groovy Fonts


Finesse (has been shrunk slightly to fit)


Delusion


Rollergirls


Keep On Truckin’


Neon 80s

Curly Fonts


One Starry Night


Seasons Spring


Boingo


Daisy Mae (has been shrunk slightly to fit)


Dirty Lady

Barely-There Fonts


Awakening


White Tie Affair (has been shrunk slightly to fit)


Seraphim (has been shrunk slightly to fit)


Dhe Mysterious


Fluid Light

Retro Fonts


Odalisque (has been shrunk slightly to fit)


Chocolate Box


Galeria Coruna 2008


Bellerose


Stripes Caps (has been shrunk to fit)

Odd Fonts


Ground Round (has been shrunk to fit)


Angelic War


Where Is The Rest?


Inflammable Age


Botanic

comments (2)

Christmas Glassics: Monday in the HTMLab

December 26th, 2011 by , in Monday in the HTMLab
Tags: , ,

As we all rush to complete after-Christmas sales and recover from the holidays, here’s a review of the web design posts I’ve done since early July 2011–taken together, this is the Winter 2011 edition of “Glassics”, or “Crooked Glasses Classics.” At a glance, you can see many of the older posts I’ve done; if you missed one, it’s linked here!

The reason I’m doing this is because I want to let people know about some of the older posts, as well as aggregate a lot of the content together for people to peruse more easily. (I’m also recovering from the holidays, but that’s another story. :P )

And don’t forget, if you’re interested in web design posts before July 2011, my first Glassics post covers those. :)

Graphically Speaking: Visual Web Design Posts

Since July, I’ve done articles on the importance of choosing the right color schemes, wondering where web animations got to, the web trend of using more visuals than text, and styling your links. I also compiled a list of my top 10 web design pet peeves, as much to remind myself not to offend my own style as anything. :P

Other of my posts, covering the use of position: fixed and CSS shadows, have appeared here, as well, alongside a historical tutorial on 1×1 pixel transparent images, called “shims”. And as part of my “teaching by analogy” style of writing posts, I also did posts on dressing your page like you’re putting together an outfit and using music to inspire layout designs.

The “Backend”: Web Development

This time around, in terms of web development topics, I took time to discuss debugging your site, using RSS feeds, making sitemaps, and when to use WordPress Pages versus WordPress Posts. I also looked at how to organize one’s digital content on a larger website, and how to make web pages load faster.

Webmastering Tricks from the Trial-and-Error Brigade

Based on my own hard-won knowledge and interaction with the web design trade over the last several years, I came up with articles about why it’s the length, not number, of hits that really matter, link-hopping to find affiliates, and why it’s important to back up all your site files.

Other tricks I discussed: affiliating with other like sites to help get traffic to your site, and using web trends to help inform and inspire your own designs.

Creating Content to Make Your Site Worthwhile

For this Glassics review, I wrote about researching your articles and blog posts to make them worth reading, why a multi-topic blog can work, and how to write an informative and professional “About Me” page.

Read and Enjoy!

I hope you’ll take time to look through these older articles and enjoy them–maybe even gain a bit of knowledge about web design on the way, too. I’d be glad to hear from you about how these articles have helped, or if you have a suggestion to make these posts even better.

no comments

Top 10 Web Design Pet Peeves

December 19th, 2011 by , in Monday in the HTMLab
Tags: , , ,

As a designer of web pages, I admit that I sometimes lose track of HOW a page should work in the pursuit of design innovation, and I’ve spoken before about how web design affects the user on a more abstract level. But as a user of pages, I find myself very sensitive to those page details that just drive me nuts when I have to work with them.

If we as designers want to make great pages, we first have to be aware of our own design pet peeves when we visit sites. The more aware we are, the more likely we are to fix them whenever they pop up (and the more likely we’ll have repeat visitors!).

Here is my list of top 10 web design pet peeves–and yes, I have offended some of my own rules over the years. (Don’t forget to read the addendum at the bottom; there’s a blog post idea for fellow web designers!)

Garish, Overly-Bright Colors

I don’t mind a little shot of bright teal or light yellow to showcase a new addition or featured content. But when the whole page is bright orange and electric purple, eye-searing green and migraine-inducing yellow, my eyes go boggly trying to even look at the page, much less try to read and understand it. When designing our pages, well-thought-out color schemes and page styles are very, very important.

Have I Ever Broken This Rule? – Yes, sadly, with one of my first gaming sites back in 2004. Bright red background got a lot of complaints from visitors… :/

Background Color and Text Color Too Similar

Dark blue background + very slightly lighter blue text = I don’t come back to your site because I can’t see the content. Yes, I know, CSS and hexadecimal codes are fun to play with, but text contrast is REALLY important, otherwise no one will visit your site because it looks empty or too hard to read. You don’t need complete “black and white,” but make sure your colors are fairly opposite each other on the brightness scale.

Have I Ever Broken This Rule? – Not to my knowledge; I usually use a wide background/text color contrast, like the white background and deep teal text on this blog.

Misaligned or Overflowing Text

Drives me nuts to see a divided layer not doing its job, letting a line of text flow unbounded across the screen (and even way off to the side, making me scroll horizontally). Not only does it make it 10x harder to concentrate on the meaning of the text, it usually pushes other page elements out of the way, making the page look disorganized and amateurish.

Have I Ever Broken This Rule? – Yes, because I was a newb in 2003 and didn’t know any better…note to self: huge divs without ending tags do not equal awesome layout automatically.

Button or Text that LOOKS Clickable, But Isn’t

Underlined text? Yep. Decorations on a sidebar that look suspiciously like navigation buttons or submit buttons? Yep. If you want to thoroughly confuse your users, this is the tactic you want to adopt, making ordinary body text look like links or buttons look like menus waiting to be opened. Of course, if you want to keep visitors, you’ll stay away from these oopsies, otherwise your users will not return.

Have I Ever Broken This Rule? – Yes, on one of my early, early self-run blogs–I used underlines as purely an emphasis mark rather than just for links. People kept wondering why all my links in my posts were broken. Sad. XD

Menus that Completely Cover Up Content/Won’t Go Away

Several news sites do this with drop-down menus–either the menus are so huge that they cover up a whole lot of content, or they won’t fade away after you’ve clicked on a page title/category. The worst offenders are the ones who both cover up content and won’t be put away. I spend much of my time on the page wrestling with the designer’s conviction that menus are to be SEEN and the content is much less important.

Have I Ever Broken This Rule? – Nope, ’cause I don’t use menus that go across the top of the page if I can help it. (That’s how much I hate this design trend. LOL)

Popup Surveys that Keep Coming Up with Every Page Load

“For the last time, I’m not interested in leaving my [expletive] comments! Dang, take a hint!” –This is what I usually end up thinking when a popup survey (or any popup, really) keeps loading no matter how many times I close it. Every time I navigate to a new page on a site that uses this survey style, the whole page is grayed out except for the annoying little box which I’ve seen many times over. We can really, really irritate our users with these kind of tactics; no user’s comments are worth driving them away from the site!

Have I Ever Broken This Rule? – Nope, because I don’t use popup feedback surveys.

Info Overload

Whether it’s tons of little content boxes or multiple sidebars, when there is simply too much information on a page, my mind scatters and dashes itself against the wall of info on the screen. I just can’t concentrate on any one object without being distracted by other content, and I’m sure I’m not the only user who has felt that way. (Many news and entertainment sites use this kind of layout design, and it bugs me, not to mention makes me feel like I’ve got a sudden onset of adult A.D.D.)

Have I Ever Broken This Rule? – Yes, with one of my first CSS layouts–I did three columns, but I filled the two side columns with a WHOLE BUNCH of text, which kinda overflowed into the middle column because there wasn’t enough padding and margin space.

Flashing Graphics/Animations, Including Ads

When a graphic on the sidebar is flashing rapidly between several different colors, I’m more likely to ignore it as a spammy ad. And I know I’m not alone in that. Animated ads are not usually controllable by those who use them on their pages, but we can do something to make them a little less obtrusive into the design, like not putting them directly beside our content where they will distract users. But we can control what types of web animations we use, if any at all.

Also, more importantly, flashing graphics of any sort can trigger those who are Photo-Sensitive Epileptic, or PSE, to have a seizure. I didn’t know about this until I began dating my wonderful boyfriend, who has epilepsy easily triggered by stuff like strobe lights, and he mentioned how sometimes even flashing web graphics mess with his eyes.

Have I Ever Broken This Rule? – …*hides in shame from all the flashing animated web graphics I did in my newbie days*

Itty Bitty Body Text

Size 8 font is never appropriate for main body text, mmkay? We as web designers should not be holding contests to see which user’s eyes are better than everyone else’s. If we want people to read the content we have so lovingly crafted, we have to make it readable. I’ve spoken about this issue before in context with site bugs, but it’s worth repeating here, since text size is a major bone of contention with me.

Have I Ever Broken This Rule? – Nope, because I like not straining my eyes when I’m proofreading my content.

Sneaky Layout and Navigation Changes that Change the Way Users Access the Site

How many times have I heard my boyfriend’s mother express frustration over paying bills online, mainly because the webmaster of a site thought it would be cool to move the “Customer Login” page to a completely new navigation area, or completely eliminate it altogether? (Seriously, I spent 45 minutes trying to find the “Pay Bills” page on one of the websites she was needing help with, and to this day, I have no idea where they moved the page. I’m guessing they ended up with a lot of late payments!)

When we make big layout changes to our website, especially if we’ve got a large customer or user base, we need to make sure of one of the following things:

  • We keep to the same basic content organization and presentation, so that things are generally where users remember them being;
  • We tell the users explicitly WHAT has changed, WHERE new pages and content have moved, etc.

Doing one of the above will help users dramatically when we decide to change our site’s look and feel!

Have I Ever Broken This Rule? – YEP :C Forgot to tell my users where I moved one of the basic tutorials on my City of Heroes site, which led to some user frustration.

Addendum for Fellow Web Designers

Make your own list of your top 10 web design peeves, and see if your designs offend your own list…you might be surprised like I was!

no comments

The Shadowy Side of CSS

December 12th, 2011 by , in Monday in the HTMLab
Tags: , , ,

For years, when webdesigners wanted to do shadowed effects with text or content boxes, they had to do so through the use of images. Either the text had to be saved in an image format, having been edited with an image program to make the text shadowed, or the content box had to be created with several slices of images to create the illusion of a whole box with a shadow slightly behind it. There were usually a good number of invisible tables behind the scenes setting up all these images so that the text and/or content boxes looked “natural” on the page, too. It was all a very convoluted process.

But thanks to the advent of CSS3 (and its wider browser support), we webdesigners can now add a little bit of shadow to our text and to our content boxes, with the box-shadow and text-shadow properties!

Shading Content Boxes with Box-Shadow

Any divided layer ID or class you create can have a box-shadow property added to it. Say, if I wanted to give a little pop of slightly-blurred gray shadow to my sidebar boxes, I could add something like this to the CSS class:

.sidebar {box-shadow: 5px 5px 5px #CCCCCC;}

What this means to the browser is: “I want a shadow that is positioned 5px to the right and 5px below this sidebar class, wherever it appears. I want that shadow to be blurred just around the edges (about 5 pixels around the edge). And I want the color to be #CCCCCC, or medium gray.”

Now, shadows don’t have to be gray or black, or even neutral colors. You can edit them to be any color, positioned as far away or as close to your content box as possible, and blurred/spread out as far as you like.

.sidebar {box-shadow: 30px 30px 5px 5px #0000FF;}

This shadow is positioned 30px to the right and 30px below the box it’s shading; it’s also bright, bright default-web-color blue. Another measurement is the “spread” of the shadow, how far it seems to be blended out into the background color of the website. The spread is the fourth pixel measurement (the second “5px” item). In this case, the shadow is blurred within itself 5px, and is blurred outward 5 more pixels.

You can choose any color shading and any size of shadow–experiment with this and see what you’d like to try with it. I’d also suggest visiting W3Schools’ Box-Shadow sandbox, where you can see different values and properties played out before your eyes. It’s a great way to see what you’d like for your design without having to hand-code it all first.

A Word about Browser Compatibility: Other Methods of Box-Shadow

For most new browsers, the above method (box-shadow) should work. However, if you want to completely cover your bases when it comes to browser compatibility, you’ll want to add the following lines of code to your shadowed box’s CSS id or class:

-webkit-box-shadow: (horizontal measurement) (vertical measurement) COLOR CODE;
-moz-box-shadow: (horizontal measurement) (vertical measurement) COLOR CODE;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=Hexadecimal Code Of Your Choice, offX=Horizontal measurement, offY=Vertical Measurement, positive=true);

Many thanks to DynamicDrive.com for explaining this!

These three items are coded in very similar ways to the box-shadow property, but they are understandable to browsers requiring these specialized CSS codes. You’ll just need to make sure that you’re adding in the same pixel measurements and color codes as your box-shadow property, and you’ll be all set.

Making Text Pretty with Text-Shadow

At last, at last! I found a way to make my text shadowed without having to open Photoshop. My webdesigning soul is content. :)

Adding this property to any CSS (whether you’re stipulating body text, classes or ids of text) will make your text shadowed. For instance, I could make headings on my blog stand out a bit by doing the following code, making them shadowed with light gray just a bit below and to the right:

.heading {text-shadow: 1px 1px #EEEEEE;}

This would give me a very sharp light gray shadow, just to the right and just below my text. If, instead, I wanted a more diffuse text shadow, I could add the “blur” pixel measurement to my text-shadow property:

.heading {text-shadow: 1px 1px 10px #EEEEEE;}

The “10px” measurement in this example is how much the shadow is blurred beneath the text, and in this case 10px creates a very vague, misty appearance of any color underneath the text.

If you want to see more examples of text-shadow’s basic abilities, I like the W3Schools.com’s Text-Shadow Sandbox. Also, if you want to see some really crazy, funky effects that just a little finagling with text-shadow can create, I would suggest Zachstronaut’s article on text-shadow–you can do some awesome architectural, animation-like looks with just a few lines of code!

Alert: Internet Explorer Thinks Text-Shadow Has Cooties

As of this writing, Internet Explorer does not support text-shadow at all. Party poopers. (Just because Firefox got invited to the prom and IE didn’t… LOL). If you want text shadows to show up in IE, there are several fixes available across the web–these are some of the best and most understandable:

Full CSS3 Text Shadows–Even in IE (detailed, image- and example-filled, and BEAUTIFUL–requires a downloaded script, though)
Text-Shadow @ HowToCreate (simple tutorial taking you through several different steps of adding text-shadow)
CSS3 Text Shadow in IE @ ImpressiveWebs (how browsers compare in displaying shadows; using filter: glow for IE-only shadows)
IE Text Shadows @ WhatTheHeadSaid (CSS-heavy explanation of how to hack in text shadows for IE)

When Should I Even USE Shadows in CSS?

Shadows on a webpage are like makeup on a woman: just enough enhances natural beauty, but too much detracts from natural beauty.

To avoid your page looking like it’s been attacked and left bruised, only put shadows on special parts of your page. A lovely text-shadow on the main logo of your page, for instance, can look classy; adding a shadow underneath your “Latest Updates” box can help it “pop out” from the page enough to be noticed. You can also add shadows underneath every big heading on your page, or beneath featured images to help them look a little more 3-D.

Also, do not depend on text-shadows and box-shadows to make your page intelligible. White text on a light-gray background, no matter how shadowed you make the text, is still going to be illegible to most readers. By the same token, don’t make shadows and glow effects so bright behind the text that readers can’t focus on the text. Both of these mistakes will send your readers running for the hills. (And don’t let box shadows trail down on top of text below them…very annoying to try to read through!)

Use shadows as a lightly-placed accent, in other words, and your site will look great.

Summary

Shadows, when used as accents on your webpage, can provide some wonderful image-like effects without ever having to set foot in Photoshop or any other image-editing program. Try them out for your site, experiment with how they look, and see what elements on your page you’d like to shadow!

comment (1)

Keeping Up with the Webmasters

September 12th, 2011 by , in Monday in the HTMLab
Tags: , , , , ,

keepingupwithwebmasters
Just like clothing fashions, web fashions go in and out of style, even within a year. I remember when transparent iframes and HTML tables were all the rage back in the mid-2000s, for instance. Today’s super-sleek, Apple-Corporation-like webdesigns are on trend for the moment, but they may fall by the wayside soon. And, when they do fall out of fashion, most of us webdesigners will feel the pressure to “move with the times.”

I say, however, that we don’t necessarily have to throw out all of our “old” design practices with every new trend that comes along. Instead of “keeping up with the Joneses” (or the webmasters), how about some “timeless Internet fashion” blended in with new trends?

Timeless Webdesign Tip #1: Create a Design that’s Easy to Use

Whatever content you have, whether it’s text article, photos, videos, sound clips, etc., make sure your site is easy to read and browse:

A site that’s easy to look at and use is a site that will please visitors. Think about what you like to see when you visit a site–this will help you get the design process started.

Timeless Webdesign Tip #2: Keep your Site Organized

Group your pages together logically in your navigation structure, and create a sitemap for larger sites. You can also put in breadcrumb navigation if you have lots of subsections.

Having an organized site makes it easier for your visitors to find what they’re looking for on your site, which means they will more likely return for another visit. And isn’t that what all us webdesigners want?

Timeless Webdesign Tip #3: Interpret New Webdesign Trends for Yourself

Instead of copycatting what everyone else seems to be doing in webdesign, take time to study the new style, and figure out what you like about it. Use web trends as a way to inform and inspire your designs, not as a rigid rulebook for how you “ought to” make your sites look.

You might find, for instance, that you like that new color scheme everyone seems to be raving about, but you don’t like the layout it’s commonly used with. Instead of forcing yourself to use a layout you don’t like, just incorporate your most favorite parts of the color scheme into a layout of your own making. This keeps your site looking fresh and updated, without forcing it into a design cookie-cutter.

Summary

Since web trends are almost always changing, but there are definitely design concepts that never go out of style–and there are ways to personalize each trend for yourself as it comes along. After all, who wants to browse 10 different sites that all look the same? Help your site stand out with your own personal style!

no comments