h1

tiny fonts are best with Verdana

April 3, 2007

People loooove having small fonts on their websites. Have you seen this? I still don’t understand the trend, but it’s everywhere. Not only do they love having these super tiny fonts, but they pick the most dreadful fonts to go with.

I think people think that it looks all super cool and stylish. “Oh, look at me; bust out my super fine font, how vogue of me”. Cut the crap.

I’m not against having small fonts, they are good when used properly (legal stuff, footer links, etc). But come on, if the main content is written in these god awful sizes, you can’t read a damn thing.

There are sites that, for instance, are displaying code within their article. That’s cool, but why make the font so impossible to read? I’m sure you’ve seen this:

<script language=”javascript”>
function thisFontSucks(){
alert(“Please stop using these tiny fonts.\nDo it for the children.”);
}
</script>

Maybe it looks good with your resolution, but with mine at 1280×1024, it can be annoying. If your going to go with a small font on your website, go with Verdana. It’s simple, clean, and legible. Compare the following standard web fonts and you be the judge:

Arial: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam semper, diam vitae rhoncus eleifend, dui ligula consectetuer nunc, sed faucibus velit leo in magna. Suspendisse sed eros. Proin eu elit ut libero suscipit sollicitudin. Mauris eu dolor pellentesque orci lacinia dapibus. Phasellus tempus purus tincidunt sapien. Nulla vitae massa vel elit gravida scelerisque. Integer nec sem. Vestibulum aliquam nunc vel nisl. In lacus libero, pharetra sed, volutpat vitae, ultricies et, velit. Suspendisse luctus ultricies augue. Curabitur imperdiet nisi vel neque. Nunc vel nisi. Donec hendrerit porttitor tortor.

Times New Roman: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam semper, diam vitae rhoncus eleifend, dui ligula consectetuer nunc, sed faucibus velit leo in magna. Suspendisse sed eros. Proin eu elit ut libero suscipit sollicitudin. Mauris eu dolor pellentesque orci lacinia dapibus. Phasellus tempus purus tincidunt sapien. Nulla vitae massa vel elit gravida scelerisque. Integer nec sem. Vestibulum aliquam nunc vel nisl. In lacus libero, pharetra sed, volutpat vitae, ultricies et, velit. Suspendisse luctus ultricies augue. Curabitur imperdiet nisi vel neque. Nunc vel nisi. Donec hendrerit porttitor tortor.

Courier New: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam semper, diam vitae rhoncus eleifend, dui ligula consectetuer nunc, sed faucibus velit leo in magna. Suspendisse sed eros. Proin eu elit ut libero suscipit sollicitudin. Mauris eu dolor pellentesque orci lacinia dapibus. Phasellus tempus purus tincidunt sapien. Nulla vitae massa vel elit gravida scelerisque. Integer nec sem. Vestibulum aliquam nunc vel nisl. In lacus libero, pharetra sed, volutpat vitae, ultricies et, velit. Suspendisse luctus ultricies augue. Curabitur imperdiet nisi vel neque. Nunc vel nisi. Donec hendrerit porttitor tortor.

Georgia: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam semper, diam vitae rhoncus eleifend, dui ligula consectetuer nunc, sed faucibus velit leo in magna. Suspendisse sed eros. Proin eu elit ut libero suscipit sollicitudin. Mauris eu dolor pellentesque orci lacinia dapibus. Phasellus tempus purus tincidunt sapien. Nulla vitae massa vel elit gravida scelerisque. Integer nec sem. Vestibulum aliquam nunc vel nisl. In lacus libero, pharetra sed, volutpat vitae, ultricies et, velit. Suspendisse luctus ultricies augue. Curabitur imperdiet nisi vel neque. Nunc vel nisi. Donec hendrerit porttitor tortor.

Verdana: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam semper, diam vitae rhoncus eleifend, dui ligula consectetuer nunc, sed faucibus velit leo in magna. Suspendisse sed eros. Proin eu elit ut libero suscipit sollicitudin. Mauris eu dolor pellentesque orci lacinia dapibus. Phasellus tempus purus tincidunt sapien. Nulla vitae massa vel elit gravida scelerisque. Integer nec sem. Vestibulum aliquam nunc vel nisl. In lacus libero, pharetra sed, volutpat vitae, ultricies et, velit. Suspendisse luctus ultricies augue. Curabitur imperdiet nisi vel neque. Nunc vel nisi. Donec hendrerit porttitor tortor.

Geneva: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam semper, diam vitae rhoncus eleifend, dui ligula consectetuer nunc, sed faucibus velit leo in magna. Suspendisse sed eros. Proin eu elit ut libero suscipit sollicitudin. Mauris eu dolor pellentesque orci lacinia dapibus. Phasellus tempus purus tincidunt sapien. Nulla vitae massa vel elit gravida scelerisque. Integer nec sem. Vestibulum aliquam nunc vel nisl. In lacus libero, pharetra sed, volutpat vitae, ultricies et, velit. Suspendisse luctus ultricies augue. Curabitur imperdiet nisi vel neque. Nunc vel nisi. Donec hendrerit porttitor tortor.

Geneva and Arial are also a good picks, but don’t you see how clearly Verdana stands out? If you want to follow the tiny font trend, be my guest. Just please do it with a legible font.

Now if you make the mistake of using a crappy small font and a horrible color scheme between text and background, then you are setting yourself up for design hell. Stay away from tiny fonts with serifs. Please, do it for the children.

12 comments

  1. I used Verdana on my website. I have a 1600×1200 resolution and can read it just fine. Excellent point :)


  2. Thanks! I see tiny-font-syndrome so often it scares me.


  3. Good thread, i like these tips, its looks that i knew just small part.


  4. Thanks. I’m glad you enjoyed it. It’s a mess to see sites that make this mistake.


  5. Code is usually presented in a fixed-width font, not proportional. Courier is the default pick for that although sans serif is better imo. Verdana is a terrible code font.


  6. I happen to agree with you, Anonymous, 100%. Most popular code editors use Courier for developing. This is the ideal for programming.

    However, when it comes to web design, and someone wants to use tiny fonts, Verdana is still the way to go.


  7. For those who want a monospaced one, but don’t like Courier, Lucida Console is a good choice.


  8. Great insight Leo Bazan. As you can see, I am a Verdana person myself. However, Lucida is a good competitor.


  9. I hate small fonts on web pages too, but I found a way around it.

    I discovered it by accident one day, so ill share:

    make your browser the active window by clicking anywhere on a page and
    hold CTRL on your keyboard, then scroll your mouse wheel up and down.

    scrolling up will make fonts smaller,
    scrolling up will make them larger,

    This works on Firefox, Internet Explorer and even Wordpad and possibly other programs, so experiment with it,

    sometimes it takes a few seconds if the page is large, but this is hardly a bother.

    also, on an unrelated note, there is a neat bookmarklet called DARKEN
    it changes the colors of pages to be easier on the eyes,

    its easy to modify it to change the colors to your whim if you look at the code carefully,

    Google “Darken Script”

    Happy Computing! :D


  10. Helpful post, however the irony is that the font on this blog is pretty small!


    • This is true! It’s part of the theme. Although, if you notice, the font family for this site is: ‘Lucida Grande’,Verdana,Arial,Sans-Serif. Yay fonts!


  11. oh no



Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 873 other followers

%d bloggers like this: