Have text scale up in size to fit the container
One thing that I have done that isnt perfect but can get the job done in some cases is to use a @media rule for screen sizes smaller then X pixels, set the font size smaller or larger.
h2{
font-size:25px
}
@media screen and (max-width: 850px){/* for screens smaller then 850px, set the font size smaller */
h2{
font-size:19px;
}
}
Of course this would only work assuming the texts container size is based on the window size in some way.
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
How to scale text size compared to container
Here is a way to set the text to fit the width of the container. It works by incrementally increasing the font size of a hidden div until it is smaller than the width of the container for which you want to text to fit inside. It then sets the font size of the container to that of the hidden div.
This is a little inefficient and could be optimized by caching the old width of the container, then incrementing from the old font size to either larger or smaller values based on how the width of the container changed.
jsFiddle: http://jsfiddle.net/sarathijh/XhXQk/
<div class="scale-text styles">
This is a test of scaling text to fit the container. Lorem Ipsum Dolor Sit Amet.
</div>
<div id="font-metrics"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
var fontMetrics = document.getElementById('font-metrics');
var scaleTexts = $('.scale-text');
$(window).on('resize', updateFontSize);
updateFontSize();
function updateFontSize()
{
scaleTexts.each(function()
{
var $scaleText = $$(this);
fontMetrics.innerHTML = this.innerHTML;
fontMetrics.style.fontFamily = $scaleText.css('font-family');
fontMetrics.style.fontWeight = $scaleText.css('font-weight');
fontMetrics.style.fontStyle = $scaleText.css('font-style');
fontMetrics.style.textTransform = $scaleText.css('text-transform');
var fontSize = 50; // max font-size to test
fontMetrics.style.fontSize = fontSize + 'px';
while ($$(fontMetrics).width() > $scaleText.width() && fontSize >= 0)
{
fontSize -= 1;
fontMetrics.style.fontSize = fontSize + 'px';
}
this.style.fontSize = fontSize + 'px';
});
}
/**
* A simple caching function for jQuery objects.
*/
function $$(object)
{
if (!object.jquery)
object.jquery = $(object);
return object.jquery;
}
</script>
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.
Scale texts of different lengths to fit container width
How about this?
$(document).ready(function() {
var divEls = $('.container div');
for(var i=0; i<divEls.length;i++){
var span = $(divEls[i]).find('span');
var fontSize = 16;
while (span.width() < $(divEls[i]).width()) {
span.css('font-size', fontSize++)
}
// wrap if span exceeds div width
if (span.width() > $(divEls[i]).width()) {
span.css('white-space', 'pre-wrap');
}
}
});
.container {
width: 400px;
border: 1px solid green;
padding: .5em;
}
.container>div {
border: 1px dotted gray;
white-space: pre;
}
<div class="container">
<div><span>Lorem ipsum dolor sit amet.</span></div>
<div><span>Lorem ipsum.</span></div>
<div><span>Lorem ipsum dolor sit amet, consetetur sadipscing elitr,<br />sed diam nonumy eirmod tempor invidunt<br />ut labore et dolore magna aliquyam erat, sed diam voluptua .</span></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Related Topics
Change the Default Responsive Navbar Breakpoint
How to Load CSS Rules Dynamically in Webkit (Safari/Chrome)
Different Behavior of Flexbox with (Overflow-Y) Scroll on Safari, Firefox and Edge VS Chrome
Apply Style to First Element in a Row of Similar Elements
Is the 'Frosted Glass' Effect Implementable with CSS Only at This Time
Unicode Character for "X" Cancel/Close
Twitter Bootstrap White Gap on Right Side of Page
CSS Vertical-Align: Text-Bottom;
Why Selecting by Id Is Not Recommended in CSS
Concatenate String in Less in Loop
Cross-Browser Support of 'Page-Break-Inside: Avoid;'
How to Draw a Trapezoid-Like Card
Using Bootstrap Icons with Button_To "Delete" in Rails 3
Find Element That Is Causing the Showing of Horizontal Scrollbar in Google Chrome