Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set min-font-size in CSS

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?

like image 830
nrofis Avatar asked Jun 01 '14 21:06

nrofis


People also ask

What is the smallest font size in CSS?

small (13px) medium (16px) large (18px) x-large (24px)

How do I change font size in CSS?

To change the size of your text with inline CSS, you have to do it with the style attribute. You type in the font-size property, and then assign it a value.

What is the minimum font size?

While there is no official minimum font size for the web, it is generally agreed upon that 16px for body text is a good starting point. Of course, some text will be smaller and headings will often times be larger. But, the main body text (like what you're reading right now) should usually be 16px or larger.


1 Answers

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.

like image 184
Marc Ruef Avatar answered Oct 07 '22 16:10

Marc Ruef