CODEWITHSUNDEEP
htmlcss
pistacchio
pistacchio

Reputation: 58863

Can I set font-size relative to page size?

Is there a way to make font-size relative to the size of the page? Applying percentage as unit refers to the standard font size (like 90% of 12px, not 90% of the page!). This is different from the behaviour of most of the other tags.

Any way to make the page 'scale up and down' also with fonts? Should I rely on em?

Thanks

Upvotes: 28

Views: 51612

Answers (11)

moolsbytheway
moolsbytheway

Reputation: 1291

I know it's already been answered, but i need to share this for future comers, because it took me some precious minutes to figure this out.

So as mr @random said: em as a unit, will do the trick.

If you'd like your page to scale up and down and keep some sort of scale to itself, the boxes and the font, then setting it out in em would be fine.

That method will allow for the scaling of fonts and boxes of the page to grow at a relative size to one another and hopefully not have things falling out of bounds and borders.

Initialise your body with 1em as font-size that means 100%

body {
      font-size: 1em; 
}

Then set your element's font-size as a percentage of it's parent's

.your_element {
 font-size:0.4em /* for example 40% if its parent font-size */
}

Now the magic of @media queries

@media all and (max-width: 767px) {
  body {
    font-size: 0.4em !important;
  }
}

@media all and (min-width: 768px) and (max-width: 1023px) {
  body {
    font-size: 0.6em !important;
  }
}

@media all and (min-width: 1024px) and (max-width: 1199px) {
  body {
    font-size: 0.8em !important;
  }
}

@media all and (min-width: 1200px) and (max-width: 1599px) {
  body {
    font-size: 1em !important;
  }
}

@media all and (min-width: 1600px) and (max-width: 1999px) {
  body {
    font-size: 1.2em !important;
  }
}

@media all and (min-width: 2000px) and (max-width: 2999px) {
  body {
    font-size: 1.6em !important;
  }
}

@media all and (min-width: 3000px) and (max-width: 3999px) {
  body {
    font-size: 1.8em !important;
  }
}

@media all and (min-width: 4000px) {
  body {
    font-size: 2em !important;
  }
}

And Bingo, have a nice day.

Upvotes: 0

EdF
EdF

Reputation: 86

In my view, the range of apparent pixel densities seen by the viewer of a webpage is now massive, from an HTC One held at 12 inches from the face, where there are 5600 pixels/radians to perhaps a 50 inch plasma screen running at 480p, which is about 950 pixels/radians at 4 feet.

Or put it another way a 20px font is nearly 6x bigger in your field of view on that plasma screen than the latest handset.

The solution I cooked up was to set the body font size in absolute pixels as a multiple of the window.screenWidth but constrain it to a minimum an maximum number of units, then use em's for all font sizes after that. The em's+proper use of headings should mean accessibility is fine.

