Check out this site, as you can see the menu renders properly on desktop but on the iPad the font seem to get much bigger, causing a line break. Could it be because the font im using isn't loaded, and it uses the second instead (Times New Roman)? That sounds very plausable since i achieve the same result if i use only TNR, but how can i make the font smaller if Times New Roman is used instead of my first choice of font?
I am not seeing any change in font size for iPad 1 and iPad2.
http://quirktools.com/screenfly/
Related
I ran into a problem when trying to increase the font on the mobile version of the site. The font size in the CSS is indicated in px, but visually, by the number of words that fit in a line on the same page, when viewed in the browser chrome and firefox, the desktop version of windows and android differ, on android the font is actually smaller - i.e. more words will fit in a line.
What is the reason? And how to fix it?
I tried changing px to pt, same result.
The problem was with the font, I replaced it with another and managed to achieve almost complete identity.
When I load my website half of the page size is loading different than the other half. This only happen sometimes. This is ruining my website view.
I assume you're using webfonts to display text in fonts that aren't on your device. You see the sizes change when a similar looking font that exists on your device is swapped for the webfont when the download completes.
You see this "sometimes" based on caching and or speed of your connection to get and render the fonts.
Text rendering on the navbar, at least on Yosemite's Safari and Firefox, is very bad. Text doesn't show the curve it has but is like thicker and more imperfect.
If I zoom in the webpage, it improves, also if I force focus at any element.
I wouldn't care much about this if it were always regular, but the problem is with the focus. The page doesn't seem to be well designed, and I don't like that impression at all. I'm using Bootstrap framework with Ubuntu typography. This happens at a font-weight:500.
Example http://www.bootply.com/Ptp4gXpHAF. Just click the search bar.
This is the difference between what I want and what is rendered:
The image shows blurred due to upload resolution but I think there is a big difference.
I just changed the font-weight to 300. Maybe safari tried to render to higher font weight but when I clicked on it the font-weight property was overridden. Within setting it to 300 it worked just fine.
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.
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.