Following these articles:
CSS font-size: em vs. px vs. pt vs. percent
16 Pixels
For Body Copy. Anything Less Is
A Costly Mistake
I'm about to use the base size of:
body {
font-size: 100%;
}
and use this as the base paragraph font size, resulting - on desktops - in 16px, unless the user changes his browser or system settings.
The site's layout is responsive and I'm concerned about how it's going to look on mobile devices too - including small smartphones and high-DPI displays.
If I just specify 100%, what will this result with on mobile devices? Can I expect the browsers to choose the optimal font size for the given screen size and DPI?
From my experience, most modern smartphone browsers are pretty good at setting a suitable font size if you set it to 100% - but you can never be sure.
If it was me, I would add that extra layer of protection by manually setting a font size YOU like for smaller screen resolutions.
#media (max-width: 767px) {
body {
font-size:18px;
}
}
Of coarse, you'll have to test it out on a mobile device to get that perfect font size you're looking for.
Adam.
Related
I am currently attempting to get a website to display some plain text with appropriate font sizes on both a desktop and mobile browser. Trying to choose a font size for both results in the text being too large on desktops and too small on mobile because of the different displays.
I have attempted using a media query to change the font size based off of the screen width.
#media screen and (max-width: 900px) {
body {
font-size: 2em;
}
}
This "works", but it comes with the caveat that resizing a browser window on a desktop will result in changing the font size if the width goes to or below 900px. I never want the font size to respond dynamically to the browser size. It should always stay the same size regardless of any window resizing that occurs. I will not consider vh and vw as solutions because of this requirement.
While searching around for solutions, I came across using dpi in media queries as an alternative. Since I assume the vast majority of mobile devices have a higher dpi than most desktop monitors, that could be a good way to change the font size on mobile.
#media screen and (min-resolution: 150dpi) {
body {
font-size: 2em;
}
}
But what if there is a monitor that does surpass this dpi? This works for the 3 devices I am testing with, but I cannot be sure that it will work in more cases.
Overall, my aim is to get something like the setup Wikipedia has. https://en.wikipedia.org/wiki/Dots_per_inch The font size does not change when resizing the browser, it displays at a readable size consistently on both mobile and desktop browsers, and I assume it will work quite nicely on a high dpi monitor as well, but I have no way of testing that.
So what is the appropriate way to get the functionality I am looking for?
After writing this question but before posting, I kept on searching for a solution and I found it. It's actually very simple, but easy to miss. I hope posting this helps others in the future. It all boils down to this line within the head of the html.
<meta name="viewport" content="width=device-width, initial-scale=1"/>
It's explained nicely here.
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
Average font-size for resizing screen you can get by using stylesheet calculator and properties like:
vh - viewport height
vw - viewport width.
Your font size will take same size on your view, but it can be unreadable if you don't handle small sizes layout.
For regular size: font-size: calc(.5vh + .8vw);
For large size: font-size: calc(5vh + 5vw);
google says "because css pixel ratio" but I can't figure out what that is, or why it exists.
Why am I adding metadata that tells the browser to render the screen at <2/3rd the screen's resolution? Images (as far as I can tell) don't get resized, so why is everything else? and why this so common?? wts is going on??
You need to understand why you are adding certain codes into your file. You said you have <meta name="viewport" content="initial-scale=1"> in your code. What initial-scale means is, upon page load, the page will be viewed at 100% zoom level. It's not about filling 1 CSS pixel to 1 hardware pixel. It's about filling 1 CSS pixel to 1 device-independent pixel.
As defined in Google's developer reference:
Device-independent pixel (dip): A scaling of device pixels to match a uniform reference pixel at a normal viewing distance, which should be approximately the same size on all devices. An iPhone 5 is 320 dips wide.
Hardware pixel: A physical pixel on the display. For example, an iPhone 5 has a screen with 640 horizontal hardware pixels.
Are the hardware pixels on your phone different from those on your PC monitor? Yes, they are different in terms of size (pixel density). Assuming your 21" monitor and 5" phone screens both have 1920px x 1080px screens, so obviously the pixel density is much higher on the phone's screen (and much smaller pixels) and it would not be wise to show up the webpage using the ratio of 1 CSS pixel to 1 hardware pixel since everything will be too small on the phone screen.
So what if you don't want responsive website design, but to fit the whole page into the small screen like what you see on a PC monitor? All you need to do is to remove the <meta name="viewport" content="width=device-width, initial-scale=1"> line and browsers will automatically fit the page onto the screen by default, by zooming out (i.e. initial scale will not be 1). Developers only add this line of code if the website needs to be responsive, and has the relevant CSS media queries for that.
While Billy's post did answer the question, and it does a good job of describing the general mechanism, the question did rise how to set the webpage to full screen in browsers that don't zoom out all the way by default. That is, use every pixel on a 1920×1080 screen as if it was a 1920×1080 desktop monitor.
Well, unfortunately there is no failsafe way to do that, but you can get close if you include some device specific #media queries.
html, body {margin:0; width:1920px; height:1080px; font-size:16px;}
#media (-webkit-min-device-pixel-ratio:1.5) { body {zoom:.66666667} }
#media (min-device-pixel-ratio:1.5) { body {zoom:.66666667} }
#media (min-resolution:1.5dppx) { body {zoom:.66666667} }
#media (-webkit-min-device-pixel-ratio:2) { body {zoom:.5} }
#media (min-device-pixel-ratio:2) { body {zoom:.5} }
#media (min-resolution:2dppx) { body {zoom:.5} }
#media (-webkit-min-device-pixel-ratio:3) { body {zoom:.33333333} }
#media (min-device-pixel-ratio:3) { body {zoom:.33333333} }
#media (min-resolution:3dppx) { body {zoom:.33333333} }
#media (-webkit-min-device-pixel-ratio:4) { body {zoom:.25} }
#media (min-device-pixel-ratio:4) { body {zoom:.25} }
#media (min-resolution:4dppx) { body {zoom:.25} }
This will (attempt to) zoom the scale of the page so that the number of CSS pixels is the same as the number of hardware pixels.
Of course if you take this approach, note that you will have to add new media queries with higher resolutions as time progresses.
And it will fail on devices that are not 1920×1080 pixels.
A better approach would be to not contemplate the hardware resolution at all, but just work with what you have. Don't use pixels, use percentages or vw and vh for measurements. 50vw, not 960px, is the horizontal centre of the screen. That way, your webpage wil display correctly on any device, no matter its characteristics. No scrolling or pinching needed!
You may find you have to differentiate between landscape and portrait modes with #media queries, but that depends on the contents of the page.
I'm new to web design. I have a decent understanding of CSS/HTML, but I'm conflicted on how to style fonts to fit mobile devices.
Currently I use px to make my fonts larger or smaller on my web pages. However, doing this will make my fonts look very small on high px/inch devices.
How can I make my fonts appear legible on these high resolution screens without making them look super small?
For example:
.thisClass{
font-size:12px;
}
is what I am used to using. On my laptop it looks fine, but I have no idea how it looks on tablets because I don't own one D:
Check this out from CSS3...
1vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
According to this link https://ux.stackexchange.com/questions/7820/font-size-for-mobile-sites, font-size:medium; is a flexible solution, and many people there have experimented for optimal size if you know more about the target device.
By the by, this isn't the best way to solve this problem, but since you say you're new to mobile web design I'd also like to point you towards the #media css selector https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries It lets you set different styles depending on things like device type, screen size, phone orientation... I imagine it might come in handy in your future :)
I've got a couple of problems, Using media queries I change the position and font size for mobile/tablet and desktop, the problem is, if your changing the window size the font size and a couple of social icons are taken out of place.
So mobile 320, tablet 768, desktop 960-1280+ are the sizes I've designed for.
#media only screen and (max-width: 320px) {
.footer-top ul.links li {
font-size: 0.60em;
}
ul.home-social {
width:73%;
margin-left:auto;
margin-right:auto;
}
}
This is the example of font change and social icon position, but if the window is resized by the user the icons are out of place. Any Idea's ? I just want it to flow well or is there no point?
First of all I just want to say one thing, that the sizes of phones, tablets, etc are all extremely relative. While you may have designed something for 320 and for 768 the varying sizes of all of the different phones and ALL of the different tablets is going to make it impossible to make a pixel-perfect design for each.
As far as the position of the elements and font sizes being affected by the user changing the size of the window and it being incorrect, you'll have to find a way to align them so that they work well within whatever size they are currently being viewed at. Instead of having text next to the icons and messing with trying to get both Alignment and Font-Size to work based on a lot of screen sizes, try breaking them out so that the icons and the text are on two different horizontal lines, possibly?
In my mobile app I use kind of big fonts for example:
<b style="font-size:100px; font-family:Segoe UI">text</b>
When I test it on my phone it looks great but on a smaller phone it's still the same size and it is too big.
What css settings should I use to get the same size on every phone?
Media queries won't work. Yes you can have varying font size based on the screen size(which is pixel size and not physical size, therefore it would not be the same size on two devices with same physical size screens but with different pixel density). Your goal is to have text that is at the same physical size across all devices that have same physical screen size regardless of pixel density.
Nowadays mobile phones are fitting Ultra HD resolutions in palm size screens whereas older phones had much lower pixel density.
There was no solution to this problem until recently. Recently CSS3 added support for what they call 'Viewport Sized Typography'. It allows you to set the sizes of things relative to physical screen size. It is explained here.
Having text with same/similar sizes is desirable across devices and you don't get that by default. It is not because of smaller devices have less or smaller physical pixels, but is due to scaling that happen on those devices in order not to break pages that are mostly designed for larger desktop screens.
For example, iPhone 5 has 1136x640 physical pixels, but using chrome's developer tools' device toolbar you may see that some elements appear to be much larger than that (say 1300x900). That is because of the zoom out scaling that browsers apply by default. In this case, CSS pixel size would become much smaller than actual pixel size. Imagine seeing a desktop size page in a smart phone, just much smaller.
If you don't want that happen, you need to tell the browser explicitly not to mess with scaling (in your pages header):
<meta name="viewport" content="width=device-width, initial-scale=1">
If you see text equally big across devices, you may have something like that and need to just remove it to see it smaller on smartphones.
You should be using Media Queries for different device widths.
#media only screen and (max-width: 768px) {
b {
font-size: 20px;
}
}
#media only screen and (max-width: 320px) {
b {
font-size: 10px;
}
}
And so on...
I have started using REM and EM to achieve this.
I don't know whether a phone browser's default font size changes based on screen size or specific to device. So what I do is I set the HTML to a font size relative to an average of the height and the width of the device using vw and vh like so
HTML{font-size: calc((1vh+1vw)/2)}
By using REM and EM from here you get a more consistent layout and font size across the board.
This works well for mobile devices as they all tend to be the same sort of aspect ratio. I would recommend changing how you implement this for tablets and desktops as their screen ratios tend to be quite different. Of course, use media queries to have separate styles for these.
I would like to say that I just started using this method so would love to hear reasons why I totally should not be using it!
Use #media Queries and set different fonts for different resolutions
Example
#media all and (max-width: 1200px) and (min-width: 800px) {
/* Change Resolutions Here */
b {
font-size: 12px;
}
}
Good Read On Media Queries
Alternatively, you can have a look at https://github.com/modularscale/modularscale-sass
It can quickly get very complicated to set a lot of breakpoints to cater for every single mobile device and I've obtained very good results with modular-scale.
Also, setting the font-sizes in EMs or REMs is the way to go if you want to be fully accessible/flexible.
The answers are all correct but I find the combination of viewport size related but limited to between two values ideal by using clamp() For example:
font-size: 1rem;
font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
This will smoothly size the text but not under 1rem (typical 16px) or over 1.25rem (typical 20px). It can be used on the size of icons or font-awesome chars or svg vectors. I use one of the many online clamp calculators to spare me the maths. For instance this one.