I'm building a website with Dreamweaver, and noticed that IE (I have IE10 on Win8) doesn't render my fonts as sharp as Chrome, see the example picture. Firefox is a bit off as well.
this problem is much more noticed when using small bold text.
Here's an example for 14px arial bold:
CSS:
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
.bold {
font-weight: bold;
}
HTML:
<span class="bold">Hello</span>
Maybe the problem is in the browser and not the style, but is there any solution to make the website easier on the eye of the visitor?
Let's zoom in for a closer look at your examples:
Chrome:
Firefox:
IE:
Notice that Chrome and Firefox are clearly using subpixel rendering (a.k.a. ClearType), while IE isn't. The difference probably comes down to user settings (or the browser / OS default settings, if the user hasn't changed them).
In particular, whereas Chrome and Firefox do their own text rendering, IE uses the default text rendering settings of the OS. Apparently, since Windows 8, ClearType has been disabled by default for Metro-style applications, including IE. Don't ask me why, though.
Anyway, the bad news is that, as a web developer, there's not a lot you can do about this. In fact, you can't even count on subpixel rendering being possible, let alone enabled, for all users — it only works on certain types of displays. You really just have to accept that the details of text rendering are going to vary between users, depending on lots of things like the browser, OS, display hardware and user settings.
Edit: Well, OK, you could try using something like Cufón, but that sounds like swatting a fly with a sledgehammer. In any case, if you used that for all text on your site, I'd expect the performance to be pretty horrible.
Related
Sorts Mill Goudy is a great-looking font, and renders beautifully on Chrome.
However, it doesn't seem to have a native bold-face. (It does have italics, though.)
So, I suppose it is up to the browser to apply a "faux-bold" if the font-weight is set to bold.
It turns out that different browsers apply this "faux-bold" very differently. In the case of Chrome, it looks wonderful at 800 font-weight, but Safari and Chrome don't take the same approach. They are clearly trying to do something to make it bolder, but not doing what Chrome is. The result is reminiscent of pre-unicode foreign language encodings trying to typeset themselves... each letter seems a bit too wide, and it just feels "off", especially compared to how Chrome handles it.
What is going on here? Is there a way to export Chrome’s faux-bold as a font file (ttf or otherwise), and force other browsers to follow suit?
How can I achieve cross-browser consistency here?
<link href="https://fonts.googleapis.com/css2?family=Sorts+Mill+Goudy&display=swap" rel="stylesheet">
<style>
h1
{
font-family: "Sorts Mill Goudy";
font-weight:400;
font-size:3em;
text-align:center;
}
h1.b
{
font-weight:800;
}
</style>
<h1>Test Text: Font-weight 400</h1>
<h1 class="b">Test Text: Font-weight 800</h1>
Codepen: https://codepen.io/1bc25a/pen/oNWOQoL
Image: Side-by-side font renderings
I am afraid that what is going on here is actually every browser doing his own thing in font rendering. It may even get worse if you test in Edge. Every browser seems to take its own approach to rendering font weight and anti-aliasing. So since you don't find a native bold face somewhere, there might be little you can do :/
It might be comforting that you are not alone with this problem, as you can see here: https://blog.stephaniestimac.com/posts/2020/06/browser-fonts/
And it might be helpful remembering that Mr. Berners-Lee knew from the very beginning that those new kind of pages would be displayed on all kind of devices and therefore HTML and CSS are all about taking control away from the designer and giving it to the rendering device or user.
You might try and hack about a bit by detecting browsers and feeding them differen font weights, but I don't know if that will make things better, and I am pretty sure it might not be worth it.
Sorry, I fear this is not the kind of answer you wanted ...
I’m experiencing an issue with Safari where a block of text using webfonts (not sure webfonts are the issue) is wrapping differently in Safari than it is in any other browser. In this particular instance, we’re designing these blocks to look like they’re set to text-align: justify; but they’re actually set to text-align: left;. text-align: justify; is undesired in this setting as it does a poor job of calculating the space between words.
Important things to know:
As I mentioned, the layout uses webfonts. It doesn’t matter which webfonts (I’ve reviewed hundreds and it happens for all).
The entire page, including padding and font-size, uses viewport width (vw). The idea here is that the block of text scales equally for all browser sizes and retains it’s layout, including rags.
A visual aid:
Details about the layout and dimensions:
Frame 1: Safari desktop.
Frame 2: Chrome desktop.
Frame 3: Chrome at 50% opacity over Safari.
Window width in this screenshot is 1220px.
Left/right padding is padding: 0 calc(129 / 1220 * 100vw); which computes to 129px.
That leaves the available content space of 962px.
letter-spacing is set to 0 by default for all content.
So, anyone have any idea why Safari seems to have exaggerated tracking/letter-spacing?
EDIT
We just launched the site in question, so you can see the issue in action here: https://www.typography.com/fonts/hoefler-text/overview
Well, there's a bunch of stuff at play.
First of all Chrome and Safari use different defaults for rendering text, But in addition to that Chrome on different versions of MacOS or Windows will render text differently too because of how the system font rendering works.
You can typically make Safari and Chrome (on the same system) feel a bit closer by setting your text CSS to:
text-rendering: optimizeLegibility Since this is the default on Chrome but Safari defaults to optimizeSpeed
It might also be wise to explicitly set: font-feature-settings: "kern"; and font-smoothing: antialiased (note those both need vendor prefixes)
Next, make sure to specify a numeric font weight. Eg: font-weight: 400 for "regular". (The browsers might not pick the same weight for the normal/bold keywords)
Finally, make sure you're serving up the most optimized version of a webfont (Typekit & Google usually do this for you, but it's an issue if you're self-hosting the fonts)
Edit:
It might be worth forcing both Chrome and Safari to create a "compositing layer" (basically means its GPU accelerated). You can do that with backface-visibility: hidden. Though I suspect this is a MacOS specific thing and there may not be a solution in the browser.
Adding font-feature-settings: "kern"; to the element for the fonts solved my problem with Safari not rendering the letter-spacing properly.
I had the similar issue while building an html banner using a .woff font: Safari was applying an exaggerated tracking/letter-spacing.
Bryce's suggestion to use font-weight: 400; fixed the issue.
I am having some problem with Google webfonts.
I am using Google Webfont called ‘Bitter’.
But in Firefox and Chrome it is being rendered differently. Chrome and Opera seem to render it in similar way. It’s not drastically different but it’s messing up the formatting and compositions of the paragraphs.
Here is the CSS:
.small-col h3{
color: #606060;
font-family: 'Bitter', Georgia, "Times New Roman", Times, serif;
font-size: 16px;
line-height: 20px;
margin-bottom: 2px;
letter-spacing: -0.06em;
}
And here is a screenshot of the issue I am talking about:
http://i49.tinypic.com/2u46mpi.png
Could anyone suggest how I can get consistent rendering in both Firefox, Chrome and Opera?
Thanks
Fonts are never going to render the same across all browsers. They use different rendering engines—trying to get websites to look identical on every browser is a lost cause.
For your specific problem, use a non-breaking space to prevent contact and us from being separated.
<p> ... contact us </p>
It looks like firefox is rendering the weight a little different, and the spacing a little differently too. Maybe try defining those numerically, as well, to override any browser defaults. Unfortunately, different browsers and especially OSs like to render fonts differently and by their own rules at times.
There can be differences in font rendering between browsers, though more often, differences exist between platforms.
However, here the difference seems to be caused by letter spacing. More exactly, Firefox correctly applies it, WebKit browsers don’t. For 16px font size, -0.06em should result in a little over one pixel, and if you use the inspection mode (F12, computed style), you will see that Firefox applies -1px whereas Chrome uses normal (i.e., zero) for letter-spacing. Chrome seems to have some threshold on the letter spacing value; making it just -0.065em changes things.
So especially if you prefer the Chrome rendering, just omit the letter-spacing. It is generally best to avoid letter spacing – the font designer should know better, and if you agree with her or his choices, use another font, instead of of trying to “fix” the font.
One of the differences between browsers is that Firefox applies kerning by default, other browsers don’t. But this is not relevant to the specific texts in the example, since the kerning table for Bitter has pairs of uppercase letters only (so “VA” would look different, for example).
I had the same problem with the serif font. If you write "serif" instead of serif (without ""), Chrome will render the same as Firefox.
Try adding the google webfonts code to the head of your website by using the provided javascript code, instead of css or #import.
This solved my problem on this topic.
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/