Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

In terms of tips, are there any good resources or things to keep in mind with things like font and typography? Any "ideal" or happy medium sizes to keep in mind?

I'm working on a project where the UI is heavily data-populated. I'm attempting to take a large amount of data and translate it into a UI comp (to hand off to developers). Ideally, the page wouldn't have to scroll--which means every space and fonts as well as font sizes is extremely important.

I was wondering if anybody out there had any particularly good advise to give me? I'm a bit of a n00b :)

share|improve this question
2  
What is this even about? Web page, PC application (OS?), tablet application? Who is this targeted at – subject field, experts/non-experts, usage situation … –  TehMacDawg Mar 24 '13 at 23:37
    
This is an extremely broad question (typography in general) combined with a very specific variable (1024) that, in the end, doesn't have much to do with typography in general. Can you try and clarify the question a bit more? For example, are you really asking how to deal with small fonts on-screen? –  DA01 Mar 25 '13 at 2:00
add comment

1 Answer

up vote 1 down vote accepted

I must say, 1024px is more or less the average resolution (or a minimum, probably, because numbers change quite a lot), so I don't see why you wouldn't be taking the same things in consideration you would do for any other site.

FONT SIZE

There are two current "trends" in font size, one would be min body text of 12px and the other one minimum 16px.

  • The 12px trend:

This trend got really strong during the first days of Web 2.0, with some (illegible) texts appearing all over sites. One thing is for sure: Never go under 12px.

  • The 16px trend:

There are some particular findings that are pivotal to issues such as readership and readability and comprehension, which is really what body copy is all about. Some facts for supporting 16ps:

  • At age 40, only half the light gets through to the retina as it did at age 20.

  • About 9% of people have minor or major visual impairments

  • The distance at which we can read letters is a common measure of both legibility and reading speed.

  • Most people, when sitting comfortably, are about 20 to 23 inches from their computer screens.

  • 16-pixel text on a screen is about the same size as text printed in a book or magazine.

A good source is "16 pixels body copy. Anything less is a costly mistake"

FONT FAMILY

Basically anything that renders nicely in different devices ans browsers. Sans-serif is apparently better for readability (body), while Serifs look nice for titles.

LAYOUT

You mention a large amount of data. This might be better suited for UX, but do you need to show everything at a glance? A good option is to disclose information by steps, so only show what the user needs to see, until he/she asks for more info. Tooltips are great for this. Also lightboxes and sliders.

FInally, your best friend for legibility will be negative space. Whatever you do with your info, make sure you have enough space between your elements. Even if you are working with a small font, it will be much easier to see if it's surrounded by clear space.

share|improve this answer
    
"One thing is for sure: Never go under 12px." That actually depends on the x-height legibility of the font at that size. –  Chris Burton Mar 25 '13 at 18:17
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.