The other day I was cruising around and stopped on http://www.justbenicestudio.com/studio/websymbols which had a nice little article on using #font-face for icons in websites. To quote the author, "There are those points in every interactive designer's career when he becomes fed up with producing the same set of graphics all over again for every website he designs."
I was curious if #font-face would work for the app that I work on. Check out the test.
It's not perfect so I'm looking for suggestions and opinions before I start implementing this. Do you think it's too soon? A waste of time? Or is it the most awesome thing since ajax?
I would personally suggest that it's too soon, most browsers support #font-face so you will be relatively safe but I don't see any good reason not to play it safe and produce the image. You're probably saving the user more time and bandwidth by giving them the one small image than the entire font. If you use a photo editor like photoshop or gimp, just keep your files and they will be ready for the next time you need them.
I have used #font-face only on text, but in that link you posted the button looks great. The only inconsistency I find is with cross-browser "compatibility" (but only from a design point of view). It's minor issues, though, and non-existent if you are designing for mobile (you mentioned app). Browsers render the font differently when it's text (for example, IE9 is not picking up the italics, but the render is less pixelated than chrome).
I think it's an issue of adaptability vs looks. Buttons made with images (preferably sprites, for my taste) will always look good, but you have to edit the images every time you want to make a new button. Buttons with #font-face are easy peasy to duplicate and modify, plus they might help with seo, but you have the browsers rendering difference.
Related
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.
I know trying for fixed-display is usually a web design no-no, but please hear me out!
I'm developing a whiteboard-like addition to the forum I run. Long-story-short, the idea is that a user can type up their posts with text and bbcode like normal, then instatiate a managed canvas on top of their text, doodle on it with their mouse, hit submit, and then the doodle will show up on top of their post. The server processes the image into a transparent-background png and then aligns it properly into the text.
So I actually have the backend processing and the front-end interface all working well together. The only part left to do is the display, in which the processed doodle is aligned on top of the text. And, for this to work, the alignment of the image on the text needs to be pretty precise. If the user, say, circles or crosses-out a word, and the text isnt rendered in the same way for another user, the end-result is gonna be wrong. So, I figure that I need to get the text-display locked down. This is kind of annoying, because right now everything is pretty fluid, but hey, this will be a pretty cool feature, right? So, I've fixed the width of the post-display box, but I'm stumped as to what to do about the font - how to set the size, face, letter-spacing, line-spacing, etc so the display is as fixed as possible for different users on different monitors on different computers.
Does anyone have any ideas? If it helps, I'm not at all concerned with IE or mobile displays...
Kerning is going to be your biggest issue,but it should be easy enough by looking at the monospaced fonts available for font-face on fontsquirrel, something like this should do it
http://www.fontsquirrel.com/fonts/CPMono_v07
monospaced fonts should have equal letterspacing.
You can get finer control using letter-spacing:, line-height: and font-size: css classes
hope that's some help.
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've been reading a lot of ways recently of how to avoid having to use Photoshop for things like gradients and shadows on buttons, when you can use CSS3 Box Shadow for such features. Now this is great, but obviously legacy browsers and most IE browsers don't yet implement CSS3 features, so my question is, why save yourself extra work in Photoshop when you can use CSS3 but then HAVE to use Photoshop for other browsers to see the desired effects? Isn't that just extra work?
you can use CSS3 but then HAVE to use Photoshop for other browsers to see the desired effects?
Often you don't really care whether the other browsers see the desired effects. If it's just a subtle background gradient effect, the site's going to work fine and still look reasonable with a flat background in downlevel browsers.
Compatibility was more of a problem when CSS 2 Positioning was at this stage: an unsupported positioning feature could lead to an unusable layout. But for essentially frivolous effects like backgrounds, borders and shadows, it's not critical if the effect goes missing.
There are a few reasons. From a developer/designers perspective, using CSS3 can be more flexible. An image is more or less just a static image. With CSS you can use script or CSS to animate or adjust the styling, and have advanced integration between the various technologies. This allows you to be able to do some things that are not possible or difficult just using images.
The page weight is also lower usually when using CSS, which allows the page to load faster, especially on slow connections or mobile devices. It also reduces HTTP requests (although you can use data uris too) which reduces latency and thus speeds up page loading.
Using CSS is often more maintainable and quicker, as you can adjust say a background colour or a shadow quickly just by changing the CSS, while with images you have to open up photoshop, edit the file, resave, etc. This is fantastic for quick tweaks.
There are also some people (myself included) that are much more comfortable in code than they are using graphics packages. For me it is easier to use CSS, but your milage may vary.
Also from the browser perspective we want to move the web platform forward and increase the capabilities. SVG is an example of another technology that doesn't work across all browser versions yet, but adds a lot of power. Although it may not be possible to deploy sites using certain CSS3 properties or SVG without fallbacks right now (depending on your audience or client) there will be a time in the future when old browsers are dead and what we are adding today works for all users. There was a time when most of CSS2.1 wasn't supported for example, while now you can rely on most of it if you don't need to design for IE6.
There are some parts of CSS3 that you can happily use without fallbacks, if you have a client that doesn't require all browsers to look the same. border-radius is an example, or giving a solid colour fallback to old browsers and applying transparency for newer browsers.
The world is moving forward, you can't ignore it. as long as old browser will show a button and new browser will show a more nice one, you are ok.
Otherwise, we were still be working on VT100... as why using "Windows" if most monitors doesn't support more than 4 color graphics and has 80X22 resolution....
If your bosses accepts the idea of having two versions of looks and feel and a warning. CSS3 is a good idea.
So, you use CSS3 features in your code and forget about the browsers that are not compatible -- they will see the "low-graphics version", you might want to issue a non-intrusive warning (like the one we get as alerts in StackOverflow), saying, "Your browser is not compatible with CSS3. To see this website in high graphics please upgrade your browser. Click the link here to update now."
But, depends on where you work. Big companies with lot of resources may like to stick with Photoshop and smaller once may like a light-weight CSS3 code that degrades silently in non-compatible browser.
Well you can always use ChromeFrame, to impose nice behavior on IE. Assuming that a lot of products will insist for it the near future (yeah we can argue against this), chances are that most IE users will have chromeFrame even before your application would insist for it. Once you take a decision on this, decision on using CSS3 properties or HTML5 elements is - well - hell yeah!!
Marvin