How to set min-font-size in CSS

html css font-size
nrofis picture nrofis · Jun 1, 2014 · Viewed 111.1k times · Source

I want to set a minimum font size to every element in my HTML page.

For example if there are elements with font-size less then 12px, then they will change to 12px.
But if there are elements with font-size grater then 12px, they will not change.

Is there any way to do it with CSS?

Answer

Marc Ruef picture Marc Ruef · Jun 15, 2016

In CSS3 there is a simple but brilliant hack for that:

font-size:calc(12px + 1.5vw);

This is because the static part of calc() defines the minimum. Even though the dynamic part might shrink to something near 0.

Related questions

Is there such a thing as min-font-size and max-font-size?

I'm trying to make a font in a div responsive to the browser window. So far, it has worked perfectly, but the parent div has a max-width of 525px. Resizing the browser further will not make the font stop resizing. …

Read More
How can I set the font-family & font-size inside of a div?

This is my complete test html: <!DOCTYPE> <html> <head> <title>DIV Font</title> <style> .my_text { font-family: Arial, Helvetica, sans-serif font-size: 40px; font-weight: bold; } </style> </…

Read More
How To Get Font Size in HTML

I was reading a question on here trying to get the font size of a text. The answer they gave was to get the pixel size using a measure method. All i want to be able to do is get …

Read More