I'm creating an HTML/CSS site and I have the font size adjusted the way I want it when I look at the site on Firefox in Windows (which is what I'm developing on). But when I look at the site in OS X (either Safari or FF), the font size is too big. Not massively bigger, but bigger than my client wants. But if I reduce the font any more, it's going to be too small for Windows machines.
I'm specifying all font sizes in ems in my CSS doc.
I realize that different browsers and platforms render things differently, and there's no way to control exactly how the page will look. But this seems like a pretty big issue and I'm wondering if there is some simple solution that I should know about. And if not, what is the complicated solution?
Thanks in advance.
Use pixel values instead of ems.
Related
Goal
My goal is to make our WebApp more accessible to dynamic font sizes. Especially for accessibility reasons, where people set bigger font sizes.
Context / Progress so far:
The WebApp is used on desktop and within our native Apps as a WebView. Our target audience uses mainly:
Safari desktop browser
Chrome desktop browser
Safari on mobile devices (iOS) as a WebView
Chrome on mobile devices (Android) as a WebView
So far I found out, that the 'normal' way to do this, is by setting font-size: 100% on root/html level and then reference it via rem (or through em but that sounds a bit hard to maintain on a multi level architecture).
The problem is, that this does not work for the Safari WebView case. Here it seems necessary to read a special variable, which I found on this Thread: How to get the accessibility font size for iOS and Android in Xamarin.Forms so I can change font-size in a HTML WebView?
Now it really starts to get interesting, because using this value gives different values depending on is it Safari Desktop or Safari WebView, while Chrome of course does not know this value and uses its 'normal' 100% value. Here is a list of what I debugged, using normal font sizes:
Chrome: 16px
Safari Desktop: 13px (with -apple-system-body)
Safari WebView: 17px (with -apple-system-body)
The Problem
My goal is to have one consistent UI across the browsers, so if I would just use those values combined with rem I would get a way smaller text size on Safari than on Chrome for example.
My main question is:
Is there a more elegant way to solve the dynamic font size issue, while keeping a consistent UI across browsers? Or is there an elegant CSS / LESS solution towards unifying the above values to one value, while keeping it reactive to system font settings?
Not desired solution:
The only solutions I can think of, would be reading out those values with javascript, detecting the browser, normalising it accordingly and setting it back. But I would like to avoid that solution, because it seems quite unstable to me, especially if maybe at some point Apple updates Safari to use different standard font sizes.
On my GNU/Linux box running KDE, I've set the DPI value of X11 by using the command
xrandr --fbmm 332x207
to 129x129 (as reported by xdpyinfo). Google Chrome 46, contrary to Firefox 42, unpleasantly scales up font sizes given in px with e.g.
<p style="font-size: 9px;">...</p>
I can understand the reasons for doing that – far too much badly designed web pages use font sizes in px where they actually should use em or percentages to be ready for today's multitude of different browsers and screen resolutions. However, I absolutely need correct px values for generating a font waterfall to test a font's rendering at different sizes.
What can I do to fix this?
To answer my own question: the solution is to use Chrome's --force-device-scale-factor option.
google-chrome-stable --force-device-scale-factor=1
I'm using the bodonixt font for a website, and if the font size is set to less than 24.5px, the font is uneven. If I view the site on a Mac, the font is okay, on PC it isn't. It looks weird on all browsers too. Is there any way I can fix this with css?
You can see what I mean here: www.fredgranados.com
It depends on how the font is hinted (optimized). A font is a series of vector images. The vector shape doesn't necessarily fit to exact pixels, so the browser/OS/renderer should determine whether a pixel should become black or white (or a shade of grey, in case of anti-aliasing). To do this right, the font can contain Hinting information, which helps the renderer making the right choices when drawing the font. Often, fonts are only optimized (hinted) for specific font sizes, and specific targets, because this process is expensive and hard, and also makes the font file larger.
I've downloaded the Bodoni XT font on DaFont, and I wasn't really impressed by the quality of the smaller sizes when opening it in the font previewer in Windows. For instance, the serifs of some letters were completely missing in smaller sizes.
In general, it looks like this font just isn't made too well, or it is only optimized for printing and/or displaying in large font sizes.
Maybe the font is better optimized for Mac, or the Mac is better at displaying fonts like these. Anyway, if you would like this to work on other OSes as well, you'll need a better version, or a different font altogether. I've inspected some other fonts by Manfred Klein, and most of his serif fonts seem to have similar issues when displayed in smaller sizes.
Is it a webfont? Meaning you're loading it via CSS? If so, that's just how it is. Every browser, every OS, every user set of system and/or user preferences may cause the font to render slightly differently.
If it's not a webfont, the same issues as above apply, but you have the added issue that not everyone will necessarily have that font installed, or if they do, they may have a different version of the font.
The company I work for wants me to develop their mobile website, I run into a few bugs, though. On my phone screen (Windows Phone (8.1), but also Android devices) the font looks much bigger than supposed to.
The design is meant to look
I have added a meta viewport, but it did not change the font-size accordingly. Who can help me out on how to tackle this problem? Is there a common way to solve this.
This issue usually occurs if you are using a fixed font size (px) instead of dynamic font size (em) you should look into converting the base font (default font size) to a pt then refer to it using ems
I'm working on a web page that will run in IE7+ and support English and Japanese language, and I have a little problem with the font size.
On my development machine I'm using IE 9 and I also have 2 other test machines with IE8.The webpage has the X-UA-Compatible set to IE=7.
I have to allow in a span element , that has a fixed width and height, only 12 Kanji characters.
And I've thought to set the overflow of the span to hidden, and set the font size, by trial and error, so that the 12 Kanji characters will fit in the span on 2 rows.
I change the language to Japan[ja-JP] form internet options, and on my dev machine it looks how i what it, and the same goes for one of my testing machines, but for the other test machine the font size is a little bigger. The TextSize and Encoding are the same in all browsers.
I've tried setting the font size in px, em and pt, but the difference in the visual size of the font is still there.
Any thoughts on what might be the cause of this?
You cannot do this, because you cannot know what fonts will be installed on the end-users pc. Of course you could make a good guess (if you're specifically targeting IE7, chances are there are fonts that are available anyway).
But even then, it could depend on dpi settings of the user. Also, decent browser allow you to adapt font sizes without zooming the screen. So you will have to find a size that works in 95% of the cases, and leave some margin.
If you really need it pixel-perfect, you need an image instead of text (though I would still advise against it). Just embrace the fact that you cannot 100% say what a page will look like on the client.
If it is a browser based problem, then it can be fixed by detecting which browser/version it is, then add a CSS script (use Javascript to do this) depending on which browser it is, with each CSS script containing a different value for the font-size etc.
(BTW I can't help you apart from that, you will need to do further research elsewhere)
You should use an image instead of text. You can generate it on the fly using server's fonts.