118

I have a fluid website and the menu is 20% of its width. I want the font size of the menu to be measured properly so it always fits the width of the box and never wrap to the next line. I was thinking of using "em" as a unit but it is relative to the browser's font size, so when I change resolutions the font size stays the same.

Tried also pts and percentages. Nothing works as I need it...

Give me a hint of how to proceed, please.

11 Answers 11

84

New Way

There are several ways to achieve this.

*CSS supports dimensions that are relative to viewport.

  1. 3.2vw = 3.2% of width of viewport

  2. 3.2vh = 3.2% of height of viewport

  3. 3.2vmin = Smaller of 3.2vw or 3.2vh

  4. 3.2vmax = Bigger of 3.2vw or 3.2vh

    body
    {
        font-size: 3.2vw;
    }
    

see css-tricks.com/.... and also look at caniuse.com/....

Old Way

  1. Use media query but requires font sizes for several breakpoints

     body
     {
         font-size: 22px; 
     }
     h1
     {
        font-size:44px;
     }
    
     @media (min-width: 768px) 
     {
        body
        {
            font-size: 17px; 
        }
        h1
        {
            font-size:24px;
        }
     }
    
  2. Use dimensions in % or rem. Just change the base font size everything will change. Unlike previous one you could just change the body font and not h1 everytime or let base font size to default of the device and rest all in em.

  • “Root Ems”(rem): The “rem” is a scalable unit. 1rem is equal to the font-size of the body/html, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt. Root Ems are scalable in nature, so 2em would equal 24pt, .5em would equal 6pt, etc..

  • Percent (%): The percent unit is much like the “em” unit, save for a few fundamental differences. First and foremost, the current font-size is equal to 100% (i.e. 12pt = 100%). While using the percent unit, your text remains fully scalable for mobile devices and for accessibility.

see kyleschaeffer.com/....

5
  • font-size: 3.2vw worked in my case. Though not sure about browser support.
    – manpikin
    Mar 2, 2019 at 9:13
  • "An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt." Actually, em is relative to the font-size of the container. This can lead to unexpected behavior when the container also has it's font size set in em... To get size relative to the document font, use rem. Apr 26, 2020 at 12:22
  • If you use vw/vh it will invalidate any font zoom that the user has set in the browser settings.
    – Paul G.
    Sep 15, 2021 at 17:10
  • Amazing! This is well supported in my experience
    – user14518353
    Nov 2, 2021 at 2:18
  • This should be the accepted answer in 2022.
    – LIvanov
    Nov 27, 2022 at 9:43
69

You can use em, %, px. But in combination with media-queries See this Link to learn about media-queries. Also, CSS3 have some new values for sizing things relative to the current viewport size: vw, vh, and vmin. See link about that.

3
  • 41
    vw, vh, vmin rock this answer. Oct 21, 2013 at 19:57
  • 2
    This is the correct answer now, given that viewport units are supported by every* browser: caniuse.com/#feat=viewport-units.
    – cazzer
    Jun 5, 2016 at 3:42
  • 1
    dont forget vmax
    – live2
    Oct 23, 2019 at 21:08
54
@media screen and (max-width : 320px)
{
  body or yourdiv element
  {
    font:<size>px/em/rm;
  }
}
@media screen and (max-width : 1204px)
{
  body or yourdiv element
  {
    font:<size>px/em/rm;
  }
}

You can give it manually according to screen size of screen.Just have a look of different screen size and add manually the font size.

3
  • 20
    Important Note: You need to add this to your html head. <meta name="viewport" content="width=device-width" /> Also you can use max-width instead of max-device-width for a more 'responsive' feel.
    – Sheharyar
    Jul 18, 2013 at 21:25
  • @user65165 I didn't get what you trying to say? Mar 1, 2017 at 2:51
  • max-device-width it not working. Only max-width works when I adjust the browser screen. Jun 20, 2018 at 19:28
20

I've developed a nice JS solution - which is suitable for entirely-responsive HTML (i.e. HTML built with percentages)

  1. I use only "em" to define font-sizes.

  2. html font size is set to 10 pixels:

    html {
      font-size: 100%;
      font-size: 62.5%;
    }
    
  3. I call a font-resizing function on document-ready:

