Font scaling based on width of container
If the container is not the body, CSS Tricks covers all of your options in Fitting Text to a Container.
If the container is the body, what you are looking for is Viewport-percentage lengths:
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly. However, when the value of overflow on the root element is auto, any scroll bars are assumed not to exist.
The values are:
vw
(% of the viewport width)vh
(% of the viewport height)vi
(1% of the viewport size in the direction of the root element's inline axis)vb
(1% of the viewport size in the direction of the root element's block axis)vmin
(the smaller ofvw
orvh
)vmax
(the larger orvw
orvh
)
1 v* is equal to 1% of the initial containing block.
Using it looks like this:
p {
font-size: 4vw;
}
As you can see, when the viewport width increases, so do the font-size
, without needing to use media queries.
These values are a sizing unit, just like px
or em
, so they can be used to size other elements as well, such as width, margin, or padding.
Browser support is pretty good, but you'll likely need a fallback, such as:
p {
font-size: 16px;
font-size: 4vw;
}
Check out the support statistics: http://caniuse.com/#feat=viewport-units.
Also, check out CSS-Tricks for a broader look: Viewport Sized Typography
Here's a nice article about setting minimum/maximum sizes and exercising a bit more control over the sizes: Precise control over responsive typography
And here's an article about setting your size using calc() so that the text fills the viewport: http://codepen.io/CrocoDillon/pen/fBJxu
Also, please view this article, which uses a technique dubbed 'molten leading' to adjust the line-height as well. Molten Leading in CSS
CSS - calc() on font-size - changing font size based on container size
Calc is still in it's infancy in terms of support & usefulness. By design it's really just there for doing simple math, like (100% - 20px). It really won't do the math complex enough to make the calculations possible. You are looking for a solution that will size the text based on the amount of space the letters physically take up horizontally (which depends on the letter's individual sizing) and the amount of space available for the containing div.
CSS is abstracted away from the actual element's contents, and it has no way to really discern if something currently "fits" or not. It can layout guidelines for how to handle things when they do or don't fit, but it can't adjust itself according to the content like you want it to. (It's not just you, we've all faced this problem or a similar version of it at some point.)
Check out Chris Coyer's post on what Calc might be handy for: http://css-tricks.com/a-couple-of-use-cases-for-calc/
how to set font size based on container size?
You may be able to do this with CSS3 using calculations, however it would most likely be safer to use JavaScript.
Here is an example: http://jsfiddle.net/8TrTU/
Using JS you can change the height of the text, then simply bind this same calculation to a resize event, during resize so it scales while the user is making adjustments, or however you are allowing resizing of your elements.
How to correct CSS font-size calculation to limit font size
To create responsive typography with a min and max you need to use a combination of calculations and media queries. Below is an example with a min font size of 12px at 600px down and a max of 20px at 1000px and up.
:root {
font-size: 12px;
}
@media screen and (min-width: 600px) {
:root {
font-size: calc( 12px + (20 - 12) * ( (100vw - 600px) / (1000 - 600) ) );
}
}
@media screen and (min-width: 1000px) {
:root {
font-size: 20px;
}
}
Here is a pen I created a couple years ago for some more detail in responsive text (also uses typescales): https://codepen.io/WebNesting/pen/gwyvYg
So with your numbers, it would be:
.header-top-container h1 {
font-size: 14px;
}
@media screen and (min-width: 300px) {
.header-top-container h1 {
font-size: calc(14px + (28 - 14) * ((100vw - 300px) / (1600 - 300)));
}
}
/* WITHOUT THE BLOCK BELOW, THE FONT WOULD CONTINUE TO GROW */
@media screen and (min-width: 1600px) {
.header-top-container h1 {
font-size: 28px;
}
}
Related Topics
Compass: Generate Sprites, Plus Width/Height on Each Images in the Sprite
How to Change Border Color of Required Input Fields
IE8 Doesn't Zoom Content When Applying a CSS Zoom Value to a Div
Does @Import in CSS Result in Additional Http Requests
How to Select a Text (Without Tag) in a Div Using CSS Selector
How to Create Vertical Text Using Only CSS
Polymer @Import Theme File with :Host in Styles Has No Affect
Vertically Center HTML Element Within a Div of Dynamic Height
Mime Type Error When Adding a CSS File to Angular
Want to Make the Whole Page in Grayscale Except Specified Div
How to Route to CSS/Js Files in MVC.Net
Material-Ui Makestyles Cannot Read Property 'Down' of Undefined
How to Remove Bullets from Numbered Toctree in Restructured Text
Hover Property in CSS Doesn't Work When I Have an Inline Styles