I have a pixelated font in one of my projects (like the one in the link down below) but Windows renders it blurry which is annoying because we want a pixelated font for this project. The issue is that all the developers on the project is using Mac so its hard for us to trying to play around with it to see if its possible to make it less blurry.
So my question is if there is someone out there with a Windows computer that could take a look at the link below and see if you can make it somewhat less blurry?
https://fj7o67.csb.app/
It looks like the font you are using is not working well with font weight.
Add this:
h1,h2 {font-weight:normal;}
I can't for the life of me figure out why the same font that I build using gulp-iconfont renders so wildly different on Windows vs. basically all other OSes, including mobile OSes. I've tested practically all of them through Browserstack, and consistently all browser running on Windows render the font with a massive amount of space above/below each icon while all other platforms render as expected.
I highlighted the elements using the inspector for the following screenshots:
Windows:
macOS:
I think I have narrowed it down to be the font rendering, as when I change the font-family in the css, the spacing around the characters evaporates. I have messed around with the gulp-iconfont options (fontHeight is set to 1024 and font is being normalized) without success.
Is my only option to let go of compiling my own iconfont and just using svg's, or does anyone know what I might be doing wrong? I feel the stench of defeat upon me so any faint scent of hope would make me simmer with joy.
i've actually never encounter this problem before. I usually start designing my layout in photoshop then transfer it to my page.
Somehow, lately i've been using georgia font alot, and i love it when the style is italic, but what comes out in photoshop does not reflect back in the webpage when i set it in css.
in the pic above, 1. is what i saw in photoshop and what i wanted, but 2. is what i got, no matter what i try changing, be it font-weight or font-size it remains as bold. I want it thinner, is there a way? I tried font-stretch too btw.
It's not the bold, it is a system font smoothing.
You are able to change (or disable as in your case) font smoothing in Photoshop, but you can't do it with CSS, unless you are using CSS3 and compatible browser.
Added: I wouldn't recommend you to even try to change the font smoothing. That's the user right - to have fonts rendered the way she likes.
I use font-family: Myriad; font-size: 40px for some text. I can't believe IE displays the font in the best quality! Much better than Opera, Firefox and Chrome.
How can it be? How can I make text look as good in other browsers as in IE?
Here is a demo:
http://jsfiddle.net/55Ruh/3/
Try this link in all browsers. IE (the newest version, 9) shows the best and most quality text, doesn't it?
Simply put: this is because IE9 introduces a new font rendering engine that is based largely on that seen in WPF's ClearType implementation. Its enhanced engine does a better job at reducing jagged edges, making fonts look smoother and better, especially at large sizes.
Getting into the details — and I mean to get really technical — this breed of ClearType is different from the one seen in the rest of Windows, also known as GDI ClearType (for Windows' GDI graphics library). The old GDI ClearType is the one that Windows versions of most other browsers base their font rendering engines off, which is also the one that makes fonts look really jaggy in large sizes.
The following paragraph from the second link summarizes most of the rest of its content, that explains quite nicely why fonts look smoother in IE9's new engine:
A significant improvement over the previous version of ClearType is the use of sub-pixel positioning. Unlike the ClearType implementation found in GDI, the ClearType found in Windows Presentation Foundation (WPF) allows glyphs to start within the pixel and not just the beginning boundary of the pixel. Because of this extra resolution in positioning glyphs, the spacing and proportions of the glyphs is more precise and consistent.
See, especially, the section on Y-direction anti-aliasing with screenshots for comparison. Another quote:
ClearType in Windows Presentation Foundation (WPF) provides antialiasing on the y-direction level to smooth out any jagged edges.
To "make text so nice as in IE in other browsers", you could try text-shadow.
text-shadow:0 0 1px #eee;
Live demo: http://jsfiddle.net/simevidas/55Ruh/5/
Chrome renders #FF3A00 as #FF0000 for some reason. I included a screenshot from jsfiddle to illustrate the point. The colour that the Color Meter reports (and what I see) differs from what CSS says.
This happens to other colours too. For example, #FFAF00 is rendered as #FFA400 according to the Color Meter.
However, the colours are rendered without problems on Safari and Firefox. I'm on a Mac using Chrome 11, Safari 5 and Firefox 5.
I'm sure there's a logical explanation. Any ideas?
Update: I'm attaching a screenshot of Chrome next to Safari showing the very same page. I checked this image in Photoshop: the colours are #F00 in Chrome and #FF3A00 in Safari.
Ok, as it turned out, I needed to restart my Chrome. I often connect my macbook air to a 24 inch monitor. It looks like Chrome displays the colours incorrectly when I change to a monitor that's different from what was used when Chrome was started.
I found the answer on the Google Help forum : "I should mention that in OS X, every time you change your monitor or monitor profile (e.g. if you switch from your laptop display to your external display), you MUST restart Chrome for it to get the proper monitor profile information from the OS."
By default both Firefox and Safari use the sRGB color profile. You must do the same, if your Google Chrome takes a different color profile as default.
Access at Chrome: chrome://flags/#force-color-profile
Change Force color profile to "sRGB".
Relaunch your browser and testify the rendered colors now.
I recently posted a similar question: https://stackoverflow.com/questions/6338077/google-chrome-for-mac-css-colors-and-display-profiles
As Andrew Marshall answered there, this is a known issue: http://code.google.com/p/chromium/issues/detail?id=44872
Mac has color correction set up for your monitor. Your browser may or may not use color correction for web content/images depending on its setup. Your color picker reports what your OS thinks it is rendering. Your browser may report something else.
Color on computers. Something many of us take for granted but never bothered to understand how it is rendered.
Chrome color picker works by taking color from current monitor color profile,and the problem may happens by changing color setting or sometime change monitor, please check the below method to solve.
Go to chrome://flags/#force-color-profile and click Reset all to default
Thanks.
In case someone else come here because firefox images looks too colorful (over saturated).
Full guide on how to fix it https://cameratico.com/color-management/firefox/
Shortly:
Type in about:config on your Firefox address bar
Set gfx.color_management.mode to 1
Set gfx.color_management.enablev4 to true
Restart firefox
Now Firefox will display colors same as Safari, Chrome and all other browsers
I changed the Colour Profile in OS X and that sorted it for me.
See the screenshots below using different Color Profile. Note, in the screenshots I'm trying to differentiate between #ff00ff, #ff1aff, #ff33ff and #ff4dff. It's only when I don't choose the default OS X colour profile that I can differentiate the colours correctly.
Default colour profile:
With a different colour profile:
From: CSS colors on OS X displaying correctly in Firefox but incorrectly in Safari and Chrome (potentially 'solved')
I found Safari and Chrome could not differentiate between #ff00ff, #ff1aff, #ff33ff and #ff4dff. But Firefox could. In addition Inkscape, an X11 app, could. But Gimp and Libreoffice Writer, non X11 apps, could not. Firefox and X11 apps seem to be using their own colour profile somehow.
I have no idea why Mac defaults to Color LCD profile which does not do this differentiation amongst others.
Had this problem with Chrome (Lubuntu) when exporting a PNG in Photoshop. Solution: File -> Save As -> Uncheck "ICC Profile: Adobe RGB (1998)".