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
Is it possible to dynamically scale text size based on browser width?
Hell yeah!
Set your <body>
font size when the window is resized with a little javascript. (I've used jQuery for convenience here:
$( document ).ready( function() {
var $body = $('body'); //Cache this for performance
var setBodyScale = function() {
var scaleSource = $body.width(),
scaleFactor = 0.35,
maxScale = 600,
minScale = 30; //Tweak these values to taste
var fontSize = scaleSource * scaleFactor; //Multiply the width of the body by the scaling factor:
if (fontSize > maxScale) fontSize = maxScale;
if (fontSize < minScale) fontSize = minScale; //Enforce the minimum and maximums
$('body').css('font-size', fontSize + '%');
}
$(window).resize(function(){
setBodyScale();
});
//Fire it when the page first loads:
setBodyScale();
});
Because your font size is set in em's (perfect) adjusting the percentage font-size of the body element acts as a universal 'text zoom'. This will scale any text set in em's - if you want to be more specific, you could set the percentage font-size on a <div>
that surrounds just the elements you want to scale.
Here's a quick example: http://www.spookandpuff.com/examples/dynamicTextSize.html
Pure CSS to make font-size responsive based on dynamic amount of characters
Note: This solution changes based on viewport size and not the amount of content
I just found out that this is possible using VW units. They're the units associated with setting the viewport width. There are some drawbacks, such as lack of legacy browser support, but this is definitely something to seriously consider using. Plus you can still provide fallbacks for older browsers like so:
p {
font-size: 30px;
font-size: 3.5vw;
}
http://css-tricks.com/viewport-sized-typography/
and
https://medium.com/design-ux/66bddb327bb1
Increase font-size to full width of screen
in gumroad its not a text its an image
but if you want to control your font size you can usefont-size: clamp(min size , 2vw, max size)
for example font-size: clamp(14px, 2vw, 20px)
you can read more here https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()
Dynamically Resize Text Based on Container Width
window.resize
is the correct event but it doesn't fire on page-load. You can however just add .trigger('resize')
to your code to make it fire on page-load:
$(window).bind('resize', function(){
var containerSize = $('.container').width(),
textPercentage = 0.17391304347826086956521739130435, /* 40/230 */
textRatio = containerSize * textPercentage,
textEms = textRatio / 14;
$('.container h3').css(fontSize, textEms+"em");
}).trigger('resize');
You are going to want to run this code after document.ready
to make sure the width you are getting for the container is correct. You could also place this code at the bottom of your HTML document (which you should do with or without the document.ready
event handler) which will make sure the elements are available when you run this code:
//wait for `document.ready` to fire
$(function () {
//cache the .container and H3 elements
var $container = $('.container'),
$h3 = $container.find('h3');
//bind event handler to `window.resize`
$(window).bind('resize', function(){
//get the width of the container
var containerSize = $container.width(),
textPercentage = 0.17391304347826086956521739130435, /* 40/230 */
textRatio = containerSize * textPercentage,
textEms = textRatio / 14;
$h3.css('fontSize', textEms+"em");
}).trigger('resize');
});
Notice that I cached the H3
element(s) so it/then don't have to be selected every resize
event, because when you actually re-size your browser there are tons of these events that fire.
Related Topics
Finding Matches Between Multiple JavaScript Arrays
Upload File with Ajax Xmlhttprequest
Filter Array of Objects with Another Array of Objects
Dynamic Keys for Object Literals in JavaScript
Access Iframe Elements in JavaScript
Fetch Request to Local File Not Working
JavaScript "Addeventlistener" Event Fires on Page Load
Why Is Value Undefined at .Then() Chained to Promise
Jquery Ajax Call to PHP Script with JSON Return
How to Hide Form Code from View Code/Inspect Element Browser
Reactjs: "Uncaught Syntaxerror: Unexpected Token <"
How to Determine Which HTML Page Element Has Focus
How to Draw a Line Between Two Divs
How to Create Checkbox Inside Dropdown