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.
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 in the process of migrating a website from an existing CMS over to WordPress. They use font-face for their primary type on the site. I've copied over the font files and replicated the CSS file but it appears that the font on the dev site is not rendering the same that it did on the initial site (dev site has lighter weighted font).
Anyone have an idea why this may be?
Dev Site: http://gldev.staging.wpengine.com
Original Site: http://growingleaders.com
Your dev site has a lighter font appearance because it uses
-webkit-font-smoothing: antialiased;
which makes fonts appear lighter. This is done quite often for exactly this purpose, though doing so is somewhat problematic
The rule is applied on line 19 of your compiled CSS file, applied to all elements.
There are several differences on the Dev page compared to the original. If you look at the CSS file called screen.css it is a quite different file on the two sites, that is one of the reasons the fonts differ. Furthermore there are 13 CSS files linked to the original page and 15 to the Dev page. Also the scripts differ, so I wouldn't be surprised if there are even bigger discrepancies than the font rendering.
Copying a WP site can sometimes be more tricky than just copying files. I would suggest you use a good migrating tool. There are some out there.
I found the solution.
Apparently having text-rendering:optimizeLegibility; in your code causes webkit to render the font thinner than FireFox. Once that was removed from the HTML & body CSS, the font renders the same weight cross-broswer.
I'm working with some really great designers. In translating their design, they are asking me why sometimes we don't render non-system fonts exactly as depicted in their designs. A very recent example can be shown in the image attached to this question (ignore red annotations):
I'm using fonts from fonts.com via a javascript include, which allows me to utilize new font-family in my css. I want to draw your attention to two things:
a) On the left, notice the description text "In an effort to ..." is much bolder than "Lorem ipsum ...". Font is "Droid Serif W01 Italic".
b) On the right, notice "MEET ONE" is much bolder than "COMMERZBANK". The font family is "UniversLTW01-57Condense 723821".
I made sure font-weight:normal. And yet, things still look bold on some computers...and it seems to vary depending on which OS and browser you are on. It seems like the only way I can modify the weight of these fonts in an aesthetically pleasing way is by choosing another variation of the font family like the oblique or condensed version (if they exist). But often times, I still can't get the weight to render properly on all the different OS and browser combinations.
How do you guys address these issues? Are there techniques I can use to make the fonts render exactly as depicted in designs regardless of the viewers operating system and browser?
From my experience I always find that font-rendering on the web is nowhere near as good as it is in Photoshop or other design tools. This usually leads to problems like this.
In Photoshop, a designer can use "extra" settings like: "Sharp", "Crisp", "Smooth" and "Strong". All of these variants make the font rendering much nicer. These attributes are not available to us as developers though.
It all comes down to the anti-aliasing of the fonts which all browsers implement in different ways. It is impossible to get fonts to render in the same way across all browsers. This is a reason to use only fonts which are specifically created for the web since they are designed to have good anti-aliasing on screens in the most common sizes.
There are however, some tricks you can try. I have little to no experience with them but hopefully my background answer and these links will give you inspiration in where to find more information about this complex issue.
To me, the left image looks like a classic anti-alias problem. The right picture, I'm not so sure. It almost looks like another font and the size should be big enough for it to render properly.
Check these links out if you wish to read more, hopefully they can be helpful:
Does CSS support text anti-aliasing such as "crisp, sharp etc" yet?
How to do font antialiasing in web page?
Webfont Smoothing and Antialiasing in Firefox and Opera
http://blog.typekit.com/2010/10/21/type-rendering-web-browsers/
"The #font-face CSS at-rule allows authors to specify online fonts to display text on their web pages. By allowing authors to provide their own fonts, #font-face eliminates the need to depend on the limited number of fonts users have installed on their computers. The #font-face at-rule may be used not only at the top level of a CSS, but also inside any CSS conditional-group at-rule." -MDN
#font-face {
[font-family: <family-name>;]?
[src: [ <uri> [format(<string>#)]? | <font-face-name> ]#;]?
[unicode-range: <urange>#;]?
[font-variant: <font-variant>;]?
[font-feature-settings: normal|<feature-tag-value>#;]?
[font-stretch: <font-stretch>;]?
[font-weight: <weight>];
[font-style: <style>];
}
https://developer.mozilla.org/en-US/docs/CSS/#font-face
Its not a perfect solution, but it may get you closer to where you want to be.
We face the same problems you raised and I won't duplicate the good information that's already been covered here. Anti aliasing and CSS are just a part of the picture. So I wanted to touch upon how the typeface foundries and licensing can figure into things.
On the PC side, the reality of webfont services like fonts.com and Typekit usually means results that are noticebly worse. That's regardless of browser.
When you're using a webfonts service you're at the mercy of how that service handles font embedding.
However, if you're using a font that's optimized for web usage and it's available for purchase where you can directly control the embedding of the font files yourself, this article has an good tip to improve rendering on Chrome for Windows.
Examples of foundries that sell (or Google Webfonts at no-cost) fonts for direct embedding are FontSpring, MyFonts, Commercial Type, etc.
Hoefler Type just debuted their own font service that renders beautifully on the PC. It's similar to fonts.com and Typekit in the sense you don't host or embed fonts directly. They've went to an unprecedented level to address all the common issues with webfonts. They adjusted the scale of their font weights and customized their deployment for individual browsers. The limitation is, like many other foundries, as of now you can only buy their typefaces.
Because of these complications we'll usually consider the options for web usage of individual typefaces early on in a project.
From personal experience and high-level research I found that you can come close to achieving a pleasant result using either sIFR (Scalable Inman Flash Replacement) or pure javascript alternatives like Typeface (http://typeface.neocracy.org:81/) and Cufon (http://cufon.shoqolate.com/generate/). I have been using Cufon for a while and I find it the easiest and most effective way to get close to the results you are looking for at the moment. Hope that helps if you still havent come across those solutions yet.
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'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.