1. Computing
Send to a Friend via Email
Jennifer Kyrnin
Guide since 1997

About.com Web Design / HTML

What is HTML5?

If you're interested in staying up-to-date in web design, you should be familiar with HTML5. There is absolutely no reason you shouldn't use HTML5 on your web pages now, as it's supported in all modern browsers. Click on the links below to learn more about how to get started with HTML5.

Get Started with HTML5

What is Web Design?

the web in a bottle

Web design is all about the planning and creation of websites. A good designer knows HTML and CSS as well as design principles. A great designer knows that planning a website is as critical as putting the pieces together. On this site you will learn all you need to know about web design to plan, build, and maintain an amazing website. Besides web design this site will teach you what to do before you start building a website, 8 Cheap and Easy Ways to Learn HTML and another 8 Cheap and Easy Ways to Learn CSS. Plus there is information on JavaScript, web servers, and even web marketing and strategy. The links below will help you learn more about web design.

Web Design / HTML Spotlight10

Writing HTML in Notepad

Friday April 18, 2014

Notepad is a text editor that comes free with every copy of Microsoft Windows. There is no need to get anything else when you want to write HTML. You can create complex and beautiful pages using Notepad.

Learn how easy it is to Write HTML in Notepad

More Notepad Help

Font sizes - 12px is too small

Thursday April 17, 2014
If you can easily read this you have better eyes than most people.

I am often asked what sizes I recommend for various aspects of web pages. How wide should a design be? How big should images be? How tall should fonts be? In my opinion, the first two questions can be answered most accurately with the statement “It depends.”

This is because the design width should depend upon how wide the device viewing it is (in other words, you should use responsive web design) and also the content that is going to be displayed on the page. The size of your images depends on both what you're using the images for and how your clients access your site.

But font size is different. You should always make your fonts at least 12px tall. And really you should aim for bigger than that. There are a couple of reasons why you should aim for your type being 12px and larger:

  • Below 12px serif fonts will appear muddy because the serifs start to blur together.
  • Before you think “okay, I'll just use sans serif fonts for my 10px type:” serif fonts can appear muddy at smaller sizes too.
  • But most importantly: fonts that small are illegible on modern monitors

Modern monitors are often huge (yes, I know not on laptops...) and even on smaller screens some devices are using technology to increase the resolution (Retina Macs and iPhone/iPad devices). And larger resolutions means that the pixels are smaller. This means that on a large monitor with a large resolution, a 12px tall font will look like chicken scratches, whether you're talking serif or sans serif font faces. If you don't believe me, look at this chart.

Use Ems or Rems and Set Your Default Font Size a Decent Size

You've been told many times to size your web page fonts using a relative font size. You can set fonts relative to the element's current default size (em) or relative to the x-height of the current font (ex). Plus, there are a few new font-size measures in CSS3 to set your fonts relative to the width of the '0' glyph in the current font (ch), relative to the viewport height (vh), or relative to the root element font size (rem).

But even if you use a relative font size, you should make it large enough to read, and that means body text should be at least 14-20 pixels tall. But you can't really know what the font size is going to be on someone else's monitor, so in order to use ems you should set the default font size to a value that makes it easy for you to adjust your ems.

While 10px is extremely small I like to set my body text to that value, so that I know, in general, what my ems are going to equal (see: How Big is an Em?). Since most browsers display a default font size of 16px, I can adjust that to 10px by setting the root element to 62.5% of the standard:

* { font-size: 62.5% }

Then, I know that every 1em will equal 10px. So 1.2em equals 12px, 1.5em equals 15px, and so on.

Do Your Readers a Favor—Use Larger Fonts

If you don't believe me now, you will in ten years when you can't read the tiny fonts either!

I love lists

Tuesday April 15, 2014

Grocery List

Perhaps it's the Myers-Briggs J in me, but lists are appealing to me. And when I went to a conference led by Molly Holzschlag where she showed us that nearly everything in life (and web design) is a list, I was in heaven. Of course, most people I talk to don't get as excited about styling unordered lists (and ordered lists and definition lists...) as I do. But trust me, go forth and use lists! You won't be sorry!

Image courtesy James Braund / Digital Vision / Getty Images

Spring cleaning for your website

Monday April 14, 2014

Playing outside in a hammock

This time of year inspires me to do two things: 1. lay outside in my hammock and 2. organize and clean my house. But there's no reason why you can't organize and clean your website too, especially when it's too chilly to lay in the hammock. These two articles will help you find a few things to do to give your site an update even if you don't have time for a full-on redesign.

Read the articles: Tips for Improving Your Web Designs and Organize Your Website

Discuss in my forum

©2014 About.com. All rights reserved.