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.
Related
I have a web page with text and an image. I want to place the text very precisely over the image.
I have discovered that with the font I am using, when viewing the page on windows, everything gets shifted down by about 4px. On Mac, iphone and android, it is placed correctly.
This does not happen if I use Courier New as the font, so I know that the problem is the font, however I have no choice but to use this font.
Is there a way to compensate for this purely in CSS, or do I need a javascript callback to detect windows and add a class so I can deal with it?
first of all, I would try tuning ling height, if that did not work, then I think you need to edit the font itself, you can do that using this site: https://transfonter.org/, uploading your font file and convert it to the formats you use and the important point is to check this toggle button, it adjusts some properties in the font so it has similar experience on different operating systems
if that did not work, there is a program called fontforge it gives you the ability to change font metrics, for more info you could check this question
Font Rendering / Line-Height Issue on Mac/PC (outside of element)
I am curious about the pros and cons of using a CSS image sprite for my social media icons vs. using a custom UI font.
Which one will offer superior performance in terms of page load speed?
It seems to me that a CSS sprite may be better- as there is only a single HTTP request & the file size can probably be kept smaller than a custom UI font for social icons.
Anyone have insight on this?
One of the two techniques will have a slight 'superior performance in terms of page load speed', but most of the time project requirements and development time far more important than load speed.
Image sprite vs Icon font and page load speed
Number of requests: Both techniques need CSS and load one file. You need to generate multiple fonts, but only one font is requested and used.
Amount of CSS: More or less the same. #font-face is more initial code but less applying the icon.
File size: More or less the same, but depends on icon size. Bigger icons need bigger image sprite. Fonts use vectors and will stay the same size. I looked up a font with 300 glyphs it is a 25KB WOFF (the SVG is double the size). A font containing one glyph is 4KB. To compare the two I should render all glyphs black on transparent in a sprite. But at what icon size?
Render speed: Negligible.
Cache: Negligible. There are CDNs for icon fonts.
I think both techniques score the same. The differences are negligible. Off course one will be slightly faster than the other. But you should measure that in your specific situation. Anyway, we know multiple requests are the bottleneck. And both fonts and sprites only need one request.
Image sprite vs Icon font and stuff that matters!
Color: Sprites can use all RGBA colors in the same icons. Fonts only have one color. You can apply effects to make fonts more special (and these effects will match the same effects on other page elements).
Shape / size: Image sprites need duplicate icons if you want to apply different sized icons (e.g. high resolution displays). Fonts can be applied in any size.
Rendering: Image sprites render pixel perfect. Fonts get applied by render engines, resulting in differences per platform. Windows utilizes the built in hinting instructions. Creating good hinting requires a lot of skill.
Use area: Image sprites can also be used by other page elements (backgrounds). Since fonts are applied as text, they have a smaller use area.
Maintainability: The icons need to be one pixel bigger. This kind of change makes you generate the sprites and update CSS. With a font changing just one font-size value will get the job done.
Development time: Above points are important design decisions when creating your own icons. That said, most developers just use the technique they feel comfortable with. Or pick one of the may sprites or fonts out there.
To come back to your question. Do you want to use multiple colors in a single image? Than an image sprite is the way to go. I would include each icon as separate Base64 image. It keeps maintenance easy. Although this will come at a cost: Very roughly, the final size of Base64-encoded binary data is equal to 1.37 times the original data size + 814 bytes (for headers).
I'm curious what your considerations are. Looking forward to your comments!
1) Icon Font glyphs are going to render faster than image sprites.
2) An Icon Font can also be smaller in k size than a comparable sprite sheet if you use Fontello (free, and easy to use) to create a custom font that only includes the glyphs you are going to use in your app / site.
For example, for a recent project I created a TrueType font that contains 8 glyphs, weighs less than 8kb, and the icons scale beautifully up or down; sharp and clear.
Easily apply colors, try 80% opacity, etc.
Css sprites do improve on load times but with the speed of the internet the average viewer would never even notice the difference. This website has a full breakdown of what they are and what they do, comparisons and more. http://css-tricks.com/css-sprites/
Hope this helps :)
Will an imageless design (using CSS to generate icons) load faster than a traditional image based design?
NOTE: I completely understand the flexibility of being able to change an icon's colour, size etc. will a few changes to the CSS file is much more efficient, but I am unsure about the loading time.
Background:
I am looking into completing a project for a client that is an imageless design using CSS to generate the page icons, which was a project requirement to decrease loading time on mobile devices. Normally, I would just slice out the icons in an image sprite and not worry about the load time seeing the browser would only have to load and cache on image.
Thanks!
Yes, if site icons can be generated entirely in (relatively efficient) CSS, this will load faster than images. The rub is that most icons are far too complex to be generated using CSS, and the CSS might in some edge cases become so complex that the maintenance issues associated with maintaining complex code across browsers might outweigh the benefits. But in general, if you can do it in CSS without having to bend over backwards, it would be optimisation—and in the scenario you describe might well be worthwhile optimisation.
I don't think the question is whether or not it's faster, but whether or not it's a good idea at all. I wouldn't sacrifice the flexibility of using images by making everything into pure CSS. You guarantee cross-browser compatibility with images, something that CSS3 cannot. Plus images are easier to maintain.
Think it in this way .. the size of css icon(the size of the code required to produce an icon) is an advantage and the other major advantage is the server hits. for ever image icon there is a hit which means there is a waiting time, downloading time, and rendering time, though its only in milliseconds the waiting time and downloading time are directly proportional to your server load.
In that case a css3 icon will not only save time and band-width but also reduce your server hits as the css file downloads only once and its contains all the style declarations for the entire site.
The advantages are enormous to choose a css icon. But there are some cases where a css icon is not suffecient, so its up to the developer to choose from a css icon or an image based on the requirements.
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.
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.