Adjusting font size dynamically with CSS

Question

I have the following HTML and CSS codes :

HTML :

<div>
    <a href="#">ITALIANO</a>
    <a href="#">ENGLISH</a>
    <a href="#">FRANÇAIS</a>
    <a href="#">DEUTSCH</a>
</div>

CSS :

div>a{
   margin-left: 30px;
}

div{
   font-size: 28px;
   width: 70%;
   margin: 2% auto;
}

There is no problem at normal zoom. The problem appears when I zoom in and out, as the text gets too big which makes it use two lines, or gets too small. Is there any way to adjust the font size dymamically without JavaScript?

Thanks

you might want to fix up the title of this question as it has nothing to do with what youre asking. also, see this: http://stackoverflow.com/questions/14431411/pure-css-to-make-font-size-responsive-based-on-dynamic-amount-of-characters — Jacob Raccuia, Mar 12 '15 at 16:07

score 2 · Accepted Answer · edited May 23 '17 at 12:28

2

as taken from this SO answer, you can set font size to respond to the viewport width.

p {
    font-size: 30px;
    font-size: 3.5vw;
}

More information can be found at CSS Tricks.

edited May 23 '17 at 12:28

Community

1
1

answered Mar 12 '15 at 16:11

Jacob Raccuia

1,666
1
16
25

ha, I you beat me too it! – Aaron Mar 12 '15 at 16:42

Mugé · Answer 2 · 2015-03-12T17:57:23.190

I was going to suggest (until I saw @Jacob answer on viewport-sized Typography, wouldn't know of any Bugs though). The idea is assign a universal font-size in your html code inside your css code. Base font-size is set to 16px=1em. Then rest of your CSS code font sizes can be in percentage, which will make them responsive according to screen width. For example:

html {
font-size: 1em;
}

div>a{
margin-left: 30px;  <-- I would use left margin as percentage here, which will adjust according to screen width.
    }

div{
font-size: 175%;  <-- this is for 28px
width: 70%;
margin: 2% auto;
}

Adjusting font size dynamically with CSS

2 Answers2