Font-size: calc(100% + 0.3vw) Not Working In IE

HTML & CSS
1

Hello

I’m using Font-size: calc(100% + 0.3vw) to calculate font sizes dependent on viewport width, however Internet Explorer is giving me a tiny font size, although I believe that it does support it. I am using IE 11.

Am I doing something wrong or do I need to find an IE workaround?

Thanks
James

2

I have not tried or tested this but I assume that although the newer IE supports both calc and vw, it possibly does not like the two together.
See the Known Issues IE has with calc.
I would not be surprised if you have just found another one based on this.

1 Like
3

I think this is a bug and I don’t think you’ll be able to work around this. Seems IE11 is buggy with calc() on font-size in g eneral.

Even having something like font-size:calc(100%) results in tiny font.

2 Likes
4

Hi there jamesthemonkeh,

I would suggest that you use the “em unit” instead…

font-size:calc(1em + 0.3vw);

coothead

4 Likes
5

Yes ems seem to work in IE11/ edge while percent does not although they are effectively the same thing where font-size is concerned.

2 Likes
6

Be careful with that as mobile browsers actually need bigger fonts rather than smaller fonts for readable text so make sure you have media queries for smaller screens to cater for this. As long as you are starting from a base that is suitable for smaller screens then you should be ok.

1 Like
7

For those interested, there’s a really interesting article here that proposes a way to do this without as much reliance on media queries: http://zellwk.com/blog/viewport-based-typography/

1 Like
8

I see he’s using % in calc.
Did they test in IE?

9

Obviously not lol :smile:

I’ve posted a comment there linking to this thread so coothead can get the glory :smile:

5 Likes
10

<ot>
In Zell Liew’s article, some of his snippits are written in SCSS. Is he being presumptive or are CSS coders expected to have an SCSS compiler on their computers these days?
</ot>

11

Yes seems people have forgotten about real css. :smile:

My comment was pending but seems to have disappeared now. Maybe the link to Sitepoint was seen as spam? Or maybe there’s just a long delay before comments appear.

2 Likes
12

I didn’t pick up on that, he doesn’t mention SASS mixin until the end.

I thought this bit was kind of stupid:-

The first thing I tried to do was to create a <h1> element thats twice the size of the body text. It turned out that it wasn’t straightforward to do so :frowning:

and after some lengthy over-complex attempts says:-

Eventually, the cleanest way I found is to revert to using Rem and Em. Why discard good ol’ units for shiny new ones? :slight_smile:
html { font-size: calc(112.5% + 0.25vw) }
h1 { font-size: 2em; }

Isn’t that the first thing you would try?

But still it’s one way of putting the stops of text getting too small with vw without nedding a query.
I’ve been working on a design with big header text using vw. I had a query either end to put the stops on it, I later removed the top end one so it can go massive on huge screens, why not if it fits?

13

347×292 5.87 KB

One cannot just pop his code into their browser and give it a try. Seems odd to post uncompiled SCSS (unless I’m behind times).

1 Like
14

Ah, yes. Admittedly, I did skim past that first bit about media queries and using vw alone.

15

Can’t believe it @PaulOB! You doing comment spam! :stuck_out_tongue:

7 Likes
16

What I did in the end was use ems for IE only:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .maintext {
    font-size: 1.5em;
    text-align: left;
    line-height: 1em;
}

Thanks for your thoughts.

17

Did coothead’s suggestion not work?

font-size:calc(1em + 0.3vw);
18

You didn’t need to do that as coothead provided a full solution!

1 Like
19

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