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 ...
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 ...
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 ...
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 ...
15
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-...
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 ...
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 ...
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:...
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 ...
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♦
- 37.6k
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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'...
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.
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
2
votes
Bigger font sizes trend
I completely disagree. Books have been written since the dawn of time (exaggeration yes) in fonts about 10 to 12 point text. It makes reading easier because you can take in more words at the same time....
2
votes
Minimum font size for mobile view
This depends to the highest degree on two parameters: The font you use and the device that the app will be viewed on.
Font: Different fonts have different characteristics when it comes to readability....
2
votes
Is the new Apple Music with big fonts good from a usability perspective?
Let's not overthink this.
Larger fonts do increase usability but larger fonts don't always mean, "look at me!"
You notice the bottom navigation bar? The icons in it are pretty small and the text is ...
2
votes
Font-sizes smaller on mobile, yes or no?
What is the physical size of a single pixel?
On a 15 inch 1366×768 px laptop screen, a single pixel should be about 0,2341 mm wide.
On a 5 inch 1280×720 px phone screen, a single pixel should be about ...
2
votes
Comfortably legible base font-size?
The Web Content Accessibility Guidelines recommend that any web font sizes be adjustable by the user.
For large fonts WCAG says:
"The actual size of the character that a user sees is dependent both ...
2
votes
Accepted
Standard font size for non-Latin scripts
Among the most widely used writing systems in the world, Chinese characters (Hanzi) - in their simplified variant as used in mainland China - have the highest graphical density.
So to ensure that a ...
Only top scored, non community-wiki answers of a minimum length are eligible
Related Tags
font-sizes × 83font × 31
typography × 12
website-design × 10
accessibility × 10
mobile × 7
legibility × 7
responsive-design × 5
readability × 5
text × 4
usability × 3
gui-design × 3
buttons × 3
icons × 3
ios × 3
e-commerce × 3
css × 3
size × 3
forms × 2
web-app × 2
layout × 2
design × 2
mobile-application × 2
mobile-web × 2
labels × 2