I have a website 960px in width with little content, when viewed on resolutions over 1400 > there is too much white space. I want to increase font-size on some elements so it fills the empty height on higher resolutions. How can I achieve this without making it responsive?
Thanks.
Media queries are a great option, but you may also want to try using EM or %. Both of these are relative values depending on screen size or PPI. Generally you can start from 0.8em for your <p> tag and go from there.
You can also try to fiddle around with line-heights but I am unsure of how exactly you could differentiate them without media queries.
EXAMPLE
p {
font-size: 0.8em;
line-height:1.2;
}
Related
So I've applied for a front end job few months ago and got interviewed and they've given me a test task. One of the requirements of this task is that they want the website to be infinitely variable scalable like this one.
To quote the task description it says:
If you scale down the browser window, everything fits perfectly because everything scales in the same ratio. For that you have to work with percentage rates instead of px rates.
Now, my problem is I am a PX guy, I mean I build all of my projects using px and not that confident on using different unit such as em, vw, rem etc. Well I've use other unit like vh but I don't use it often.
So what's the best way to learn or any roadmap that'll help me to migrate from px to percentage. Should I just use tools like px to em?
Practice does make perfect
The short answer is... Start practicing using percentage-based units as that's how you'll learn the little catches. This is a good career move anyway as the idea of matching pixels to a design was crushed long ago with HiDPI screens, mobile devices, etc all rendering pixels differently.
Getting Started
Practically, you need a place to start and that means learning a few new CSS tools.
First
Use rem as a substitute for pixels.
Unlike an em that's relative to its parent font-size, a Rem is relative to the font-size of the root element (usually body) which means its GLOBAL. You can use rems everwhere (font-size, margin, padding, position, etc) and they're ALL based on the root size.
So let's say the root font size is 16px (typical browser default). That means 1rem = 16px. Now a 16px base isn't overly useful when you're doing math in your head. Jonathan Snook wrote about why this works years ago but the basic formula is set the base font size to 62.5% (of 16px) this means that 1rem = 10px and it's much easier to do the math.
Here's what that looks like in code:
body {
font-size: 62.5%;
}
h1 {
font-size: 2.4rem;
/* 2.4rem = 24px */
}
p {
font-size: 1.2rem;
/* 1.2rem = 12px */
}
.padding-left {
padding-left: 2rem;
/* 2rem = 20px */
}
You get the idea...
Fun tip: once you like the layout you can change the body font-size and make everything bigger or smaller. This is useful for things like a small screen where you want the fonts to be a bit larger
Next
CSS Calc() Is your friend. It's designed to help you do math operations on mixed unit values. For example, the browser can then do this type of math: 33.33% - 200px.
.element {
width: calc(33.33% - 20px);
/* maybe you need responsive columns with 10 px of padding on either side */
}
Finally
Start doing all your layout in percents. For example instead of a 3 column layout set to 300px wide (not responsive). You should make them 100/3 or 33.3333333% wide. Percents like this are always based on the parent so 100% = parent's width (regardless of the parent's units).
As a side note, I rarely need to use vh/vw, not because they aren't useful but in general, elements overflow their window in very predictable ways and percents are easier to wrap your head around.
vw and vh are going to be your best bet if it needs to be a percentage of the screen. rem and em are still relative to a starting point (i.e. body { font-size: 16px; } and scaled from there. vw and vh do have some issues on smaller device screens though, but it looks like your demo website has this issue. You can fix this with media queries, but it doesn't look like your example did, it "infinitely" scales as you mentioned.
I would like know why Bootstrap chose to use rem and em instead of px for Bootstrap 4.
We can see an example in the variables.scss file within the project:
$font-size-h1: 2.5rem !default;
$font-size-h2: 2rem !default;
$font-size-h3: 1.75rem !default;
$mark-padding: .2em !default;
I couldn't find any explanation by the developers on the web about this. Have they explained why they made this decision anywhere?
REMs are useful almost anywhere size is explicitly set.
With rem, all font sizes are relative to the root element (aka, the
html tag). The reason for this is to make it easier to scale up or down for devices. You could technically change the html tag to a smaller or larger size to scale all font sizes equally – which is a super nice feature.
... [T]he main thing to take-away is everything is dynamic and
relative to the root HTML tag.
For example, change the html css font-size to a different number ...
and watch how the entire grid adjusts and scales.
Source: Scotch.io
It is worth mentioning that Bootstrap 4 kept breakpoints in px and not em. From the docs:
While Bootstrap uses ems or rems for defining most sizes, pxs are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the font size.
I switched to using rems instead of px a while back, I can tell ya it was the best choice.
Rems are 100% scalable, I base all my sizing on what looks good on a laptops and below, then at 1600px media query or greater, adjust the html font size and viola!, the entire site "scales up" 100% proportionally.
I'm starting to incorporated vw now too for section paddings and fonts that need to go big like that found in hero sections, combine this with calc for example calc(3rem + 2vw) and you've got a seriously scalable website with minimal media queries.
When using rems, you need to reset your html font size to 16px.
html {
font-size: 62.5%;
}
now, 1rem = 10px
so sizing everything is super easy to convert.
30px is now 3rem, 25px is now 2.5rem, 15px is now 1.5rem and so on.
Then on larger screens, change the html to say font-size: 70%, and everything will beautifully scale up.
Be sure to use px for media queries like: #media only screen and (min-width: 1680px)
But 'max-width' can be either px or rems, just depends on the design.
I set my wraps now to 90vw, this prevents anything from touching the screen edge and is and 100% scalable.
.wrap {
margin-left: auto;
margin-right: auto;
width: 90vw;
max-width: 145rem; /* or use px depending on the design */
}
You can use % too, but with WP Gutenberg out and their full width sections using vw I can get everything to line up to a perfect grid.
Hope this helps.
The other answers are missing one main point here. It's correct that with rem you can change the font size on the root(usually the html element) to change all website's text's font size. In this sense rem gives flexibility to web designers to change whole websites font size. But this can be achieved with the new css variables as well. E.g.
:root{--my-font: 16px}
div {font-size: calc(var(--my-font)*2)}
There's a second and the more important reason for the use of rem as following:
Second reason: users can just ctrl + to increase the size if they want to, yeah? Yes, they can. But!, there's another scenario that we need to consider. Users can change the default font size of their browser through the browser settings, e.g. in chrome go to chrome://settings/appearance and you can set the root font size for all websites. What this does is all website which have their font sizes in em or rem will get affected but the ones with px font sizes won't be affected. This is another main reason for bootstrap to switch from px to rem units.
Change you browser default font and run the following example to see it yourself:
.one {
font-size: 24px;
}
.two {
font-size: 1.5em;
}
.three {
font-size: 1.5rem;
}
<div class="one">I will stay the same, no matter what default browser font settings are</div></br>
<div class="two">I will change in size if you change your browser's default font size.</div></br>
<div class="three">I will change in size as well just like div.two</div>
Refrences:
https://www.24a11y.com/2019/pixels-vs-relative-units-in-css-why-its-still-a-big-deal/?ref=heydesigner
I have an h1 I want to fit the entire width of the viewport which consists of 13 characters in a monospaced font. After reading the CSS-Tricks article on viewport sized typography it seems like logically if I want to achieve this I simply have to set my h1's styles to:
h1 {
font-size: 13vw;
font-family: monospace;
}
This however is rendering with a bit of space left over (highlight the text to see the white space):
(There would be an image here but I don't have enough rep so click here for the JSFiddle)
I have tried other sizes, font-size: 14vw; is slightly too big, font-size: 13.99vw; seems just right, but strangely font-size: 13.999vw; is still too big?
Can someone explain what is going on here? Why would each character of a 13 character length string in a monospaced font require more than (100/13)% of the viewport width to fit the entire viewport width?
Before I begin I'm just going to say that I'm not going to give you a workaround due to issues I've raised in comments on Stoyan Dekov's answer. Instead I'm only going to answer your question of Can someone explain what is going on here?
font-size != width
The problem here is that you're assuming font-size is the same thing as width. It isn't. The CSS Fonts Module defines font-size as:
...the desired height of glyphs from the font.
This means that font-size is more comparable to height than it is to width.
This isn't specific to the vw unit, either. If you specify a font-size in pixels you'll also notice that the computed width does not match the font-size.
But even then it all depends on which font-family you're using anyway, as the same paragraph continues to say:
For scalable fonts, the font-size is a scale factor applied to the EM unit of the font. (Note that certain glyphs may bleed outside their EM box.) For non-scalable fonts, the font-size is converted into absolute units and matched against the declared font-size of the font, using the same absolute coordinate space for both of the matched values.
The key words here being scalable and non-scalable.
Even if a non-scalable font was being used though, 13vw would not reflect each character's width. This would never work with vw, but it may work with vh but only if the aspect ratio of each individual character matched the screen's aspect ratio.
The problem is if a text is the exact same size as the parent container, it will span across a second line.
body {
margin: 0;
width:100px
}
h1 {
font-family: monospace;
width:100px;
}
That will cause the text to go onto a new line as they are both 100px. That's why 14vw is too big, but 13.99 is just enough: Fiddle DEMO
However, you can use text-align: justify; to achieve what you want.
Take a look at this Fiddle DEMO.
Small question, for which I can't find any answer.
Is there a way to do this?
I have 3 elements with different sizes.
One with 30px, other with 22px and other with 16px.
Now, when using a tablet to check this elements, they go off limits since I need to have my container with fixed height.
Is there a way, using media-queries, to decrease their font-size according to device without doing one by one? Like it's 100% in desktop, 80 in tablet, etc..
Thank you very much.
You can use viewport widths and heights in CSS:
.vwHeight {font-size: 5.9vw;}
A preview of the same would be:
(source: css-tricks.com)
More info on Viewport Sized Typography.
You can use vw , vmax , vmin or em here is many CSS Units which can helps you.
for example:-
.block {font-size: 5vw;}
or
.block {font-size: 5vmax;}
you should go with below link and I am sure it will helps you.
URL
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.