I'm using in CSS:
font-family:Arial,Helvetica,"Nimbus Sans L",sans-serif;
font-size: 11px;
The dimensione of the text in Windows XP/Vista/7 on Firefox/IE/Safari is different from OSx on Firefox/Safari and Ubuntu on Firefox.
Anyone know why this happens and has a solution for fixing it?
yes I had found this exact same problem,
this is because mac actually very slightly bolds every single font, sometimes noticably sometimes not, but enough to make a different to you.
do a google search for "css hacks" and have a root around or google saearch specifically "css font hacks"
alternatively try some obvious things like setting font-weight to none, or setting line height to 1.5 em:
let me know if this helps
Related
I have an – character that becomes invisible when the text is rendered at a smaller font size (the applicable font-size rule is 14px, at which it is invisible; if I zoom in one level in Firefox, it becomes visible.) I have only seen this behavior on Firefox on Windows. With Firefox on Linux, I see the character at all sizes. I believe that what happens is that at smaller sizes, the dash is allowed to render as a line of zero width. So the question is, how can I remedy this? Here's what I can think of -
Try a different dash character and hope for the best
wrap the dash in a span and force it to be bigger - seems clunky
maybe my font definition is broken - this is embedded Open Sans
any other approach I'm overlooking?
Don't use any of the legacy 90's Microsoft core fonts in Windows (Arial, Verdana, etc). They have very aggressive hints intended to prevent "fat" or "blurry" stems at all costs, that result in some of those stems disappearing at small sizes. Perpetuating the pixelated look Windows users were accustomed to was the only thing Microsoft cared about at the time (there are built-in workarounds in the Microsoft rendering stack to hide the bugs of those fonts, but they don't exist in third-party apps).
Have you tried a different font-family to see if it's showing the same problem?
This is a problem of fonts, not browser support. Try to use another font like "Times New Roman" to verify.
In the case of the small icons, the most reliable solution is to use the CSS #font-face rule to ask the browser to download a particular font. Then you'll know for sure that the user has an appropriate font installed. There are even some fonts designed specifically for this use, with extra icons built in: "Font Awesome" is a well-known example.
Please look here for more information: Does every browser support all unicode?
For some reason, the spaces between words on a font that I am using disappeared. See:
http://www.fantasynews.com/
I'm using Twitter Bootstrap slightly modified to use Google Web fonts. The font in question is Oswald served up by Google web fonts:
http://www.google.com/webfonts/specimen/Oswald
And the spacing appears normal for me there.
I'm no CSS guru, but I have touched nothing in my code that should alter the way spaces are displayed. I don't know of anything that should target spaces in particular. I feel like this is some dumb mistake that I'm overlooking but I'm clueless. If I view the source, the spaces are clearly there as well as the spaces clearly being there when I inspect the element, in case some bit of javascript was playing a trick.
I am using the latest version of Chrome, although this also appears in Firefox.
I should say that the spacing problem appears specifically for the title in the boxes under latest player news
I forced it by adding word-spacing: 0.25em to my CSS, but I'm not yet 100% sure that fixed it in every browser. It's unfortunate that Google doesn't have an obvious way to link to a particular version of a font so you could be confident it won't change from under you.
Removing font-weight: normal; fixes the spacing (there are 2 instances being applied to it, Inspect Element and you will see them)
EDIT: This is a bad font, you should choose another one! It looks fine bold, but the normal version is awful.
Same problem here, i applied another font to the online website and pray for a solution :(
It may be a wrong encoded file on google's servers. Nobody's safe from minor issue like these, even the guy who encode typos in the webfont service.
I usually use Firefox(newest) for Ubuntu 12.10. Everything looks fine there. In Chrome however, your fonts are most definitely squished. I personally would choose a different font that renders more consistently. If you want to learn more check out Mozilla's MDC Kerning page to get started.
The main way that I use kerning is with the letter-spacing property.
h2 {
letter-spacing: -0.1em;
}
To say that this addresses "kerning" would be false. This actually affects "tracking". The only difference between the two is that kerning is the relationship between two character and tracking relates to a block of text.
I found an open font I liked (Crete Round) and designed some screens in Photoshop with it. When it came time to set up the CSS, I tried using both Google Fonts and fontsquirrel.com's downloadable "kit" (a zip file with four different types of fonts and a ready-made stylesheet), but both gave me strange results on Mac.
Photoshop — What I want it to look like:
Yuck — Chrome (and Safari) on Mac using an #font-face kit from fontsquirrel.com:
Chrome (and Safari) on Mac using Google Fonts (basically identical):
GOOD —Chrome on Windows (fontsquirrel):
GOOD — Hack. I found out that with any opacity (not text color alpha) less than 1.0, Chrome gave me good results (but Safari was still bad.)
Chrome on Mac using fontsquirrel, with opacity:0.999;:
Does anyone have any ideas on what is going on here, or what I might be doing wrong?
I don't think you are doing anything wrong. I also don't think there is a way around it, other than to use images instead of text where the style is absolutely crucial.
I found THIS LINK which discusses rendering engines on different operating systems (also taking different browsers into consideration).
I hope this helps!
try
html { -webkit-font-smoothing: antialiased; }
I'm no designer, I can't understand it, I love code and code has been my life.
For a non designer, typography is a huge 7 head serpent, and I would like to know, if there is something I can do to make my typography on the web better.
This is what I can do:
witch is nothing more than Blueprint CSS and
h1 {
font-size: 2em;
}
But I'm hating the Aliasing on the Arial font, below it's a portion of the image above at 300% zooming
From a developer side, what can I do to make my web pages look better?
I have tried font-smooth: always; but without any luck.
Font rendering varies from browser to browser and OS to OS. You can adjust the letter spacing and sizes and things like that, but there's nothing you can do, in CSS or JS code, to change how the edges are rendered or how jaggy they are.
maybe change another font? http://www.google.com/webfonts
The rendering of the font depends on how the web browser is implemented. Either the browser handles the rendering with its own implementation, or the browser uses the operating system's native text rendering.
You'll notice that the text is rendered differently on Mac OS X, Ubuntu (Linux) as well as on Windows.
Here is a collection of links about font rendering on different OS's, if you wish to know more about it:
Windows uses something they call ClearType.
Font rasterization
Comparison between different OSs
Jeff Atwood has written about this as well, here too.
You should check out these resources:
http://2011.sf.wordcamp.org/session/web-fonts-for-developers/
http://speakerdeck.com/u/maratz/p/typography-for-developers
http://aceinfowayindia.com/blog/2010/02/10-useful-typography-tools-for-designers/
I have a font installed on my pc, but after using a font-face converter and changing the css suitably, the lines in my ul are more spaced out, the font-size hasn't changed, but the spacing between them has. What CSS do I need to use to revert this? Example: http://www.givetoagiver.co.cc/about.php
If you need any more information, then please ask, thank you
letter-spacing (http://www.w3schools.com/css/pr_text_letter-spacing.asp)
line-height (http://www.w3schools.com/css/pr_dim_line-height.asp)
The above two take care of all the distanced between lines and individual characters.
Still, if the font works OK when it's installed locally, there's a chance the conversion process introduced the problem. What tool have you used for the conversion? Have you tried Font Squirrel's converter? I've never had issues with it.
PS. The link you provided does not seem to work for me.
[EDIT]
#Yi Jiang suggested these links as an alternative to the ones provided by me:
http://reference.sitepoint.com/css/letter-spacing
http://reference.sitepoint.com/css/line-height
Each font can have its own spacing. Web fonts usually uses both the same spacing, so we use them without any issue. with custom fonts, sometimes we've got to change the line-height accordingly:
font: 44px/1.2em Sohoma;
1.2em is the line-height.