Typography in Web Design

[HTMLBasicTutor]

Definition:

Typography is the balance and interplay of letterforms on a web page. It helps the user understand the form and absorb the substance of the page content. It is important in both visual and verbal communication.
http://www.d.umn.edu/itss/support/Tr...lossary/t.html

Using the right font and the right size of font can make a big difference in the usability and readability of your web pages.

This thread is started as a resource of information on typography when used within web pages.

[HTMLBasicTutor]

Typography is the backbone of good web design

Covers:

• Line height
• All caps and small caps
• Comfortable reading measures
• Hierarchy and contrast
• Layout
• Readability

At the bottom of this article there are links to other articles on the site regarding typography.

[HTMLBasicTutor]

The Elements of Typographic Style - Online ebook covering:

Rhythm & Proportion
Horizontal Motion
Vertical Motion
Blocks & Paragraphs
Etiquette of Hyphenation & Pagination

Harmony & Counterpoint
Size
Numerals, Capitals & Small Caps

[Wet Paint]

The OP. Good thread. I look forward to it's updates.

[MartinT]

I look forward to CSS3 and @fontface

[HTMLBasicTutor]

8 Rules for Creating Effective Typography

The basic rules outlined below will help you become more aware of how you structure and use typography in your designs. Being conscious of these rules can improve nearly everything you create that contains a headline or major typographic element. Let’s get started!

http://designshack.co.uk/articles/ty...ive-typography

[technophobic]

Thanks for posting this thread HTMLBasicTutor. It fired my designing will. Typography surely plays a big role when designing a web page. It makes the visitor/readers go back to your site.

[HTMLBasicTutor]

Glad it has inspired some of you.

Just keep in mind if you decide to go for fancy fonts:
a) Window fonts and Mac fonts are different
b) Joe/Jane Average might not/probably won't have the same font families as you do as a designer.

Using uncommon fonts in your web page or website can be a problem.

Windows based and Mac based computers come with different fonts installed by default.

One problem web designers have is that they forget that the average computer user may not have the same fonts installed on their machine.

Once you add a program such as a word processing program or graphics program to your machine it will most likely add additional fonts to your computer also.

So, you happily design your web page/website with the fonts available on your computer. You upload the site then go over to your friend’s house or client’s office to show off what you have done. Disaster! The page looks nothing like you intended. Why? Because you have used a font that is not available on the other person’s machine. The other machine either does not have the same font installed or it is running a different operating system (back to the Windows vs Mac issue).

How do you solve the problem of uncommon fonts?

Uncommon Fonts

There is also the problem of choosing the right font size. Might look perfect on your machine but what about on a PC (or visa versa).

“A certain trend among designers, believing that small text gives a Web page a sleek appearance and provides more space per “page” for actual content, sometimes results in the use of unreasonably small font sizes.

Unfortunately, this does not go well with the diversity of platforms used to access Web pages, from portable devices with tiny screens to projection devices hooked to computers. And even within a specific platform, text settings may vary.

The problem here is a basic usability and accessibility issue: a good design should look good without requiring the user to enlarge or reduce the text size.”

Care With Font Size – W3C Quality Assurance Tips for Webmasters

Best Font Size for Web Design

[HTMLBasicTutor]

...there are millions of websites on the web today that all have information on them represented with text. In most cases, authors do not care how their information is laid out; sometimes they do, which is even worse because of their lack of education in the matter. There are hundreds of websites with yellow text on a purple background with awfully proportioned text in a ridiculous typeface—this should not be the case in the decade of the semantic web, where great tools are easily accessible to designers and developers. The purpose of this article is to impart an understanding of web typography to beginner typographers and designers in order for them to do web design well....

Typography Is Important

[logowork]

Web Typography
Once you understand what typography is, you need to know how to make changes to your website that affect the typography. You do this with CSS. There are several CSS style properties that you can use to impact the typography of your Web pages.

What is Typography?
If you're going to work on typography on your website, then you should know the basics of typography. This article is a quick overview of typography terms and how typography is applied.

[removed]

[Tanya]

Originally Posted by HTMLBasicTutor

Glad it has inspired some of you.

Just keep in mind if you decide to go for fancy fonts:
a) Window fonts and Mac fonts are different
b) Joe/Jane Average might not/probably won't have the same font families as you do as a designer.

As far as fonts go in terms of OS compatibility, I believe Cufón does a great job of fixing that problem.

Here's a little about Cufón and how it works.

[HTMLBasicTutor]

Originally Posted by Tanya

As far as fonts go in terms of OS compatibility, I believe Cufón does a great job of fixing that problem.

Here's a little about Cufón and how it works.

That looks pretty easy according to the video here: http://net.tutsplus.com/videos/scree...font-you-wish/ but the visitor has to have Javascript enabled for it to work.

[Tanya]

Originally Posted by HTMLBasicTutor

That looks pretty easy according to the video here: http://net.tutsplus.com/videos/scree...font-you-wish/ but the visitor has to have Javascript enabled for it to work.

What on the web these days doesn't though? right?

[HTMLBasicTutor]

There are various issues regarding relying on Javascript to perform tasks.

Created a new thread: Does Your Website or Blog Rely on Javascript? for further discussion as this thread is about typography.

[HTMLBasicTutor]

Note: this is a submission only

This document specifies the WOFF font format. This format was designed to provide lightweight, easy-to-implement compression of the font data, suitable for use in conjunction with the @font-face CSS declaration. Any TrueType/OpenType/Open Font Format file can be losslessly converted to WOFF for Web use (subject to licensing of the font data); once decoded by a user agent, the WOFF font will display identically to the original desktop font from which it was created.

The WOFF format also allows additional metadata to be attached to the file; this can be used by font designers or vendors to include licensing or other information, beyond that present in the original font. Such metadata does not affect the rendering of the font in any way, but may be displayed to the user on request.

The WOFF format is not expected to replace other formats such as TrueType/OpenType/Open Font Format or SVG fonts, but provides an alternative solution for use cases where these formats may be less performant, or where licensing considerations make their use less acceptable....

Submitted
this 8th day of April, 2010

1.Microsoft Corporation
2.Mozilla Foundation
3.Opera Software ASA

WOFF File Format 1.0 Submission Request to W3C

[edesigner008]

Typography should match with client's requirement and trade.

[MrFlicks]

Many many people I know don't have Javascript enabled for various reasons so Cufón wouldn't be something that would work for them I doubt, I know I would never use Cufón

I think Tahoma and Calibri are the two best and most readable cross platform fonts tbh as they work the best for many devices and are the easiest fonts to read to my my mind

[rypher21]

the readability and its spelling is matter most

[DesignJunky]

Thanks for the link. I know I've found myself leaving sites if they're just hard to read or not pleasing to they eye. I'm sure many site owners have lower conversion rates because they haven't given typography the credit it is due.