Font Sizes in Web applications ...

25 Jun 2007 - 10:38am
7 years ago
4 replies
1986 reads
Grady Kelly
2007

Hello everyone ...

I am curious to know what other designers use in regards to fonts in their
web applications. For the longest time I have used Verdana 10pt. I have
read articles about how Verdana is larger than other fonts at the same font
size, etc, but is that reason enough to use it?

My questions then are:

1. What fonts do you use in your applications? (type and size)
2. What lead you to use those particular fonts? (studies, research,
testing)
3. Does it even matter? Obviously it would not be cool to have your entire
application in Comic Sans, but in general, are fonts an issue? Does Tahoma
vs Arial vs Verdana a critical design decision?

My curiosity comes from a problem I am solving where we present a large
amount of data in a data grid/table. At Verdana 10pt, everything fits on a
single row. At 11pt, things are a little bigger, but not super squished.
At 12pt, things become illegible, and data within columns has to now be on 2
lines in the row, making the rows that much fatter, and limiting the amount
of data that can be presented on the page. There are a few Business
Analysts that are saying that we need to use the bigger font, but it
completely changes how and what data we would even present on the page,
considering that the larger type takes up so much space. Ugh.

Thanks,

Grady Kelly
grady at simpledesign.org
http://simpledesign.org

Comments

25 Jun 2007 - 11:04am
Calvin Park 박상빈
2007

It all depends on your audiences.

If your site is meant to be *read*, use what's most readable. Fancy is
bad and big letters are good. Please don't forget to use CSS instead
of <font>. This way, users can choose to read the content using their
favorite reading fonts at their favorite reading size.

If your site is meant to be *looked at*, use the font that represents
your product: Calvin Klein and PacSun use different font.

If your site is a *tool*, use what fits in your screen while making
sure that they are legible. Don't forget to test the app with
increased font size. Many people I know use the computer with
increased font size.

Personally, I use the largest font that I can afford.
Hope this helps.

On 6/25/07, Grady Kelly <grady at simpledesign.org> wrote:
> Hello everyone ...
>
> I am curious to know what other designers use in regards to fonts in their
> web applications. For the longest time I have used Verdana 10pt. I have
> read articles about how Verdana is larger than other fonts at the same font
> size, etc, but is that reason enough to use it?
>
> My questions then are:
>
> 1. What fonts do you use in your applications? (type and size)
> 2. What lead you to use those particular fonts? (studies, research,
> testing)
> 3. Does it even matter? Obviously it would not be cool to have your entire
> application in Comic Sans, but in general, are fonts an issue? Does Tahoma
> vs Arial vs Verdana a critical design decision?
>
> My curiosity comes from a problem I am solving where we present a large
> amount of data in a data grid/table. At Verdana 10pt, everything fits on a
> single row. At 11pt, things are a little bigger, but not super squished.
> At 12pt, things become illegible, and data within columns has to now be on 2
> lines in the row, making the rows that much fatter, and limiting the amount
> of data that can be presented on the page. There are a few Business
> Analysts that are saying that we need to use the bigger font, but it
> completely changes how and what data we would even present on the page,
> considering that the larger type takes up so much space. Ugh.
>
> Thanks,
>
> Grady Kelly
> grady at simpledesign.org
> http://simpledesign.org
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://beta.ixda.org/guidelines
> List Help .................. http://beta.ixda.org/help
> Unsubscribe ................ http://beta.ixda.org/unsubscribe
> Questions .................. list at ixda.org
> Home ....................... http://beta.ixda.org
>

25 Jun 2007 - 3:07pm
Jeff Howard
2004

Hi Grady,

I've been using Tahoma as a slightly narrower alternative to Verdana
that still keeps much of the same feel. It helps solve the spacing
problems you mention.

I did some research into this a few years ago and whipped up a tool
that helps to compare different typefaces/sizes in the context of a
web browser. Might help your decision making process. Based on my
analysis I found that many blogs (in 2004) used 11px Verdana for long
stretches of readable text. I also found that for captions at tiny
sizes Lucida Grande for the Mac was exceptionally legible.

Font Comparison Utility
http://www.howardesign.com/exp/fonts/compare.html

// jeff

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://beta.ixda.org/discuss?post=17581

26 Jun 2007 - 1:58am
Cristian Norlin
2007

Hi.

Interesting to read other designer's take on this.

In my book however there are a few additional parameters to consider than
just the size of the font. Line spacing is one, where I personally use the
font size * 1.3 as a starting point (there is no absolute value for this -
only your eye and your users/readers can guide you : )

Then there is the issue of the amount of characters per row. In print
typography I usually aim for 55 - 65 characters, but once again that is just
a starting point that has un be evaluated optically considering the other
issues mentioned. When designing for the screen I usually decrease this
value a little bit, based on own tests with users.