// this requires JQuery

function doResize() {
    // FONT SIZE
    var ww = $('body').width();
    var maxW = [your design max-width here];
    ww = Math.min(ww, maxW);
    var fw = ww*(10/maxW);
    var fpc = fw*100/16;
    var fpc = Math.round(fpc*100)/100;
    $('html').css('font-size',fpc+'%');
}
1
  • interesting solution, is not bad. I've tested i've learned by doing how i use, but Whit this i fixed on 10px size text on maxW size windows, it's ok? but this? what is "16" what is this? var fpc = fw*100/16; Sep 6, 2016 at 12:10
11

Not using media queries is nice because it allows scaling the font size gradually.

Using vw units will adjust the font size relative to the view port size.

Directly converting vw units to font size will make it difficult to hit to the sweet spot for both mobile resolutions and desktop.

I recommend trying something like:

body {
  font-size: calc(.5em + 1vw);
}
Almost before we knew it, we had left the ground.

Credit: CSS In Depth

1
  • Great solution! I've tried using vw but it would make the text unrealistically small when the screen is in mobile resolution, but this is perfect! Jan 1 at 21:10
7

Not sure why is this complicated. I would do this basic javascript

<body onresize='document.getElementsByTagName("body")[0].style[ "font-size" ] = document.body.clientWidth*(12/1280) + "px";'>

Where 12 means 12px at 1280 resolution. You decide the value you want here

5

You might try this tool: http://fittextjs.com/

I haven't used this second tool, but it seems similar: https://github.com/zachleat/BigText

4

This worked for me :

body {

  font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum 
viewport width]) / ([maximum viewport width] - [minimum viewport width])));

}

Explained in detail here: https://css-tricks.com/books/volume-i/scale-typography-screen-size/

3

This best worked for me like this (where .5 is the font size scaling factor)

font-size: calc(.5 * (1.5vh + 1.1vw));

Since screens are generally more wide than they are tall, I used a 1.1:1.5 ratio.

I noticed that when I use this formula the font size stays exactly the same no matter what level of zoom I use.

2

I've created a variant of https://stackoverflow.com/a/17845473/189411

where you can set min and max text size in relation of min and max size of box that you want "check" size. In addition you can check size of dom element different than box where you want apply text size.

You resize text between 19px and 25px on #size-2 element, based on 500px and 960px width of #size-2 element

resizeTextInRange(500,960,19,25,'#size-2');

You resize text between 13px and 20px on #size-1 element, based on 500px and 960px width of body element

resizeTextInRange(500,960,13,20,'#size-1','body');

complete code are there https://github.com/kiuz/sandbox-html-js-css/tree/gh-pages/text-resize-in-range-of-text-and-screen/src

function inRange (x,min,max) {
    return Math.min(Math.max(x, min), max);
}

function resizeTextInRange(minW,maxW,textMinS,textMaxS, elementApply, elementCheck=0) {

    if(elementCheck==0){elementCheck=elementApply;}

    var ww = $(elementCheck).width();
    var difW = maxW-minW;
    var difT = textMaxS- textMinS;
    var rapW = (ww-minW);
    var out=(difT/100)*(rapW/(difW/100))+textMinS;
    var normalizedOut = inRange(out, textMinS, textMaxS);
    $(elementApply).css('font-size',normalizedOut+'px');

    console.log(normalizedOut);

}

$(function () {
    resizeTextInRange(500,960,19,25,'#size-2');
    resizeTextInRange(500,960,13,20,'#size-1','body');
    $(window).resize(function () {
        resizeTextInRange(500,960,19,25,'#size-2');
        resizeTextInRange(500,960,13,20,'#size-1','body');
    });
});
0
<script>
function getFontsByScreenWidth(actuallFontSize, maxScreenWidth){
     return (actualFontSize / maxScreenWidth) * window.innerWidth;
}

// Example:
fontSize = 18;
maxScreenWidth = 1080;
fontSize = getFontsByScreenWidth(fontSize, maxScreenWidth)

</script>

I hope this will help. I am using this formula for my Phase game.

1
  • There is a typo in the function's parameters it must be "actualFontSize" not "actuallFontSize". Jan 25, 2021 at 7:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.