Tag Info

Hot answers tagged

182

It's a legal compromise really. From an article on the New York Times: The design of modern billing blocks illustrates the tension between two intersecting interests: studios want uncluttered marketing materials, and industry organizations want their members prominently and fairly credited. Thus, it is neither accidental nor for aesthetics that the ...


46

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 ...


18

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 ...


15

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 ...


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 ...


13

I think that the closest answer is: a compromise between visibility and legibility (which of course created some standard with time, or even: best practice). The main purpose for that is the need to fit as much text as possible, while still keeping the letters quite big (this is why the letters are almost always capital here as well). Fonts used here are ...


12

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.


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 ...


10

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 ...


10

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 ...


10

An article Optimal Line Height says: Typog­ra­phy ref­er­ences con­sis­tently put ideal line height at 1.2 ems (a mea­sure of type equiv­a­lent to the the let­ter 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 ...


9

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 ...


9

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 ...


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

Jakob Nielson and a large group of other studies suggest scrolling is not a con. Users are acclimated. Put it into context. If you're sitting at a desk, the monitor is roughly 28 inches away vs. a mobile device that is 12 inches. Should it be larger if it's closer? Four years ago, Smashing Mag found the most popular body font size on the web was 13px. ...


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 ...


7

You're doing it wrong. Generally, there's an "other way". The answers to this question are all great, but honestly, you should look at all the different option. Squeezing as much text in as little space as possible always means you've botched a previous design choice. Perhaps you should have flipped them to be horizontal bars, giving you WAY more space to ...


7

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 ...


7

You are letting line length trump font size. Realize that one doesn't necessarily trump the other and there are limits to the practicality of that. In general, however, people are not used to web sites changing the size of the text based on their browser size. So what you have designed is very much not the standard behavior. That, alone, would be a reason ...


7

I don't think it's so much to do with the ageing population of the internet. In fact Over the past five years the number of people online, aged 65 and over, has remained relatively static — Ageing and the use of the internet I think the change that you're seeing is down to two things: 1) Changing display size and DPI. A 14px font isn't going to ...


6

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 ...


6

Setting it to somewhere between 18-24pt (or 150-200% if you prefer) will probably give the best compromise results on iPhone and Android. From my testing, mobile browsers totally ignore what the standards say on relative vs. absolute and default to a size that attempts to display a page originally formatted for a full size computer (i.e. just barely readable ...


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

I love this question, and I love that you asked it. Points given. I also think it's fundamentally misunderstanding how we approach to adaptive/responsive design - which is really not surprising since we're on a UX board and not a product design board. UX designers, almost by definition, aren't front end engineers. Because there's a bounty on this, I'm ...


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

Firefox Tools-> Web Developer -> inspect IE Tools -> F12 developers tools. IE developer tool works pretty well in my opinion.



Only top voted, non community-wiki answers of a minimum length are eligible