Hot answers tagged font-sizes
25
It really depends on a lot of factors such as what is the frequency of certain characters that you expect and what fonts are available to you.
I did a rudimentary by creating a program that iterated through all of the available fonts I had installed on my Windows box at the time and printed a line containing each printable ascii character on to the screen ...
14
You want to look to sites such as W3.org for advice on this.
Many people with cognitive disabilities have trouble tracking lines of text when a block of text is single spaced. Providing spacing between 1.5 to 2 allows them to start a new line more easily once they have finished the previous one.
The W3C accessibility guidelines 1.4.8 state (emphasis ...
13
The biggest problem is the visual emphasis lost by the bright colour (in this case green). You can say "ignore the other colour", but it's the biggest problem with the readability! So it's hard to successfully improve the readability without working on that colour.
The menu on the left is very high contrast, causing it to distract the reader from the main ...
11
This is a widely debated subject. One of the best ways I've seen this explained, is from the presentation Design for developers: making your frontends suck less by Idan Gazit.
This had the following slide:
This is 16pt text on a normal screen, and 12pt text in a book. The message is that 12pt is excellent for a book, but is also usually held much closer to ...
11
Like any normal web design, it's worth staying away from pixel sizes so if a user really needs larger text they can still use your site.
Unless you're targetting a specific group of phones that you can test, it's best to let the OS and browser handle the size. font-size: medium; should be fine for content, and then you should be able to make em based ...
10
If this is a desktop thick-client app, or it’s important to be consistent with desktop apps, then the Windows 7 UX guidelines specify that for risky actions, the most visually prominent button should be the “safe choice” (page 384). Specifically, the safe choice should be the default button, which is both more visually prominent than other buttons, and also ...
10
Luke Wroblewski wrote an article called Primary & Secondary actions on web forms that talks specifically about this problem. His data is based on research from eye-tracking studies.
The conclusion is basically that there should be differences in visual weight between the two so that you can interpret, at a glance, which call to action is more ...
9
If someone is looking to change text size, having the ability to do so in the browser and on the site means they're more likely to find the option. However, something to think about:
If in testing or conversation you find people actually using your zoom buttons, your text is too small.
Whether or not the site design is clever matters much less to your ...
9
I think this is influenced by personal preference and the width of the block of text. The wider the block of text, the bigger the line-height should be in order to keep your eyes on the same line while reading it.
Personally, I like the line-height to be 1.5em or 1.6em.
This Interactive Guide to Blog Typography has a section about line-height which also ...
9
An article Optimal Line Height says:
Typography references consistently put ideal line height at 1.2 ems (a measure of type equivalent to the the letter height or point size of a typeface).
The main idea of defining a proper line height is to let text paragraph look solid and be pleasant to read (if you will choose a bigger line height the ...
8
There are surprisingly few actual studies on which fonts work better for specific occasions, so you're going to have to take a more practical pragmatic approach and decide on the site content and audience first, then take the various merits of your font choices into consideration after you've determined the site usage.
For example, yes, Verdana is a more ...
8
Coda
Sometimes a smaller font is a good way out of a tight spot. In this particular case, at least for the part of the problem shown, there is a better solution which is both clearer, and takes half the space, like so:
I'm using a large enough font, 18pt Tahoma (open image in new tab to view full size), that the negative letter-space is OK.
7
12px seems to work fine for most people. Having something at 17px makes it harder to read, and so does having it below 10px. I think 12-13px is a good guideline.
But really, you should set your text size to something like 1em. This is because some browsers will not allow users to resize text if it is set in pixels. No matter what text size you have, people ...
6
Right now, your interface is very bad. Here's what's wrong:
It's absolutely unclear how to change one's status.
The clickable link in the table isn't differentiated from the rest of the content and there's no expectation of what will happen when it's clicked.
Time selector is sliders instead of simple numeric input.
Message length limit isn't specified ...
6
There's no such thing as an optimal font size. Looking for one means that you're forgetting something important: legibility of text is not solely a product of size.
I've built around a dozen websites as a UI designer in the past five years, and they've all had different audiences. One of the things I found was that size isn't the biggest factor. It's a ...
6
Providing such font size options within individual websites isn't as important nowadays than it used to be (for instance when IE6 was a more common browser as it didn't really have a suitable font resizing option) but that doesn't mean it no longer has its place; it is particularly useful if the target audience for the website is more focused to users with ...
6
Here is an extract from a very handy article on this:
Unfortunately, just knowing the optimal line height for a given font
size is not enough.
All 3 typographical dimensions—font size, line height, and line
width—affect one another. Therefore, you cannot talk about line height
or font size without also considering the line width.
Based on ...
5
To me, its clutter and stepping on the toes of the browser. Like having your own bookmark control. Or having a "launch new window" control. Or a back button. Or a delete the cookies I track button. The browser does its job and you do your job.
If you insist on putting it there, try and track usage over a week...see how many people care.
5
Lose the circled 'Blog' word. It's interloping into the prime position. You've already got 'Blog' in the menu. Show that it is the blog that is selected there.
If you want to do more to say it's a blog you can below the title in smaller print say "a rambling weblog by Thomas Shields", or whatever other byline you want to give yourself. With that ...
5
Setting aside my type nerd instincts and just addressing the UX implications of the choice:
Verdana was designed as a screen font, and so is very well hinted at small pixel sizes on 96 DPI screens. It also has an extremely high x-height, which improves its readability especially at small sizes. It is infinitely more legible for screen use than Arial.
Arial ...
5
From my practice and researches I have seen that giving an onsite resizing option is more handy than leaving it on the browser.
For elderly people it is always best to have options upfront and well placed so that they can use it. In Browser mode, they need to use multiple key combinations to zoom in and out which they are less likely to use. Moreover, the ...
4
do you think we should ban 11 pixels font-size on any of our design?
Short answer:
No
Long answer:
There are too many variables to consider before you can reasonably ban a particular sized font in a design.
That doesn't mean you should start using 8px fonts all over the place. There's an appropriate time and place; a good designer will understand ...
3
You should know that your choice of typeface is your identity - after all, it is the very channel via which you are presenting your product for the user.
Typography speaks volumes about your service, attitude, and approachability - it's not just all about different sizes for different sections and the like.
To read around the subject - visit Fonts in use, ...
3
Two reasons for allowing the user to select the font size on your site:
It only affects your site and not all sites viewed in that browser or tab.
You keep control over how your site looks with all the different font sizes.
Reasons for not having the control:
As you've already mentioned most (if not all) modern browsers let the user zoom in and out.
...
3
From an idealistic UI design point of view, it's always a good idea to assume that users may change the font size. Not because browsers use zoom or not, but because users can apply user stylesheets for accessibility reasons.
Unfortunately that's a hard sell to your marketing or graphic design teams, who want things to look the way they want them to look. So ...
3
I don't have any evidence to demonstrate the usefulness or otherwise of these links, but I do have an explanation for their continued use:
Many large websites (especially those run by governments) are expected (or, at least in Australia, legally required) to conform to the Web Content Accessibility Guidelines (WCAG) 2.0 requirements.
One of its ...
3
Sadly, not really. What you're asking for is an absolute unit of measure, which should make points, picas, millimetres, inches, etc. all valid option (for any defined definition of "point", at least—it used to mean 72.27 PPI, but was standardised to 72 PPI for PostScript).
When the Macintosh was first released, its physical screen density was, it just so ...
3
Please refer to this article: http://uxdesign.smashingmagazine.com/2011/11/29/the-perfect-paragraph/ - a very interesting one, describing also some other aspects of text on websites.
Please do remember that it always depends on the device as well, due to resolution, screen size and the distance from which user is viewing the screen (significantly closer in ...
2
Presuming you're referring to on-screen use on a conventional display (~96 DPI) as opposed to something like a Retina display, and you have a system with sub-pixel anti-aliasing, what you're looking for is a font with terrific pixel hinting. Hinting is the art of taking the vector curves designed for print use and customising their shape for different point ...
2
First, I love the ninja analogy. I mean, you can't go wrong with ninjas.
However, it appears you're trying to accomplish too much on one page. Break up your message into several pages and boil down your information to a succinct paragraph or two. Then, provide links to the more detailed info.
Lead with statements that entice the reader to read more. ...
Only top voted, non community-wiki answers of a minimum length are eligible
