I would like to know if there is a CSS command allowing to increase the font size when the viewport width becomes smaller (like a reverse clamp method).
In fact, I want to do the opposite of what clamp does (as the first entry is the MIN value).
I searched on internet without success.
Thank you in advance for your feedback.
You can use calc to subtract from a font-size based on the width of the viewport which will give you the inverted scaling you desire.
You can then still use clamp as desired with a min/max value.
Run the snippet below as full page.
h1 {
font-size: clamp(10px, calc(100px - 5vw), 100px);
}
<h1>Heading 1</h1>
Related
I'm using a technique for scaling text based on view width, here. It uses a simple formula to smoothly scale within a set range (min/max) of font sizes, depending on view width within a set range (min/max). It works very well.
But I'm confronting an issue with this and other techniques for fluid font size. If I set letter spacing to constant value, it may breaks down visually. 1px letter spacing for a font displayed at 20px might not be ideal for when it displays at 50px.
There are also situations where a user might change the font size. It would be the same issue.
Is there a solid way to deal with this issue that is fluid, to make letter-spacing proportional to the font size?
Try using em units to control the the spacing.
here is a possible reference: https://cssreference.io/property/letter-spacing/
I tried using calc, along with view width:
letter-spacing: calc(1px + (10 - 1) * ((100vw - 320px) / (1440 - 320)));
It works, but I think using ems is better.
Recently I've discovered this site: https://varagon.com/
They are using some interesting calc formula for calculating window size based font size. Formula is as following:
font-size: calc(22px + 54 * ((53vw + 53vh) - 600px) / 820);
For screen dimensions 1920x1126 px computed font-size value is 88.8006px.
Could you explain what every value in formula is for?
EDIT:
Maybe I didn't express my question properly - I know what VH and VW are, my question is about whole calc formula. Ie. why are they adding 22px to sum of half of heigh and width, etc. :)
I tried to reverse engineer/math it, unsuccessfully for now.
In the site, they have used Viewport-percentage lengths.
To read about this click here.
The values are:
vw (1% of the initial containing block width)
vh (1% of the initial containing block 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 of vw or vh)
vmax (the larger or vw or vh)
If we take a vw, if the width of the viewport is 200mm, the font size
of h1 elements will be 16mm (i.e. (8×200mm)/100).
h1 { font-size: 8vw }
From this, we can see that, when the viewport width increases the font-size increases.
The font-size of the website has been calculated from the above-mentioned concept.
I found possible answer - this formula is some kind of 'vmax' polyfill (as for lack of IE11 support for this value).
Polyfill that I found looks very similar formula I was asking about:
https://gist.github.com/uto-usui/ea9836aa92d334e7694fb31d8e93a4f4
I'm hoping to use VW units to size my typography, but when doing so the text is huge and obviously larger than the viewport width. Essentially I want my text to be responsive within the parent .container, so the text is never cropped or overflowed as it would be if using a static size unit like px or em?
HTML
<div class="container">
<h1>Responsive Typography!</h1>
</div>
CSS
.container {
width: 100%;
background: red;
height: 100%;
}
h1 {
font-size: 40vw;
}
FIDDLE
Your Fiddle is rendering correctly.
font-size, classically, referred to the width of a capital letter M. Let's go with that for now.*
1vw is 1% of the viewport width.
Thus, font-size: 40vw roughly means "render this text such that the width of a capital letter M would be 40% of the viewport width". In other words, each individual character is going to be pretty huge.
It's not going to break to a new line because it's all one word, and CSS only breaks between words by default. (To break on characters within a word, you would use word-break: break-all on the element. It usually looks terrible, though.)
You confirmed in a comment that you're trying to scale up the font size in your header so that the full text in it is some percentage of the viewport width. Depending on your circumstances, you can either
use a smaller font-size, still in vw, and accept that text won't always be a predictable fixed width; or
try something like FitText to dynamically resize the font.
It's a shame, but there isn't a way to do quite what you want with pure CSS; as is often the case your choices are to compromise on your design goal or use some clever JS/hacks to achieve it.
* A note on font-size: what I said above isn't really how font-size is worked out; it just happens to be close enough for most fonts and it makes my answer easier to read. The actual situation is more complicated.
A more accurate rule-of-thumb is the body height, i.e. the vertical distance from the top of an ascender (upper part of letters like b, d and h) to the bottom of a descender (lower part of letters like g, j and p) on the same line. However, even this is very course and often wrong; it ultimately comes down to the font metrics, and will vary significantly between fonts.
I am pretty new to CSS, and would like to know if there is/are some sort of rule/rules of thumb for determining when to use different units to define layouts. Currently I have everything defined in %, because I thought that'd be good for window resizing. That is not the case, text starts to overflow, images get screwed around and so on.
Any help will be appreceiated.
Typically, I use the following
Layouts - Pixel (Unless something needs to be a % width/height)
Fonts - Pixel (Sometimes % for accessibility, but it is a nightmare to maintain)
Generally speaking, you can use pixels most of the time. The font issue is a more complex one. For instance, if you want the "increase font-size" features to work within a browser without resizing the rest of the page, you need to use %'s. However, when using % font sizes, a child element always inherits the parents font-size, so you get the following:
body { font-size:87%; }
h1 { font-size:87%; }
This will mean that the h1 is actually 87% of 87%. This can be quite annoying. As you end up with percentages > 100%. It gets very thick fast, and is best avoided.
I'm not sure if em's work in the same way, I've never looked into them in great detail.
Using percentages to have a layout work in different size viewports is a very advanced technique, and is often done dynamically using javascript. Until you are more familiar with CSS, and can look at working percentage based layouts and understand enough to replicate it, you are better sticking to PX.
If you are going the javascript route it is really quite simple. For a start use jQuery as it makes resizing your layout a breeze compared to trying to do it with native javascript. Then $(window).height(); gives you the height of the viewport; $(window).width(); gives you the width. You set a default px width for your container, and then use percentages for all other block level elements (containers, within the container, sidebar, main etc) and do this:
function percentagize() {
var height = $(window).height()-100;
var width = $(window).width()-20;
$("div#container").css({
'height' : height+'px',
'width' : width+'px',
'margin': '0 auto'
});
}
$(document).ready(function() {
percentagize();
$(window).bind('resize','percentagize');
})
This should give you an idea: http://w3schools.com/cssref/css_units.asp
% is not explained properly on that page, but it means x% of the containing block.
You should use ems for fonts so that they are always relatively sized... by default they are 1 em or 16px... you can set play with this by setting body { font-size: 75% } which makes 1em the equivalent of 12px The PxtoEm calculator is great. From here you can do things like
h1 { font-size: 3em }
p { font-size: 1em }
now no matter what you set that body font size to the h1 tag will always be 3 times larger than a paragraph. It gives more flexibility and keeps yout type hierachy proportional.
For layouts it really depends on the layout type... for the classic fixed with central column then use pixels.... for fluid or adaptive layouts then use percentages (or a mix of fixed width, i.e. left hand nav bar andpercentages)
Use em as much as possible, since this is the most maintainable. The em unit depends on the font size of the current element, so if you change the base font size, em-units scale along.
Use px in screen style sheets when you need a fixed size. Typically you would specify the size of the base font in pixels. Image sizes should also be specified in px, since an image should not scale up or down just because you change a font - it will just make the image blurry. Also border thicknesses should probably be specified in pixels, since you don't want it to depend on font sizes.
Use pt, pc, in, cm, mm only in print media style sheets. You probably wouldn't to mix metric and imperial in the same style sheet, so decide on either in or cm/mm.
% is tricky since it means something different depending on the property. For font-sizes, 100% = 1em, so its just a matter of preference if you like % or em. (I prefer em for font sizes, since % have different meaning in other contexts.) It is not affected by window scaling though. The font size doesn't scale with the window size, and neither does em or % units.
For width and height on boxes, % refers to percent of the size of the parent box, which for the root element is depending on the window size. This is much less useful than it sounds! For example if you have a flow of text without any specified width, the lines will become too long to read comfortably. If you specify the width of the text box in em's you can give it a nice readable line-length, on any screen. But if you specify the width in % it will scale with the size of the window, which means it can still be too long on some screens and to short on others. Scaling with the window size sounds good in theory, but is rarely what you want.
We have a CSS file with some rules similar to the following:
.directory-result ul
{
margin-top: 20px;
width: 60em;
}
.about-text
{
margin-top: 1em;
margin-bottom: 1em;
}
Everything is working ok, but we're wondering specifically about the inconsistencies between the margin-top values. One is 20px and the other is 1em.
Which is the best one to go with? What are the points I should consider when deciding which to use? Thanks.
em units are used for better scalability of the page when the size of the elements depend on the page's scale. It's especially important for old browsers (e.g. IE6) and mobile platforms.
px units are used for absolute values, while em is relative to the font size of the particular element.
1em means one font-line, e.g. you have a box with font-size 12px that means that 1em will be equal to 12px
Also, using px seems easier because you know the exact value, but em units inherit the value of their container.
<p>Text</p>
<div class="box">
<p>Lorem</p>
</div>
p {
font-size: 1.2em;
}
.box {
font-size: 1.2em;
}
In this case, the first <p> will have font-size equal to the basic font-size * 1.2, and the second <p> will display with font-size * 1.2 * 1.2.
They're simply two different ways of measuring. Em is linked to the font size (traditionally, 1em is roughly the width of the letter M in a given typeface), while px is pixels.
If you build everything using em, everything will scale accordingly when the user adjusts their font size (e.g. using IE's Page > Text Size menu). It also makes it easier to work to a vertical rhythm.
Pixels are better when you want to build something "pixel-perfect". Be aware that a CSS pixel doesn't always equal a screen pixel - mainly because modern browsers and mobile devices allow for zooming. This isn't usually a problem though because the entire page is scaled accordingly.
Whatever you do, make sure you're consistent throughout - it makes life much easier later on.
The ems unit is relative to the current font size in the browser. So if the user increases the font size*, or if you change an element’s font size in the CSS, the margins should still look “right” in proportion to the text.
*(This ceases to matter if the user zooms the page instead of increasing the text size (as is the default in Firefox and Chrome now, and is an option in IE).
If you're using a margin to position something a set number of pixels away from something else, then you should obviously stick with pixels.
Also here is a very good in depth tutorial:
px – em – % – pt – keyword
In this example directory-result ul represents a block - some sort of list/menu where pixel dimensions are quite important. We can’t always rely on em which defines the text size, because if we need 20px space due to some background image – well, we need 20px, no compromises.
Note that you can't create and save the image i.e. 10em wide, therefore I see no reason why should I use different units on a web page. It just creates confusion and later on it is very difficult to maintain the layout.
There is a one place though, where using em is advisable – I’m talking about text blocks. I’m guessing in your code about-text is placed within other text where adding top/bottom margin of 1em (height of text) makes sense. It’s like in any text editor (i.e. line spacing in MS Word) – text looks best when spacing between lines is defined by multiplying the height of text
So in my opinion – everywhere where you deal with design and you use images by default measured in pixels – usepixels for all padding/margin.
Everywhere where you deal with text inside a text block, and you want to add even spacing between the text nodes – useem.