Cannot get font-size smaller than 14px

HTML & CSS
1

Hi there,

For some reason I am unable to reduce the font size of an element to less than 14px.

I’ve tried adding !important, but it’s not working. I cannot see any other conflicting or overwriting statements, so wondered if anyone knows of any other things that could be stopping this?

Could it be the font I am using? I am using the Google font “Lexend” (https://fonts.google.com/specimen/Lexend) which allows it to go as small as 8px in their previewer, so a bit confused as to why font-size: 12px for example isn’t applying.

Any general suggestions that would cause this?

Thanks!

2

You wouldn’t happen to have your browser set to a minimum font size of 14px, would you?

1 Like
3

Nice one! Yes it is set to that, however I have seen smaller fonts on other website and I am sure I have set it smaller using other fonts previously. I never touch the browser settings so not sure how I’ve done that.

Is there a way to force the font size and overriding the user’s browser settings? I know that’s not great, but need to.

4

Well, for your own browser, you can set it to whatever you like, but there is (I hope) no way to override someone else’s preferences. If, say, I’ve set my minimum font size to 24px because I can’t see anything smaller, what would be the point in presenting me with text I couldn’t read?

3 Likes
5

No you can’t override the browser settings for the minimum font size. Thankfully :slight_smile:

2 Likes
6

Thanks for the replies.

I have now posted a message in the UX forum based on this issue:

Basically I am trying to find a way to accommodate content longer than it’s container.

7

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.