![]() ![]() This doesn’t mean icons need to be 16px if your content font size is also 16px. They’re either used in conjunction with text or in place of it, so setting the size of the icon to the size of the text next to it is important for the same reason we like consistently sized letters: legibility. Icons ought to be treated a lot like typography. Tip 3: Match your font-size to the size of the icon set The icons may differ in how much space they occupy, but it will ensure your icons are always crisp and proportional, regardless of the text next to it. If using non-vector, then always use the same dimensions. This will help keep future icons in the set to scale. If using SVG, then the icon can be any size, but try to use a consistently sized art board in Illustrator (or your design tool of choice). The right thing to do here is to match your icon design specs to the format being used. We can tell SVG to occupy a fixed amount of space without losing resolution, but non-vector will stretch and distort the image if we are working with inconsistent dimensions. That’s a-ok if we’re working with SVG but less desirable for non-vector formats, like PNG. That’s great, but now we have icons with different dimensions. If you’re like me, then you will eliminate the white space around an icon to ensure the smallest file size possible. ![]() The map icon is narrower than the avatar icon which is narrower than the cart icon. Icons can take up varying amount of space depending on what we’re communicating. We also know that is not always a practical rule. That tells us exactly how much space we’re dealing with and makes alignment a breeze. Let’s say all the icons in a set are 100px square. Here’s an ideal situation: all icons are the exact same size. Your code will much more maintainable and your designer (or your inner designer) will thank you. ![]() The lesson here: choose one format for all icons and use that as the basis for how you will approach aligning them to text. The beauty of something like SVG is that it is scalable by nature and affords you the ability to reply more on CSS to help align things rather than the design process. That means the icons are pretty much set at fixed dimensions (unless you start large and use background-size to scale down) and it would be much easier to adjust the size and line-height of your content to match that of your icons. ![]() Let’s say all your icons are contained in a sprite. Regardless of your preference (cough, SVG, cough!), the format of your icons will have a lot to do with how you align them to text. There are actually quite a few methods, if you include ones that might be considered old, as in, “That’s soooo 2011!” A few examples: I take for granted that there are other ways to do icons other than SVG. Tip 1: Decide on an icon format and stick to it Thankfully, there are a few universal tips we can put to use to ensure our icons always line up beautifully with text. However, there’s much more to finding the perfect alignment between icons and text. I have to be honest and say that I thought this would be a simple question to answer and one that could be done in a tweet. Tricky, right? Aligning icons can be a tough task especially if you are not the one charged with designing the icons. Here’s an excellent question that comes up often along those #smashingconf any recommendations on how to align #svg icons to text? Once you’ve decided on a format (SVG or icon font?) and designed the set, there are still other considerations, many of which pop up while you’re coding. They help complement content ( most of the time). ![]()
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |