226

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


44

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


35

Since <h*> means heading, this shows a hierarchy. The different numbers are a level ranking from high to bottom or maximum to minimum, where <p> is the last step. Hierarchy: system in which members of an organization or society are ranked according to relative status or authority. This means: <h1> > <h2> > <h3> > <h4> ...


33

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


32

For your specific example and going on the limited information you've provided I would say yes, it is a bad idea. Doing what you suggest could break the following basic rule: The page as a whole must be designed in a way that clearly communicates to the user what actions are available and how to easily access the information they seek Consider ...


28

The point is a measurement system inherited from traditional print typography. It has had various definitions, much like the inch and foot. With the introduction of PostScript, it has been defined to be 1/72 inch. I don't recall the specific history, but the use of certain font sizes long predates computing. They continue to be used because they work, and ...


21

Are you restricted to using an angled corner? If not, a box would be much more simple & sleek. Otherwise if you are stuck using the angled corner, aligning to the top right rather then center is probably your best bet!


19

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


17

I think your fellow developer is somehow correct. To be honest, as far as I know there's no "set in stone" rule for this, so nobody is right or wrong as an absolute. However, depending on implementation, you may end with browsers rendering your font as integer numbers. Which isn't a big deal on modern screens, but some older screens will start to add ...


16

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


15

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


14

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


14

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


14

No single answer Unfortunately, there's no single value of line-height (leading) that is optimal for all situations. An optimal range is probably roughly 1.3–1.7, but to select an optimal value requires we look at the specific font in use and the width of lines of text (among other things). In Troy Templeman's excellent article Basic Rules of Good ...


14

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


13

For mobile layouts, font sizes are typically set in EMs rather than pixels so that the font size is relative, ready to respond to different screen parameters. 16px is ideal font-size below this font-size would be challenging for user to read.


12

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


11

One option you may try is to make the dark area variable, depending from the number of digits. This way the dark area will also work as a visual cue, indicating the magnitude of the number.


10

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


10

Everybody is saying that it simply won't work, but to be honest I think that's a gross generalization, because I have seen designs where it definitely works. So, this got me thinking about defining some generic rules how to figure out when to use it and when not to use it. When you can use it When other elements make clear that the header is the header. ...


10

The problem is based on an error. That headings in HTML have anything to do with design and they do not. The HTML heading elements are for document structure for the computer and have nothing to do with design or visual output. That browsers will give different font sizes is based on CSS and not HTML at all. So this is a design question more than a UI/UX ...


9

It's important to specify what dimension you're trying to optimize. Are you looking to reduce size horizontally (shorter lines) or also vertically? If you are looking to optimize horizontal width, you should be looking for a condensed typeface. Arial Narrow and Helvetica Condensed are two obvious options, but I don't find them very readable and they come off ...


9

In my opinion, using the native fonts of the OS you're targeting is best bet. Those fonts have been designed for legibility on the screen for that particular platform, and they will also feel natural to the daily user since he's already used to seeing them on the whole environment. Segoe UI was designed for Windows 7 and above if I'm not mistaken.Lucida ...


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


8

At the recent Usability Week put on by NN/g in Seattle in November 2012, this subject came up. They said that their research showed that hardly any users increase or decrease font size by any method other than native browser zoom functions. They said in their studies it was very clear that users who have trouble reading small text are very used to using ...


8

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


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

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


8

W3Recommendation on font-size has a note that says (emphasis mine): To preserve readability, a UA applying these guidelines should nevertheless avoid creating font-size resulting in less than 9 pixels per EM unit on a computer display. 12 pixels, according to this article from "think with Google" on Mobile. Pick the right font. Your minimum font ...


8

Sounds like your coworker is using Material Design guidelines; they recommend not going smaller than 12sp (scalable pixels) for mobile. Whether this is a good practise to follow depends on two factors: the font you use and the device that the website will be viewed on. Different fonts have different characteristics when it comes to readability, while each ...


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