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/
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?
I'm currently developing a site for my University's library, and a very strange issue came up. The font on the website, whether the live version or the one on my machine (not the server) is always smaller than it should be. This is only the case on two computers--my own, and my supervisor. It happens in all browsers. I'm pretty sure it's happening on both of ours because we've handled code, but I can't think of any CSS rules that would be affecting it. To make it worse, it's affecting two different CSSs--the old site (which I have not touched) and the new site which is intended to be rolled out tomorrow. I've tried fixing the way the computer displays fonts, the way browsers display fonts, changed the resolution, and tried zooming in. None of those methods worked. Also, other computers with the same resolution and monitors look at it just fine. No other websites that I visit have this issue. I'm stumped. Any ideas?
The site is here: http://library.uis.edu
Comparisons of the text can be seen here: http://imgur.com/a/Tb7Mv
I think this might be a font issue, rather then a font size issue. Myriad pro is not considered a websave font. As your machine and probabaly the one of your supervisor have probabaly Adobe installed, wich comes with Myriad, you are seeing the site in Myriad, while the other machines are seeing the site in Verdana. (not entirely sure though)
It looks like you are calling Myriad Pro as the first font. I have that font installed on my system, but you're calling the font size to be 75%, which on a font like Myriad Pro, will shrink it down considerably. If I clear the font-size, and font-family to just Verdana, it renders okay, but some of your elements such as the tabbed nav, would need to be addressed.
I'd stay away from fonts like that unless you are using #font-face and a web generated font pack. By choosing Myriad Pro as your font, you will only render that font on computers that also have the font. Consider using something like Google Web Fonts: http://www.google.com/webfonts/
Having fonts at the body level is fine, and cross fonts (headings versus paragraph) should be handled at a global level for those elements (not the body). Assume the body will take the bulk of the text in the body. You can define a standard font size such as 1.0em; at the body level if you wanted, and then define em sizes for other elements such as h1, h2 tags, and p tags if you don't want to use 1.0em from the body.
I've been wondering myself why on windows my font looks smaller, and much crappier than on OSX.
Screenshot Mac VS Windows : http://screencast.com/t/UUxqLRhM
Is that because i used "em" on some rules instead of "px" ?
Thanks.
(This is from a comment, but I'll post as an answer.)
This is nothing on your end, and the culprit is different font rendering engines. Mac OS X tries to render fonts exactly as they were designed, whereas Windows tries to alter them slightly to make them more readable. The problem is, with certain fonts and sizes, it actually makes them look worse. (This article is a good read on the subject.)
If you make the font bigger, it will probably make it look better on Windows. I would venture to say that if you removed the bold font-weight, it would also look cleaner. You could also try a different font.
Overall though, all you can do is just play with different settings and see what looks good and what doesn't; the actual rendering is out of your control.
Different browsers do have different standard font-sizes. Maybo other font-types and the different way to show fonts of the OS.
100% same look is... not possible
The way MAC and PC handle fonts is different, but that is not what is happening here. You have set a font that is not web-safe, "MyHelveticaBold", and the font windows is using is clearly not the same as the one on your Mac. If you don't want to use a web-safe font then you should use open source web fonts that you can serve to the user upon visiting.
There are some CSS properties that can adjust how a font is rendered such as -webkit-font-smoothing. Read more here: http://blog.typekit.com/2011/01/26/css-properties-that-affect-type-rendering/
I'm working on a project with a designer and he insisted on using some specific font for titles and various elements in the page. So we're using a font kit to embed with #font-face.
It's working perfectly on PC (Firefox, IE 7 and 8, Chrome, Safari) but on Mac OS (Safari and Firefox) the fonts are not vertically aligned the same way. After looking on the Web, I didn't find any solution for this except "there always been differences between browsers and platforms, live with it".
I know that fonts are never rendered exactly the same across platforms, but this time it's not something like the font looks more bold or something like that. The font looks as if it's baseline is completely different between Windows and Mac OS X. On Mac OS, the font, at a size of 16px is 3px higher than on PC.
So I'm looking for a backup solution : is there a way to create a CSS specifically for Mac OS users? I do not want to target only Safari because Safari PC is ok, and Firefox Mac is not ok.
Or if you have a solution to fix the baseline difference that does not require a specific CSS file, I'd be happy to hear it.
Thanks!
I'm afraid that browser/os sniffing is your only option. CSS itself has no knowledge of OS nor do i have ever heard of a css hack that targets osx specifically.
This is the easiest way for me to detect OSX and add the OSX class to the document body so you can override css styles for OSX specifically.
if(navigator.platform.match('Mac') !== null) {
document.body.setAttribute('class', 'OSX');
}
Same as #ChrisR answer this is the easiest way for me to detect MAC and add the MAC class to the document body so you can override css styles for MAC specifically.
Additionally this keeps the current Body Class and just ADDS Mac on to it
if(navigator.platform.match('Mac') !== null) {
document.body.setAttribute('class', document.body.className +' MAC');
}
If setting an explicit line-height doesn't fix the problem, you can serve different stylesheets to each browser using your backend and detecting the OS in your application (via the user agent). You can also do something in JS doing the same thing, but there will likely be a FOUC while JS loads the relevant styles.
There's an easier way. http://rafael.adm.br/css_browser_selector/
It detects the browser and os and allows you to specify classes specific to it.
If you want close-to-perfect and painless, you're going to have to use the common fonts or fonts from an online service such as Google's free font library or one of the for-pay font libraries. These fonts have been designed and tested to work on the web.
Experimenting and including fonts for the user's browser to download and try to display correctly is fine, but won't be perfect and won't be painless. Also, be very careful with licensing restrictions - make sure the fonts your designer wants to use are properly licensed for use on the client's website.
If you have to do browser sniffing and serve multiple stylesheets, at this point I'd say your design is broken and needs to be revised. Show https://fonts.google.com to your designer and see if he likes any of those - they work cross-platform in all modern browsers and some are very slick. EDIT: Oh, and they're free to use without worries of licensing.
I'm stuck with a problem. I'm trying to embed fonts with #font-face but they always looks bolder. I have tried everything: other fonts, change font-weight to "ligher" or "100" etc...
The font looks always as it is bolded. I'm pretty sure it could look good because I've seen it used in many other websites with #font-face and it looks thin and fine.
See the attached image link text (I know it would never look as in PS, but so different?)
thanks
Set the following in your stylesheet on whatever elements you are using font face on and it fixes the issue:
-webkit-font-smoothing: antialiased; /* This needs to be set or some font faced fonts look bold on Mac. */
You are probably using the wrong weight file. Fonts will often be sold in different weights. You should verify that the file you're embedding with #font-face is the right weight.
The way the font looks on photoshop is obviously a graphical version of the font, specially, when photoshop has 5 types of blurring for fonts: none, sharp, crisp, strong and smooth. Those beside the original fonts, which they commonly are in one TTF and have the versions inside or, varios fonts for the different weights and faces.
Maybe if you enlighten us about the font type, the weight, blurring and whatever is useful for reproducing purposes would be useful to help you...
Fonts vary according to OS (Linux, Mac,PC) and even by browser, never mind the Photoshop blurring variants that Billeeb mentioned. For example Safari on windows applies some heavy anti-aliasing to make text smooth, which makes it look blaringly different on Firefox, even on the same machine.
In my opinion, the best way to have a consistent font experience is to use some sort of font replacement technology like Cufon. But this only works for not standard fonts with simple effects, you wouldn't want to use this if you need crazy amounts of drop shadow or blurring. For that its best to stick with images
This could even happen if you are using <h1> tag. h tags makes the font looks bolder.