Hi when I using photoshop the fonts are so smooth and doesn't look pixelated. Now I have seen this on many different sites, how smooth the fonts are and don't look pixelated at all.
I was wondering if there was a property or something that i can use to get the text smooth in css.
For example ---> http://css-tricks.com/forums/discussion/10533/text-smoothing/p1
see where it says '[Solved] Text Smoothing', how do i get the text that smooth without having to make the font oo big, I'm using "Arial Black" font on my site.
As mentioned in the link you shared quite a large degree of font smoothness has to do with the browser or OS that the type is displayed on.
For example, Windows uses ClearType technology to help smooth fonts. And yet, on a Windows machine, the font will look slightly different in each browser. I have noticed this effect while testing various sites across the major browsers.
Another thing about 'Generic' fonts (those included in most machines by default), is that the base font might differ slightly OS to OS etc. So for that reason you may look into a custon CSS3 font on your site so that you know that users with support for custom fonts will have a very similar appearance.
If you are set on using one of the web safe fonts, I would recommend testing various font-weights and seeing if one renders particularly well in most browsers. As the font weight correlates directly with the approximate size on screen this will affect the pixels being used and it is possible that some weights perform poorly in ClearType and related font smoothing technologies.
I would try finding an Arial lookalike otherwise.
Related
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.
My manager tells me not to use icon fonts on our websites, as it is another http request plus the extra kBs to download. Also because I would have to use content before for the font (I can't change the html), he prefers background images so it works in IE7.
Personally I love the little things, so nice and crisp and resizeable!
I get it if we only use a couple of icons on a website but if I would use, say 5 icons on a site - what do you guys think? Is it worth using an icon font or is he right thinking that it is not?
I am just a sucker for anything new and exciting, and this year it is the retina display.
Icon fonts and high density screens
Using icon fonts will be more and more relevant as more high resolution/density displays become available.
A 16×16px icon can look horrible on a high density display (>300ppi). It may either display incredibly small or unsharp due to automatic scaling. A 1em font icon on the other hand will render correctly and sharply regardless of screen density.
It of course all boils down to your
application users and
your requirements (IE7 seems to be the major breaker)
For now sprites are the way to go.
Downsides?
Icon fonts have a different problem as well. All icons are single colour. There's no font standard as of yet to have multi-colour capability. And it likely won't be. At least not for fonts. There are possibilities of doing multi-colour using SVG fonts which isn't a font standard/format per se but can be font container and used as a font delivery mechanism in your browser. Doing multi-colour icons as SVG fonts makes it possible to have colourful scalable icons (thanks to #Joey).
Vectorised icon images would better suit full colour resizeable icons.
Requests and font icons
Your boss' argument about additional request are simply false. It doesn't really matter whether your icons are part of a file or (in best case) part of a sprite image.
Both yield an HTTP request to fetch the resource. File size heavily depends on complexity and format but it may be that sprite image will be smaller. But having a few kilo larger font file doesn't really make much difference. They both get cached on the client afterwards.
I personally use Font Awesome as my primary resource for fonts, In my case I load it from the CDN hopping other pages that use it already fetched it and this was cached by the browser.
If file size is a concern, I can recommend to you this incredible awesome tool
http://fontello.com/
It allows you to merge several fonts into one single file, and only includes the icons you actually use.
http://www.icnfnt.com/ does the same for fontawesome, but I kinda like more fontello because it allows to use more fonts.
icon fonts is the way to go honestly in my opinion...
EDIT I lately have being using this app a lot too: http://icomoon.io/
When you use fonts, different browsers on different platforms will give different results. PNG files will give stable and independence results.
I have implemented a font icon library using icomoon and it works well on all the browsers including ie7. For small sets of icons this is a suitable practice, the font's scale properly, can be changed to any colour you require and you don't have to worry about PNG/GIF transparent background colours matching.
However... If your library becomes larger (mine is now around 40 icons), it becomes increasing difficult to maintain. If the designer ceases to work on the project, or you need to change the icons, it is a laborious process to update the fonts. Everything then needs to be retested. It is also difficult to dynamically icons using CSS (for ie7).
So, given the difficulty of maintenance, I'm considering switching back to a series of sprites (of different colours). The reasons being:
Any designer can easily add a new icon to the set.
The CSS doesn't need to be retested or altered.
You don't have to screw around with javascript workarounds for IE.
You don't need javascript at all.
For retina displays, simply create a verion of the sprite at twice the size,. You will probably need to have a different version of the CSS for retina regardless, as all the other images on your site will have the same density problem.
I would recommend 2 solutions to your problem these is what i would use for best customers support like they wanna change the text, size or other stuff
Use Fontsquirrel to make a webfont and embed it in your website trough your css and add it in your ftp directory if thats not getting pretty then use google web fonts
If non of that looks like it should i would go for the image solution your boss said..
All this also depend on which amount of time you have to solve your problem and such
Btw if you cant access the html i thought you could access the css which you can do trough most backends, if you cant then go for the image!
Last but not least, if you decide to go with the image solution, make a sprite which you direct trough on a background position. This way you only have to load 1 picture for all your little icons.
He's right. I'd use css sprites in this case. And if you have to support ie7 (I'm so sorry) you don't really have any options. Exploring those things on your own - of course, you never know what will come in handy or when.
Is it normal that fonts I used to create site layout are pixelated? I use Georgia, and in photoshop I've smooth lines everything looks great. But when I tried to slice it up and code the css, Georgia font same size looks noticeably uglier!
What are your thoughts?
p.s. I use em to declare sizes in css.
That's because photoshop is using anti-alias technique on text.
Both OS and browser will impact the appearance of text in web page.For example, Mac OS has anti-alias text on all system UI. For windows, I believe they have an option called 'ClearType', once switched on all system UI will have smooth texts.
All fonts on the web will look a little pixellated unless you're on a Mac which renders type considerably better than PC.
The best way I have found to replicate how a font will look on the web is to set the Anitialiasing in Photoshop to 'sharp'.
It is conceivable that there will be CSS markup in the future that will allow antialiasing in the browser rather than OS based.
It is a common problem.
See this article
http://jontangerine.com/log/2007/10/smoothing-out-the-creases-in-web-fonts
The alternative is to use something like Cufon that generates images for your text. Best practice would be to only use it for headings.
http://cufon.shoqolate.com/generate/
I've found this too - each browser renders fonts differently. I often find fonts look much better in IE. Sometimes I opt to use images created in PS to get that smooth look, but for the most part I think people are used to how fonts are rendered in their browser of choice.
In photoshop, there's an option to "smooth" text.
See this image. Bottom right corner.
Remove this anti-alising to have a better view (but not exact) of how the font will look in browser.
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 want to know does CSS behaviour changes with different operating system. My css is working bit different for vista and win xp proffesional for same version of browser. I was testing my application on vista + ie8 and xp + ie8. It worked bit different.
Officially the CSS behavior should not change when using the same browser on another operating system(for example FireFox 3 on Windows, MacOs or Linux). Calculations of width and floats are calculated by the browser and not by the OS. However there are some factors which which will cause the site to look a bit different in another OS.
One of the issues you are getting when using another OS (or even another machine) is Font support. If you use some fonts which are only available on Windows Platforms (or are normally only available when installing a certain application) the browser will use another font, this may cause some render differences. I can even imagine it is also possible that a font is a bit different in size in Linux compared to the same font in Windows).
Another issue you are getting are form elements (like textboxes and dropdowns). These are different for each OS and especially dropdown boxes may behave different in various operating systems (the pulldown part may vary in size and textboxes sometimes have a "3d" border and sometimes only a line). You will even notice these differences when switching in XP from the XP style (the blue/green/gray one) to the classic style (the old school gray version) the dropdownfields will be a different style (and if you are aligning them with other elements you will see the size change). But most of the times these differences are only a couple of pixels and are mostly not noticed by users, but for a designer/developer it can be a bit annoying.
What change did you see? There could be minor difference due to the OS theme - elements such as buttons, dropdowns, scrollbars could be styled/sized different.
You can observe some differences even if you change themes in XP (Classic vs XP look).
There are a few things that may change cross-platform:
Fonts
The Windows "core fonts", which are supposed to be cross-platform, are not on most default Linux installs. Also, 10pt in Firefox on my Ubuntu doesn't display the font at 13px like other browsers, it's slightly bigger. Some fonts may have a different line-height too I think.
Form widgets
Buttons, textboxes, textareas, fieldsets and dropdowns are different across browsers and platforms. Opera, for example, uses its own Vista-esque skinning of form controls and each skin is different. Chrome seems to use its own stuff too.
Screen resolution
If the design is fluid like Wikipedia you will end up with very long lines of text that may be difficult to read.
Hardware
The user's hardware may also cause changes in colours or other graphical anomalies.
CSS is platform independent. But, it is browser dependent. Different browsers may implement CSS differently but different platforms with same browser will not show any change. It will be better if you can post your CSS here, so that we can debug. Of course there may be minor differences in the elements because of the theme.
There are a lot of things that can differ from one system to another. There may be differences even between two systems with the same operating system and the same browser.
CSS in itself is an independend standard, and doesn't change. However all browsers doesn't interpret css the same, and the CSS standard doesn't cover every aspect of how the page should be rendered. Also, CSS covers how code that is correct should be interpreted, but if you have something that is incorrect in your code, it's up to each browser to try to interpret it best it can.
Especially text rendering can differ a lot, as there are many factors that control it. Things like the installed fonts, the smoothing algorithm chosen and the user size setting decide how the text is drawn. There are different versions of the same font, so for example Arial on XP and Vista doesn't have to render exactly the same, as details like kerning rules and font smoothing hinting can have been reworked.
Some page elements (like buttons, form fields and slider bars) can inherit their look and size from the operating system and the user settings in the system, so they may look different.
Yes. It may change.
Element styles may be differently rendered in different visual styles[themes] of the OS.
For eg:
In some themes there will be rounded corners for fieldset and in others it won't be rounded.
Problems I am facing in different operating systems are :
1. Text with fixed width is coming in two lines in vista whereas on xp it is coming in same line.
And one major problem I am facing is some part of my design is getting distorted in VISTA + IE8 which is rendering fine in XP + IE8. To make my application compatible with IE8 I have used
tag.