Say you have a Web page which:
Uses a single font: * { font-family: SomeFont }
The style sheet is huge and made by someone else, so you don't know it in detail
Font sizes may be set using any known technique (px, em, rem, ex, %, etc.)
When you change the font to * { font-family: NewFont }, the new font appears 20% larger than the original, breaking a lot of layout.
Evidently, there is some inconsistency in the actual size of different fonts, so you can't just switch fonts and expect the new font to stay without the boundaries of another font.
Is there a simple way to compensate for this without having to manually set new font sizes for all tags, using only a single statement of pure CSS, something like body { font-size: 80% }.
Related
I was recently delivered a Photoshop Mockup that was designed for an iPhone X. The resolution is 1125px x 2436px # 72ppi. I am trying to convert this to CSS and am starting with the fonts.
For example, the title text of my mockup is 60pt/px. When I use this as the CSS font-size though, it is wayyy to large. I tried changing the image size in Photoshop to be 1125 x 2436 # 458ppi in hopes it would correct the font sizes but the font size doesn't actually change which is really confusing to me.
Can anyone tell me what I am missing here?
Normally when doing this, I do not go by the exact font sizes given in the psd, because they are always slightly off and don't account for dynamic page and container sizes. Instead, pick the smallest font size for the psd and set that as the default font size for the whole page in the body tag. Then make everything else relative to that (in em, not px), based on their relative sizes in the psd. That way, you can finish the rest of the page with an approximate font size, and then go back later and adjust the single font size after the fact to whatever looks most like what you encountered in the psd.
Try assigning the size of the font using px, You convert fonts to px and em here
https://www.joomlasrilanka.com/web-design-development-blog/web-design-font-size-measurements-convert-points-pixelsems-percentages-web-designing/
You can select a text layer from your mokeup. and right-click on this text layer then you will see several options, but you need to click on "copy CSS". Then your text will convert to CSS.
For Example:
Python_vs_PHP {
font-size: 56px;
font-family: "Montserrat";
color: rgb(0, 0, 0);
font-weight: bold;
line-height: 1.2;
position: absolute;
left: 307.359px;
top: 51.801px;
z-index: 7;
}
i am noticing in my web app that the same input form font size, currently set to 17px, reads smaller on chrome compared to firefox. i've attached a screenshot.
is there a more elegant method to resolve this than simply using
/*chrome*/
input {
font-size:17px;
}
/*firefox*/
#-moz-document url-prefix() {
input {
font-size:15px;/*reduce font size to match what is seen in chrome*/
}
}
I don't know what font you're using (or platform (Mac vs Win makes a difference too) , but some browsers render fonts using CLEARTYPE subpixel rendering, some use QUARTZ subpixel rendering (making appearance differ), then others use standard antialias-ing.
A good way around this is to use font-smoothing css in your html or body css:
html {
font-family: /*yourfont*/;
-webkit-font-smoothing: antialiased;
}
Read more about it and see more examples on Max Voltar's website
Also note that using em is preferable to using px for measuring your font. Large font sizes are especially harmed by pixelation if you don't use font smoothing, so in order to keep accessible text especially, it's better to use ems (this way you can still use large type sizes).
Is there any system independent way in CSS to obtain a standard-text font size from the browser, something that would be suitable for, say, a blog post?
I thought that em would do this, but when I set font-size : 1 em; I get a standard text font size on desktop and something extremely small on mobile.
I understand that sometimes the true DPI might be unknown to the OS. But on a mobile device, shouldn't the browser have some rough idea of how big readable text has to be? And shouldn't there be a way to obtain this information?
If you want the standard system font size, you'd just do this in your CSS:
html {
font-size: 100%;
-webkit-text-size-adjust: 100%;
}
It's a best practice to define your font sizes in relative units (percentage, em) whenever possible so that they scale appropriately according to the target device's built-in settings.
If you're using em's then you first need to define a base value for the font. Ex.:
body { font-size: 16px }
Now 1em = 16px.
Most browsers have a default user-agent font-size of 16px but you shouldn't rely on it. Set the base value then start using em's.
I have observed some rather inconsistent HTML page rendering behavior when CSS line-height property is set to normal. I have also found a blog post by Eric Meyer where different inconsistencies of line-height: normal; are discussed, here is just one quote:
Here’s the punchline: the effects of declaring line-height: normal not only vary from browser to browser, which I had expected—in fact, quantifying those differences was the whole point—but they also vary from one font face to another, and can also vary within a given face.
In my case i observed that adding some Unicode symbols, for example the envelope symbol "✉", changes the line block height if line-height is set to normal. Setting line-height: 1.2; fixes the problem.
My question is: is there any reason at all to use line-height: normal;? It behaves so unpredictably.
In principle, a normal value for line-height (either via defaulting, or by explicit setting) is “normal”: browsers are expected to use a value that is suitable for the font being used. This variation should not be a surprise: it’s implied in the definition.
This is supposed to help with a problem like this: you declare font-family: a, b, c, d, sans-serif, but you don’t know which of the specific fonts (if any) is available in each computer, or what the default sans-serif font might be. These fonts might require different line heights, for good appearance. The browser knows which font it is using, so it can pick up a line height for it, from its internal table.
On the practical side, browsers might not select the value well; it tends to be generally a little too small. On the typography side, line height should be selected on the basis of several considerations, not just font face but also the type of text (e.g., texts with a lot of diacritic marks require larger line height) and especially the measure (column width, line length): long lines require larger line height.
So in general, it is best that the designer sets the line height, with due consideration of the different aspects.
This also avoids the problem you describe: when a line contains glyphs from different fonts, each font may have a different default line height associated with it. For example, the envelope symbol is included in a few fonts only, so the odds are that the browser is forced to pick it up from a font different from the one you have declared.
This is what causes uneven line spacing when you mix fonts. It’s not the height of the glyph that matters but the line height of its font. For example, adding a mere period “.” in Cambria Math font, when available, causes huge line spacing—unless you set line-height to a specific value.
is there any reason at all to use line-height: normal;
Yes - the property is there so you can use it when you specifically have to reset line-height to browser default in case you've set it somewhere on parent element.
Why and when you would want to do that depends on what you are implementing and whether or not you care about crossbrowser pixel perfect designs or not.
"normal" is the default value for "line-height". You explicitly declare line-height: normal to over-ride.
Example:
h1 {
line-height: 150%;
}
h1.normal {
line-height: normal;
}
If you look at the above snippet I have declared a line-height of 150% for h1 tag. In-case I want a particular h1 tag to behave normally [browser specific line-height], then I over-ride it using "normal"
Its true the normal line height varies on different browsers
My site displays just like I need it to in IE and Opera, but in Firefox I can't use CSS to get font sizes smaller than Firefox's default minimum-font-size. Of course, I can go to Tools → Options and remove this value, but some users will see some of the elements displaced.
I have tried using !important, but it doesn't work, and I can't substitute the images for the text since they are dynamic fields.
Okay. I'm going to explain how you do this, but you need to know a few things first.
1. You shouldn't be doing this.
There is a reason, and a very good one, that the minimum font size setting exists. Simply, with most fonts, it is already a struggle to read anything below 12px, never mind below the default minimum of 9px. If your design calls for such font sizes for anything but an extremely restricted set of circumstances¹, then your design is just bad and excludes a huge category of users.
2. You really shouldn't be doing this.
The web is an intrinsically flexible medium, and a good design must take account of this. Designs that require a fixed font size to work are suitable for print, but they are not suitable for the web. Any designer who cannot work with this requirement does not understand the medium, and no decent PM should prioritise a designer's bad decisions over practicality and usability. You have far bigger, more fundamental problems to deal with if you can't argue against this decision.
3. You really, really shouldn't be doing this.
Depending on your jurisdiction, you may be wandering on a legal grey area. Tiny font sizes are difficult to read, and will make it very easy for your users to miss information—which is especially troublesome if the text at hand is legally significant, such as opt-out information or a disclaimer. You are also treading on thin ice with respect to the accessibility of your site by causing serious problems for people with visual impairments.
How to do it anyway
It is quite easy to make Firefox display fonts at less than the minimum specified size: just use the font-size-adjust property.
Here comes the science bit
Every font has something called an aspect value, which is the ratio between its x-height (the height of a letter x)² and the actual font-size you set. In Comic Sans, for example, this is really big (0.55), as you can tell by how big the shorter letters (a, c, e…) are compared to taller letters (b, d, h…), whereas in Courier New it is a lot smaller (0.43).
This variability can cause some problems. For example, let's say you specify a super-fancy font for your body text, but because you're a good designer you provide several fallback fonts. That's great, but because some of those fallbacks have different aspect values, letters might be smaller and less legible at the size you specified. font-size-adjust allows you to make sure that any fallback has the same x-height as your super-fancy font.
Unfortunately, we can also use it to make text less legible. Let's say your body copy is Segoe UI at 12px:
body {
font-family: "Segoe UI";
font-size: 12px;
}
The aspect value of Segoe UI is almost exactly 0.5, so if you specify that as the font-size-adjust value, your font size doesn't change:
body {
font-family: "Segoe UI";
font-size: 12px;
font-size-adjust: 0.5; /* x-height = 12px × 0.5 = 6px */
}
What happens if we set it to something smaller? Well, the browser will adjust the font size to use an x-height equal to font-size × font-size-adjust. The below, for example, will result in an effective font-size of 6px:
body {
font-family: "Segoe UI";
font-size: 12px;
font-size-adjust: 0.25; /* x-height = 12px × 0.25 = 3px */
}
This forms the basis of our attack. It turns out that Firefox will honour font-size-adjust even if it overrides the minimum font size. (It goes without saying that this is a bug.)
The demo
Try this out in Firefox with a minimum font-size set. It exploits two bugs: the aforementioned font-size-adjust issue and a separate issue with reporting the rendered font size via getComputedStyle.
You need to know the aspect value of the font you are using for this to calculate the right font-size-adjust value, for which this list of aspect values might help you. (Alternatively, try an estimated x-height for fonts installed on your system.)
But wait! There's worse!
The above technique only works in Firefox. It's even easier to override the minimum font size on an element in Webkit, including Safari, iOS Safari and Chrome—just use the non-standard -webkit-text-size-adjust property:
-webkit-text-size-adjust: none;
This is another bug, by the way. text-size-adjust is a non-standard proposal intended to limit the extent to which text-size is automatically inflated on mobile devices. It isn't meant to work on desktop UAs, much less prevent manual text resizing.
Last word: it won't last forever
Bugs get fixed eventually. You are not meant to be able to override the browser's default font size, no matter how much your irresponsible designer and PM want you to. Sooner or later, people will figure out that these properties are being exploited to make the web worse for everybody, someone will land a patch and the fun will be over.
That said, if you are being forced into this, I wholeheartedly advocate a solution that will eventually force the parties involved to rethink their decision.
¹ Hint: if your text conveys any information that is meant to be readable by anyone, ever, then you shouldn't be messing with browser accessibility settings. Legitimate cases include purely decorative effects (complex ASCII art, shape poetry) and document previews.
² More correctly, the distance from the baseline to the median height, which is the height of a letter x in most fonts.
You cannot do it. It's a setting that Firefox provides so that people like us cannot override it with some CSS settings.
You can effectively shrink text below the minimum size using CSS3's transform: scale(x) syntax, where x < 1. This is guaranteed to work in future browsers (as that's the point of scaling), but does come with its own challenges/caveats.
Just in case it might help anyone, I ended up replacing the small text areas, initially in HTML, with SVG zones. I fill these zones with the Raphaël JS library, with code like
logo_text = $j("#logo_text").val();
logo_text_preview_paper.clear();
logo_text_preview_paper.text(0, 4, logo_text).attr({"font-family": 'Helvetica', "font-size": 7, "text-anchor": 'start'});
I did not use an HTML canvas, because of its lack of availability on certain browsers, and because SVG offers a much better user experience on Retina displays.
It might seem overkill to do that, but I was not able to find an easier solution to the Minimum Font Size problem of FF.
In some cases you can use <canvas> element and fillText().
If you set the default CSS font size in your web pages to a percentage ... then through em sizing you can provide cross-browser scalability ... Setting the font size to 62.5% is a basis for rescaling fonts base hx sizes to 10px.
body {
font-size: 62.5%;
}
p {
font-size: 1em;
}
So if you really wanted to make your standard paragraph text say 10px ... You would just state it in your CSS as 1em and it would render as 10px. Please note that if you really want to do this correctly ... you need to do a CSS reset too as you want your display to be consistent ...
Eric Meyers CSS Reset
HTH
you can try the following code
body {
min-font-size: 15px!important;
}
If you set the the font size attribute on the body it should set it as default font size.
body
{
font-size: 12px;
}