I add this function to the page (or it's JS) to set the size:

function setFontSize() {
    pagesized = window.innerWidth / 30; // Proportionate font size to page
    pagesized = Math.max(pagesized, 14); // Set size to be no less than 14 px
    pagesized = Math.min(pagesized, 30); // & No greater than 30 px
    document.body.style.fontSize = pagesized; // Set body default font size
}

To make this work the following is added to the body tag:

<body onresize="setFontSize()" onload="setFontSize()">

You then just use your CSS (or inline formatting) all based on % or em units and things should scale nicely within those bounds.

Or, in JQuery, you can do:

$(window).resize(function() {
    pagesized = $(window).innerWidth() / 30; // Proportionate font size to page
    pagesized = Math.max(pagesized, 14); // Set size to be no less than 14 px
    pagesized = Math.min(pagesized, 30); // & No greater than 30 px
    $('body').css('font-size', pagesized); // Set body default font size
});

Upvotes: 4

zachleat
zachleat

Reputation: 3327

See the new vh and vw CSS units. Browser support isn't great yet.

http://snook.ca/archives/html_and_css/vm-vh-units

It landed in WebKit recently: https://bugs.webkit.org/show_bug.cgi?id=27160

In browsers that support it, 1 vh is 1% (1/100) of the viewport height, and 1 vw is 1% (1/100) of the viewport width. There are also vmin and vmax units, which represent the smaller of the two and the larger of the two, respectively.

Upvotes: 37

Julian
Julian

Reputation: 2835

Another non-ideal answer is to use a series of css breakpoints like so:

h1 { font-size: 22px; color: orange; }
@media only screen and (max-width: 900px) {
  h1 { font-size: 20px; color: blue; }
}
@media only screen and (max-width: 800px) {
  h1 { font-size: 18px; color: green; }
}
@media only screen and (max-width: 700px) {
  h1 { font-size: 12px; color: red; }
}

http://jsfiddle.net/8RKhp/

Upvotes: 4

user1606423
user1606423

Reputation: 75

You can solve it like this:

jQuery(document).ready(function ($) {

// Dynamisches Skalieren von Schriften
fontSize = function(){
//ww = $(window).innerWidth();
ww = $('.mainhead').innerWidth(); // Width of the Motherelement
one = ww/100; // 1%
multiplcator = one*31; 
$('.mainhead').css({'font-size': multiplcator+'px'});
}
fontSize();



$(window).resize(function() {
fontSize();
});

});

When you now set your Fontsize via css it wokes on all browsers like charm

.mainhead{
width:48%;
font: normal 2em Times, Verdana, sans-serif;

}

Upvotes: 0

william malo
william malo

Reputation: 2506

Heres a little script I made for exacly that (use it as a fallback when vw isnt supported) https://gist.github.com/2475269

Upvotes: 3

Ryan McGeary
Ryan McGeary

Reputation: 239885

Try a jQuery plugin like FitText. It automatically sizes text to fit the width of the parent element.

Another jQuery plugin with the same goal is BigText (demo).

Upvotes: 9

NawaMan
NawaMan

Reputation: 25687

At least for Firefox, 1em can be used to set the font size related to the font size of the parent. So if you set font-size of body to a value that is in ratio to the size of the page. All fonts under body that use 'em' as unit will be in relation to the page.

To do that, you must set the size of the body in relation to the page like height: 100% or width if you want to relate the size to the width.

Then, you will have to constantly synchronize the body height with the font size. This can be done with 'onResize'.

See more detail in the following link.

Upvotes: 2

random
random

Reputation: 9955

No you cannot set the size of the font in a percentage relative to the size of the page.

Sizing in em is based on the size relative to how the font would normally render in 16 point.

If you'd like your page to scale up and down and keep some sort of scale to itself, the boxes and the font, then setting it out in em would be fine.

That method will allow for the scaling of fonts and boxes of the page to grow at a relative size to one another and hopefully not have things falling out of bounds and borders.

Upvotes: 20

Michael Borgwardt
Michael Borgwardt

Reputation: 346260

When you say "relative to the size of the page", what exactly do you mean with "size of the page"?

The browser window? Then your fonts would change size when the user resizes the window - definitely not what anyone would expect, and pretty bad for usability. People don't resize windows to see a larger or smaller representation of the whole site, they enlarge them to see a larger section of the site, and make windows smaller to see a specific small section and have space for other windows next to the browser.

If you mean the size of the screen, that's even worse since it would mean huge fonts on a 30" screen. But people don't buy 30" screens so they can see huge fonts, they buy them to see multiple windows side by side.

All in all, using em or something similay is the only sensible way to make a scaleable website, since it will scale relative to the default size, which is/should be relative to what the user can comfortably read.

Upvotes: -3

Elzo Valugi
Elzo Valugi

Reputation: 27856

I recommend you use YUI reset to unify the font rendering across different browsers. Then check YUI Font Size. After this you can rely on your fonts to display correctly.

Upvotes: 0

Related Questions