SVG stands for Scalable Vector Graphics. As the name implies, it’s a vector graphic format, which scales well. And that’s exactly what you want from a logo if your business requires a large format printing (like a T-shirt, a signboard or a sandwich board).
It turns out that SVG was the one graphic format that most closely responds to current web development demands of scalability, responsiveness, interactivity, programmability, performance, and accessibility.
What Is SVG and Why Should You Use It?
SVG is a vector graphic format—based on XML and is used to display a variety of graphics on the Web and other environments.
Under the hood, SVG documents are nothing more than simple plain text files that describe lines, curves, shapes, colors, and text.
As it is human-readable, easily understood and modified, SVG code can be manipulated via CSS or JavaScript. after that This give SVG a flexiblity and versatility that can’t ever be matched by traditional PNG, GIF or JPGs.
SVG is an W3C standard, which means it can inter-operate easily with other open standard languages and technologies including JavaScript, DOM, CSS, and HTML. As long as the W3C sets the global industry standards, it seems likely SVG will continue to be the de-facto standard for vector graphics in the browser.
The true value of SVG is it solves many of the most vexing problems in modern web development. Let’s see what they are.
- Scalability and Responsiveness
Under the hood, SVG uses shapes, numbers and coordinates — rather than a pixel grid — to render graphics in the browser, which makes it resolution-independent and infinitely scalable. If you think about it, the instructions for creating a circle are the same whether you’re using a pen or a skywriting plane – only the scale changes.
In contrast, raster-based formats like GIF, JPG, and PNG have fixed dimensions, which causes them to pixelate when they are scaled. Although various responsive image techniques have proved valuable for pixel graphics, they will never be able to truly compete with SVG’s ability to scale infinitely.
- Programmability and Interactivity
SVG is fully editable and scriptable. All kinds of animations and interactions can be added to a drawing via CSS and/or JavaScript.
- Accessibility
SVG files are text-based and do can be searched and indexed. This make them readable by screen readers, search engines and other devices. By contrast, a chart
- Performance
One of the most important aspects impacting web performance is the size of the used files on a web page. SVG graphics are routinely smaller file sizes compared to their raster graphics brethren.
Common Use Cases and Browser Support
SVG has an avalanche of practical use cases. Let’s explore the most significant of them.
- Plain Illustrations and Diagrams
Any traditional drawing that may have been produced with pens and pencils should translate perfectly into the SVG format.
- Logos and Icons
Logos and icons often share the same need to be clear and sharp at any size – from button to billboard. SVG icons are more accessible and are much easier to position.
- Animations
You can create appealing animations, and even special kinds of animation, including SVG line drawings.
- Interactivity (Charts, Graphs, Infographics, Maps)
SVG can be used to plot data and update it dynamically based on user actions or some events
- Special Effects
Many live effects can be achieved by using SVG, including shape morphing or different gooey effects
- Building Interfaces and Applications
SVG enables you can make challenging interfaces and incorporate it with HTML5, web-based applications, and rich Internet applications (RIAs).
As you can see, SVG is used almost everywhere and in countless situations. The good news about all this is that browser support for SVG is getting better.
At this moment, most modern web browsers support the most important and fundamentals features of the SVG. So, now you know the ‘why’ of SVG – let’s look at the ‘how’. In my next article, we’ll walk-thru the best way to use Adobe Illustrator to prepare your SVG files for the web.
So with the right typeface coupled with the right font styles (see “Font vs typeface: the ultimate guide”), we can create designs that are quite simple and yet visually appealing at the same time. This emphasizes the most important aspects of the design while using fewer resources and also inducing the least amount of unwanted cognitive load.
Typography can be very powerful.
But what are the best free font websites?
Dribbble, Behance, Gumroad, and so on are home to a ton of hidden gems, but this involves sieving through a lot of digital resources, some of which are incomplete side ventures and “lite” versions.
That being said, make sure that you bookmark awesome resources if you do happen to come across any. Even Instagram might surprise you, and Twitter shouldn’t be overlooked either.
That aside, let’s take a look as the best free font websites.
1. Google Fonts
First of all, Google Fonts offers a fast and convenient CDN (content delivery network), making it super easy to embed webfonts into websites without having to actually host them.
Google fonts can be subsetted by script and weight, and we can also control how they’re loaded on the Web by setting the font-display CSS property from the embed code’s query string, which improves website loading times. (The CSS-Tricks article on “Google Fonts and font-display” explains how.)
Mind you, self-hosting fonts is better for privacy (because it’s cookieless) and speed (because it offers developers more control). Either way, Google Fonts has a humungous repertoire.
2. Creative Market
What’s interesting about Free Goods is that these are actually premium fonts that are temporarily free. While the section isn’t that huge, and isn’t guaranteed to include fonts specifically, each and every week it’s refreshed with six new design assets (plus three more if you sign up and another three if you spend X amount on assets).
I’ve been checking the Free Goods section on Creative Market every week for years, and I’ve built up a large repository of high-quality fonts that cost literally nothing. Font Bundles runs a similar deal.
3. Font Squirrel
Font Squirrel is like Unsplash but for fonts, considering how long it’s been around (a really long time!) maybe saying that Unsplash is like Font Squirrel but for stock images is more accurate! It’s one of the veteran free font websites alongside Dafont, 1001 Free Fonts, and Urban Fonts, although “squirrel” is better.
Although many of the veteran sites look a little outdated, Font Squirrel has kept its website somewhat modern compared to the rest. It also has a couple of very useful tools:
- Webfont Generator (converts TrueType/OpenType fonts into webfonts)
- Font Identifier (for finding out the name a font from an uploaded image/screenshot)
4. FontSpace
FontSpace is one of the nicer-looking websites, although it only offers fonts that are free for personal use.
5. Befonts
What sets Befonts apart is its focus on display fonts.
Although some of the fonts only offer lite/demo versions and often enough only come in TTF/OTF format (meaning they’re less suitable for the Web), Befonts is one of the very few websites that doesn’t take the “we have everything” approach (which can be overwhelming sometimes). Besides, you can always convert TTF and OTF fonts into webfonts.
6. Font Shop
Font Shop doesn’t focus completely on free typefaces like Font Squirrel and FontSpace, but it’s still a rather decent alternative if options one to four didn’t have what you were looking for.
I find it to be the least user-friendly of the options, but the fonts are relatively high-quality.
Which font format do I need?
OpenType (OTF) and TrueType (TTF) font formats have been the standard for a really long time, and they’re still used heavily in graphic design today. Therefore, WOFF formats have better compression on the Web. In fact, the new Google Fonts embed code only offers the WOFF2 format now.
So, in short:
- WOFF2 for web embeds
- TTF/OTF for everything else
Which font style do I need?
Nowadays, it doesn’t really matter all that much because the norms have been thrown out the window a little bit. As an example, Serif fonts can have a modern feel now (think Medium).
Instead, we should focus more on clarity:
- Legibility (how easy it is to tell characters apart)
- Readability (how easy it is to read sentences as a whole)
Some of this comes down to the font itself, so one should be observant when deciding which fonts to use, but other times it comes down to how the font is styling (in terms of size, weight, and so on).
When in doubt, the WCAG 2.0/2.1 (Web Content Accessibility Guidelines) have everything you need to know about typography and its many attributes, such as line spacing, line width, line height, font sizing, and so on.
Conclusion
Fonts are super useful, and they’re often all that’s needed to achieve the right amount of visual, emotional appeal without laying on more and more visual clutter. Your design needs text anyway, so why not make it the most outstanding aspect of it?