Of course there is a lot more to discuss when it comes to typography in
general and for the screen in particular, these are just my quick thoughts
on my way to work typing this with sore fingers on my mobile...

/Cristian

- Show quoted text -

On 6/25/07, Jeff Howard <id at howardesign.com> wrote:
> Hi Grady,
>
> I've been using Tahoma as a slightly narrower alternative to Verdana
> that still keeps much of the same feel. It helps solve the spacing
> problems you mention.
>
> I did some research into this a few years ago and whipped up a tool
> that helps to compare different typefaces/sizes in the context of a
> web browser. Might help your decision making process. Based on my
> analysis I found that many blogs (in 2004) used 11px Verdana for long
> stretches of readable text. I also found that for captions at tiny
> sizes Lucida Grande for the Mac was exceptionally legible.
>
> Font Comparison Utility
> http://www.howardesign.com/exp/fonts/compare.html
>
> // jeff
>
>
> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
> Posted from the new ixda.org
> http://beta.ixda.org/discuss?post=17581
>
>
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://beta.ixda.org/guidelines
> List Help .................. http://beta.ixda.org/help
> Unsubscribe ................ http://beta.ixda.org/unsubscribe
> Questions .................. list at ixda.org
> Home ....................... http://beta.ixda.org
>

--
||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

Cristian Norlin

p. +46 738 093 103
m. cristian.norlin at gmail.com

||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

MOBILEHCI 2007 TUTORIAL

"Crafting the Mobile Experience"

Didier Chincholle and Cristian Norlin
Ericsson Research, Usability & Interaction Lab

Where: The Mobile HCI 2007 Conference, Singapore
When: September 9, 2007 (New date!)
URL: www.mobilehci2007.org

||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

On 6/25/07, Grady Kelly <grady at simpledesign.org> wrote:
>
> Hello everyone ...
>
> I am curious to know what other designers use in regards to fonts in their
> web applications. For the longest time I have used Verdana 10pt. I have
> read articles about how Verdana is larger than other fonts at the same
> font
> size, etc, but is that reason enough to use it?
>
> My questions then are:
>
> 1. What fonts do you use in your applications? (type and size)
> 2. What lead you to use those particular fonts? (studies, research,
> testing)
> 3. Does it even matter? Obviously it would not be cool to have your
> entire
> application in Comic Sans, but in general, are fonts an issue? Does
> Tahoma
> vs Arial vs Verdana a critical design decision?
>
> My curiosity comes from a problem I am solving where we present a large
> amount of data in a data grid/table. At Verdana 10pt, everything fits on
> a
> single row. At 11pt, things are a little bigger, but not super squished.
> At 12pt, things become illegible, and data within columns has to now be on
> 2
> lines in the row, making the rows that much fatter, and limiting the
> amount
> of data that can be presented on the page. There are a few Business
> Analysts that are saying that we need to use the bigger font, but it
> completely changes how and what data we would even present on the page,
> considering that the larger type takes up so much space. Ugh.
>
> Thanks,
>
> Grady Kelly
> grady at simpledesign.org
> http://simpledesign.org
> ________________________________________________________________
> Welcome to the Interaction Design Association (IxDA)!
> To post to this list ....... discuss at ixda.org
> List Guidelines ............ http://beta.ixda.org/guidelines
> List Help .................. http://beta.ixda.org/help
> Unsubscribe ................ http://beta.ixda.org/unsubscribe
> Questions .................. list at ixda.org
> Home ....................... http://beta.ixda.org
>

--
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

Cristian Norlin

p. +46 738 093 103
m. cristian.norlin at gmail.com

||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

MOBILEHCI 2007 TUTORIAL

"Crafting the Mobile Experience"

Didier Chincholle and Cristian Norlin
Ericsson Research, Usability & Interaction Lab

Where: The Mobile HCI 2007 Conference, Singapore
When: September 9, 2007 (New date!)
URL: www.mobilehci2007.org

||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

26 Jun 2007 - 10:33am
kemoore
2007

What makes Verdana%u2014and other fonts designed for screen
display%u2014"big" is the size and proportion of their counters,
the open spaces in vowels and in the main lower section on consonants
like "n" or "b."

Because Verdana%u2019s huge counters imply proportionally small
ascenders and descenders, the face demands extra line-spacing for
readability. With default line-spacing, the crowded ascenders and
descenders aren%u2019t prominent enough to let a reader scan letter
and word shapes quickly. With 11-pixel Verdana, I usually use the
equivalent of 16-18 pixels of line-spacing. Augmenting the negative
space above and below the letters often does more for legibility than
increasing the font size without attention to spacing.

To give users maximum flexibility in altering font sizes, specify
size in percentage or in ems rather than in points or pixels.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Posted from the new ixda.org
http://beta.ixda.org/discuss?post=17581

Syndicate content Get the feed