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
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.
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.
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).
Heres a little script I made for exacly that (use it as a fallback when vw isnt supported)
https://gist.github.com/2475269
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/
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
});
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.
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.
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;
}
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.
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.
Related
I'm trying to understand why setting a different base font size doesn't affect the EM values for the media queries.
They are acting as the default base font size is 16px, while the rest of the content reacts normally.
Try it yourself:
Media queries in PX:
https://jsfiddle.net/sebtp/n8x0tuvq/5/ [OK]
Media queries in EM:
https://jsfiddle.net/sebtp/n8x0tuvq/7/ [NOT OK]
Media queries in REM:
https://jsfiddle.net/sebtp/n8x0tuvq/10/ [NOT OK]
html {
font-size: 62.5%; /*setting the base font size to 10px*/
}
body {
background: white;
}
span {
font-size:6em; /* 60px, as it should */
}
#media only screen and (min-width: 30em) { /* 480px, should be 300px */
body {
background:red;
}
#media only screen and (min-width: 40em) { /* 640px should be 400px */
body {
background:cyan;
}
#media only screen and (min-width: 50em) { /* 800px should be 500px */
body {
background:yellow;
}
To get font sizes that are relative to the font-size defined in an html rule, you have to use rem units, not em. em is relative to the element itself, and if there is no font-size definition, to the parent/next ancestor which has a font-size definition (which could also be defined in the browsers default settings, BTW).
ADDITION AFTER COMMENT OF OP:
Interesting: Since you define the html font size in percent, obviously the browser continues to treat its internal default setting as the root size (from which it derives the rem unit). If you change the font-setting in the html rule to a px setting, rem units will respond accordingly concerning the font-size, but the browser still keeps using its default font size (16px) for horizontal measuring (at least in Firefox). Have a look here (watch the 12px setting and the comments in the CSS rules): https://jsfiddle.net/zwc00gtk/2/
ONE MORE ADDITION:
For "regular" horizontal measuring, the rem unit works as expected, in the following example the .wrap div with the light-green background is set to width: 40rem, which is calculated as 480px when the font--size in html is set to 12px, and even becomes 400px when font-size in htmlis 62.5% (= 10px)
https://jsfiddle.net/n2dww2mt/1/
So it's only the media queries that won't accept anything else than 16px as the rem unit...
Is there a way to scale down/up all elements including texts, images, etc. depending on the browser width? It is like 'zooming out' using your browser just to avoid the browser horizontal scrollbar.
You can resize images and video with just this css rule.
img, video { max-width: 100%; }
For text, you can work with em's to adjust to the viewport and resolution. You should also set the font size on the html and body element
html {
font-size: 100%;
}
body {
font-size: 1em;
}
/* Adjust the font size here to upscale the font when you've resized the page to 700px */
#media screen and (max-width: 700px) {
html { font-size: 110%; }
}
If you're actually thinking about literally zooming in/out for certain viewports, just use media queries. Like this:
#media all and (max-width: 700px) and (min-width: 400px) {
/* some funky stuff */
}
EXTRA
To smoothen the transition between different viewports, use this css property on the html tag
transition: all 1s ease;
Yes, though it requires JavaScript and doesn't work with all browsers, only those which support CSS zoom (which I know at least Firefox does not). How I do it, is say the standard non-zoomed page width is 1024, I use jQuery with the line
$("html").css("zoom",window.innerWidth/1024);
every time the window is resized (using window.onresize). The site I'm using it on is still non-public so I can't show you the example, but it works pretty well.
Currently, I have a glyphicon set to the font-size 300. However, when displayed on an extra-small screen (phone), I want it to appear at font-size 200. Is there a way to do this?
You should look into media queries.
For a phone, you'd do something like this:
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
.glyphicon {
font-size: 200px;
}
}
Viewport units are also excellent to implement responsive layouts that are a bit more continuous. That is, the screen dimension affects the size of text/image/etc. much more precisely. For my site I used viewport units and aspect-ratio query to adjust the elements sizes. Here's a simple fiddle that uses vh units: http://jsfiddle.net/LKwfs/. To see the effect, change the height of the viewport.
HTML:
<h1>Page Title</h1>
Styles:
h1 {
font: bold 5vh/2 Sans-Serif;
text-align: center;
}
There is a shim for older browsers and it works pretty well: http://html5polyfill.com/.
I am making a website with html5 and css. I am trying to make this website responsive, but I don't know why the size of the font stay the same when I resize the browser window, even when I'm using em or percentages such as: font-size: XXem or font-size: XX%.
How can I make font resizable?
For HTML5 web pages I would highly suggest using Viewpoint Width/Height values. They function similarly to % but are font sizes that resize with the window.
For example...
.some-paragraph{
font-size: 5vw;
}
This would set the font-size to always be 5% of the current viewport width, even on re-sizing!
Learn more here: http://www.w3.org/TR/css3-values/#viewport-relative-lengths
Note: You may need to have this in your head:
<meta name="viewport" content="initial-scale=1">
It's called Responsive
#media screen and (max-width: 1024px) {
your font style goes here
}
#media screen and (max-width: 950px) {
your font style goes here
}
#media screen and (max-width: 650px) {
your font style goes here
}
#media screen and (max-width: 480px) {
your font style goes here
}
Check your media queries, they should be controlling your font size, if you're using responsive techniques.
A code sample would help.
Give rem a shot. Works better than % or em.
http://snook.ca/archives/html_and_css/font-size-with-rem
You should definitely use CSS media queries to style based on a range of screen ratios and specifications, but here's an example using both rem units and jQuery to make the font smaller when you resize the browser width. Fiddle here.
CSS
html { font-size: 90.5%; }
body { font-size: 1.4rem;}
h1 { font-size: 2.4rem; }
JavaScript/jQuery
$(document).ready(function () {
var holdWidth = $(window).width();
$(window).on('resize', function () {
newPercentage = (($(window).width() / holdWidth) * 100) + "%";
$("html").css("font-size", newPercentage)
});
});
and here's an example averaging both the width and height for the new font size percentage:
$(document).ready(function () {
var holdWidth = $(window).width();
var holdHeight = $(window).height();
var holdAverageSize = (holdWidth + holdHeight) / 2;
$(window).on('resize', function () {
newAverageSize = ($(window).width() + $(window).height()) / 2;
newPercentage = ((newAverageSize / holdAverageSize) * 100) + "%";
$("html").css("font-size", newPercentage)
console.log(newPercentage);
});
});
.text {
font-size: 50px;
}
#media only screen
and (min-width : 300px)
and (max-width : 500px) {
.text {
font-size: 20px;
}
}
#media only screen
and (min-width : 500px)
and (max-width : 800px) {
.text {
font-size: 30px;
}
}
</style>
<div class="text">Test Text</div>
you can fix this by using #media query's and a viewport in your css , and add this meta tag to your html:
<meta name="viewport" content="width=device-width,initial-scale = 1.0,maximum-scale = 1.0”>
and with the #media query's and viewport you declare what size you have per screen width using this media query + viewport in css:
#media screen and (min-width: 820px) and (max-width: 920px) {
#viewport { width: 820px; }
// your css for screens between 820 and 920 pixels in width goes here
}
i mostly use the value's : from 20 - 600 , 600-700 , 700-820 , 820 - 920 , 920 - 1200, #media screen and (min-width: 1200px){ #viewport { width: 1200px; }(this last one will set the size for any screen bigger than 1200 px in width so your code for the biggest version goeds here}
So this means you will have 6 times your css code which is adapted will be adapted to the size.
This is called adaptive or responsive design and is pretty easy to do
For more info you might check this http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
This might help. Responsively adjusts the text size, according to the window size, but keeps it just large enough for mobile compatibility
http://typecast.com/blog/a-more-modern-scale-for-web-typography
How are you specifying your baseline font-size (against your html or body tags in your CSS file)? If you're setting this value to a pixel (or other fixed measure) or inheriting a browser default font size your percentage or em values will always be a percentage of these defaults.
The most common approach to building responsive sites is to do a 'mobile first' approach whereby your default style sheet handles the base styling for your site on a small screen, then use media queries in CSS to tweak the styles as screen size increases. Are you using any media queries/breakpoints currently?
font-size: 25vmin;
This was very good resizing font in both height and width.
You dont need anything in the head.
I have text wrapped in <div>s, and would like to make the whole thing fluid including the font-size of the text, i.e. the text resizes itself in response to the size of the containing element.
I came across a Javasript + CSS solution, but just wondering if it is possible to do so with pure CSS?
While Jim has given you accurate information, it strays from the question asked slightly. Responsive design (#media queries) can alter the text according to screen size. From what I understand, you were asking if there is a pure CSS solution for fluid text size (continual resizing of text during window size changes).
Here is a link to css-tricks explanation of new font sizing techniques. Please be aware this is new and older browsers will most likely have some issues, and that even newer ones (Chrome + Safari) are still not bug-free.
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
Edit- added code
Yes, look at CSS 3 media queries. You can provide different style rules depending on the viewport width. This includes altering the font size.
Short Answer
You can't have fluid font sizes, but you will when viewport-percentage lengths are widely available.
Long Answer
You have to understand these two terms: responsive and fluid.
Responsive means you make your stylesheet respond differently to different window sizes. This is done by using CSS Media Queries. While responsive is one of the hippest words in web design, it mostly means hardcoding CSS for different absolute lengths until you drop dead of boredom.
Fluid means you work with relative length units such as percentages. When you work with relative length units, every size is calculated automagically.
Example
Let's say you have a <div> inside the document body and you want it to fill half of the window.
The responsive solution is this:
#media (max-width: 1px) {
body > div {
width: 0.5px;
}
}
#media (max-width: 2px) {
body > div {
width: 1px;
}
}
#media (max-width: 3px) {
body > div {
width: 1.5px;
}
}
#media (max-width: 4px) {
body > div {
width: 2px;
}
}
/* Repeat until you reach gigabytes and hit operating systems' file size limitations. */
And the fluid solution:
body > div {
width: 50%;
}
So?
What limits us today is that there is no wide support for viewport-relative length units. What you can do is drop the whole idea of "pure CSS fluid font sizes" and go responsive.
use calc with media query for a responsive and fluid font
#media screen and (min-width: 25em){
div {
font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800 - 400) );
}
}