Sign in to follow this  
Joyrex

Ehren: Your Thoughts On SVG/Icon Fonts For Skins

Recommended Posts

What's your general thoughts/feelings on using SVG (with PNG fallback) and also icon fonts in lieu of tradtional graphics for the forum interfaces (button icons, forum icons, controls, etc.)?

With more and more people using tablets/mobile devices and devices with high dpi (aka Retina) displays, the days of 72ppi graphics are nearing their end (finally) - do you have any plans on making any skins (probably 4.0 skins at this point I would imagine) using SVG and/or icon fonts instead of graphics (obviously background images still remain as graphics unless they are patterns then SVG could be used there too)?

  • Like 1

Share this post


Link to post
Share on other sites

Not a bad question..

I've been using media queries on some of my xenforo themes to display "retina" quality images for compatible devices (where icon fonts weren't appropriate).

I have used icon fonts in the past and they look great on mobile devices, but I find they can be a little more blurry on desktop monitors compared to icons which were created in Photoshop (where the pixels are snapped to the pixel grid instead of being shared which can sometimes be noticeable with fonts). You are also obviously limited to css when trying to style icon fonts, which can sometimes make the design look a little bland compared to colourful ones.

I will definitely be utilizing css as much as possible (for gradients, etc) and will keep icon fonts in mind, but I don't think I'll be using svg images just yet.. It might even be a good idea to have a setting which enables/disabled either images or fonts for icons - then you can decide yourself once the skin has been installed :)

Share this post


Link to post
Share on other sites
I will definitely be utilizing css as much as possible (for gradients, etc)

This is what I like to see. It makes fast loading sites.

  • Like 1

Share this post


Link to post
Share on other sites

Not a bad question..

I've been using media queries on some of my xenforo themes to display "retina" quality images for compatible devices (where icon fonts weren't appropriate).

I have used icon fonts in the past and they look great on mobile devices, but I find they can be a little more blurry on desktop monitors compared to icons which were created in Photoshop (where the pixels are snapped to the pixel grid instead of being shared which can sometimes be noticeable with fonts). You are also obviously limited to css when trying to style icon fonts, which can sometimes make the design look a little bland compared to colourful ones.

I will definitely be utilizing css as much as possible (for gradients, etc) and will keep icon fonts in mind, but I don't think I'll be using svg images just yet.. It might even be a good idea to have a setting which enables/disabled either images or fonts for icons - then you can decide yourself once the skin has been installed :)

Agreed on (ironically) icon fonts looking blurry on desktops (the opposite of non-Retina graphics on a mobile device) - I have read a few articles recently on SVG icons, which support full colour - I think the biggest issue with icon fonts is displaying them at the right size - they tend to be jagged at smaller sizes where the anti-aliasing isn't as effective (just like with really small fonts).

Love the new skin, BTW - I'm tempted to get a second skin from you for my forums...

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this