Skip to main content
36 votes
Accepted

Is it a problem if <h4>, <h5> and <h6> are smaller than regular text?

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 ...
Danielillo's user avatar
  • 19.2k
29 votes

Why commonly or frequently used fonts sizes are even numbers like 10px, 12px, 16px, 24px, or 32px?

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 ...
習約塔's user avatar
  • 1,885
23 votes

Why rounding odd font sizes to even?

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 ...
Devin's user avatar
  • 38.1k
21 votes
Accepted

Counter in a corner of a button

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 ...
alexbouchard's user avatar
16 votes

Why rounding odd font sizes to even?

Sans fonts, which are commonly used on screens, are mostly designed to have the same thickness of stems and bars. When the font size is quite small and is odd, like 17px, the font renders in a way ...
Pavlo Grubyi's user avatar
14 votes

Minimum font size for mobile view

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-...
NB4's user avatar
  • 2,501
11 votes

Counter in a corner of a button

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.
DesignerAnalyst's user avatar
10 votes

Minimum font size for mobile view

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 ...
Alvaro's user avatar
  • 16.8k
10 votes

Is it a problem if <h4>, <h5> and <h6> are smaller than regular text?

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 ...
Rob's user avatar
  • 2,833
9 votes

Font-sizes smaller on mobile, yes or no?

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:...
Wendy Wojenka's user avatar
7 votes

Why rounding odd font sizes to even?

This is based more on a very psychological perspective (number psychology to be precise) than it has to do with designs or programming or any other thing. Even numbers sort of has the calmness and ...
Wurah's user avatar
  • 632
6 votes

Is there an optimal font size?

Optimal font size is individual and is set by users' OS/browser. So don't change it. If you need to enlarge font (e.g. headings), do it relatively (e.g. 200% or 2em). Never shrink font size and ...
George Pavelka's user avatar
5 votes

Font-sizes smaller on mobile, yes or no?

Yes, it is a good idea to decrease the font size on mobile compared to on desktop. Generally, you sit further away from the screen when you're viewing a larger desktop / laptop than you do when ...
JonW's user avatar
  • 37.4k
5 votes

Why rounding odd font sizes to even?

There is utterly no (general) reason why even-number sizes will look "better" than odd-number sizes. How these numbers correspond to the degree to which stroke widths and positions line up naturally ...
R.. GitHub STOP HELPING ICE's user avatar
4 votes

How do you choose a font for extremely limited space, i.e. will fit the most READABLE text in the smallest space?

Arial Narrow and Tahoma seems to be the best.
Fubz's user avatar
  • 61
4 votes

Minimum font size for mobile view

There is no definite minimum it depends on the user. (especially if you are concerned with accessibility) Some users will need to increase the font size (and the size they increase to will depend on ...
mmmmmm's user avatar
  • 278
4 votes
Accepted

Does the ® Symbol need to be in a smaller font size than the actual text, similar to Name™?

No. The ® symbol doesn't need to be in a smaller font size than the actual text. In Name™ the trademark symbol ™ is not a smaller font size but a special character which has a shape that is smaller ...
Anvesh Dunna's user avatar
4 votes

Do I need to follow scale while defining typography in design system?

Yes, you should use a scaling system. It's the first time I've come across the measures in your example being used for typography (with the exception of the Golden Ratio), but employing a scaling ...
Devin's user avatar
  • 38.1k
3 votes
Accepted

Choosing font sizes for responsive design

This will very much depend on other factors, such as style, mood, your target audience and so on, but a reasonable choice was always to use 14px for regular text, although nowadays the trend has ...
Devin's user avatar
  • 38.1k
3 votes

Minimum font size for mobile view

It depends on the font. The default browser font of 16px/1em/100% is good for most cases according to The Google Developer's Insights page on fonts(emphasis mine): By default, the browser will ...
topher's user avatar
  • 283
3 votes

Is there an optimal font size?

There are some odd posts and misconceptions in this thread. It appears that many people want to ignore the science and the well researched aspects of how we read and comprehend text. As it happens, I'...
Myndex's user avatar
  • 329
3 votes

How do you choose a font for extremely limited space, i.e. will fit the most READABLE text in the smallest space?

In my experience, Avenir Next Condensed is wonderfully clear, while still taking up very little space. Compared to Arial Narrow, it takes up less space and is easier to read.
McHobbes's user avatar
  • 131
3 votes

How one should know about perfect font size?

Legibility! Font size, weight and colour should reflect its hierarchy as close as possible. When it comes to body text, the most important metric is 'legibility.' For the most body fonts, 14-18 px is ...
Arif Kazi's user avatar
3 votes

How one should know about perfect font size?

Ergonomic criteria suggest that the appropriate font size is dependent on the luminance of the display screen and the importance of the information being presented (Sanders and McCormick, 1993). For ...
Ren's user avatar
  • 3,196
3 votes

Minimal text size in logos

This question needs context to get an ideal answer: building sign, business card, favicon? Anyway, as described in this answer, a logo is no longer a static object, becoming an element adaptable to ...
Danielillo's user avatar
  • 19.2k
3 votes

What is the ideal font size to be used in dashboard?

From a pure usability perspective, I believe the ideal size will be the smallest size that is perceived by your users to be easily scannable and legible. Consider that: Different fonts will render at ...
Ro Achterberg's user avatar
2 votes

How do you choose a font for extremely limited space, i.e. will fit the most READABLE text in the smallest space?

I ran into an issue where font space optimization was an important factor with some software I use on Mac (Soundminer, on OS X Mavericks 10.9.5, but I imagine this could be useful info for other Mac ...
EarHax's user avatar
  • 21
2 votes

Is there an optimal font size / line height ratio?

Here you can find some very good resources about this subject: Best resource: https://developer.mozilla.org/en-US/docs/Web/CSS/line-height Very good example to see the difference between all values ...
Artiom S.'s user avatar
2 votes
Accepted

What is the biggest a font can be for optimal legibility

What would be helpful to the designer is if you can tell them why it appears to be uncomfortably large, in your estimation. Often, I find that it's not the actual point-size of the text alone that ...
Nate Green's user avatar
  • 2,483
2 votes

Icon size inside a button

Icons are meant to be readily recognizable visual metaphors for actions or features. Once the user becomes familiar with the meaning, it's faster to decode (a good) symbol than to read text. Other ...
Stonetip's user avatar
  • 737

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