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
Related
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>
I need to know the current em, based on the context, inside of a css style sheet. Is that possible?
I want to calculate the number of pixels for two items: one is in pixels and the other is em:
--item-min-width: 250px;
--gap: 3em; (note: this might be different and is not known until runtime)
--max-number-items: 3;
Now I need the total width of those three items, plus the gap. Something sort of like this (which of course won't work because I can't add pixels (item-min_width) and em (gap)):
#media (min-width: calc(
var(--max-number-items) * var(--item-min-width) + var(--gap)
))
The goal is to convert the gap (3em) to pixels dynamically. Is it possible to figure out the current em of an element?
You don't need to convert units, calc can handle that:
calc(100% + 10px)
calc(2rem - 1%)
calc(var(some-var) + var(another-var))
https://developer.mozilla.org/en-US/docs/Web/CSS/calc
To get the em value in px. Set default font size for the body (browsers have the default font size of 16px).
EM value compound with nesting of elements, refer the MDN docs(link given below).
So, let say you have set the default font size of 16px.
1 em = 16px.
Now you have a gap of 3em. So 3*16px = 48px.
3*250px + 48px = 798px.
Please have a look at this article from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/font-size#Ems
and this article from w3schools(Set Font Size With Em): https://www.w3schools.com/css/css_font.asp
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.
I'm experiencing some pretty bizarre behaviour from my CSS font-size rules. I'm probably doing something silly myself [this must be the case ;-) ], but I hope someone can point it out for me.
Currently (for testing purposes) I have only one rule for font-size in the stylesheet, that regulates ALL font-sizes, and this is it:
p, div, a, span {
font-size:3em;
}
Now I know 3em is a pretty big font-size (for all I know it should correspond to a width of about 3*16 = 48 pixels on the big screen browsers), but what you see in reality is simply ridiculous. Have a look: http://www.svvreewijkdevaan.nl/nl/
If you think the font size in the menu (which you see on top of the page) is big, scroll down a bit, and you'll find that the letters become so huge that they're not really recognizable as letters anymore.
And in fact, looking in the Firefox inspection tool, I find that '3em' letters are computed to have a font-size of (get this) 34992px, i.e. almost 35 thousand. What does that even mean?
In fact, the real (displayed) font-size (i.e. the width) seems to grow - at the very least - exponentially with the specified em number, rather than proportionally. So for example, if I replace 3em by 3.5em, the displayed font-size becomes at least two times as wide (actually more). Conversely, if I reduce the specified font-size to 1em I get the - normal and expected - size of about 16px. But if I make it 0.7em, the width reduces to maybe 2px (absolutely unreadably small).
Why don't the real (displayed) font-sizes grow proportionally with font-size (in terms of 'em') specified in my stylesheet?
em is based on the font-size of the parent element. Now, if you nest elements for which you have set the font-size in em into each other – those values get multiplied.
Either don’t nest element with font-sizes set in em that much;
set it for less elements (for example only for div or p, and let the descendants inherit the size);
or look into the rem unit instead.
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.