WEBFONT GENERATOR PRO

Then you'd save the file, with luck directly as TTF (TrueType), alternatively as SVG after which you'd convert to TTF using another tool. Before IcoMoon came along, you would have needed to use a font designing application ( Inkscape's SVG font editor being one of the few ways to do this affordably) to align and map each glyph. Make no mistake, IcoMoon has made this process easy peezy. Our ligature glyph is going to be a fake app logo (named вЂњVectrвЂќ the last vowel has been removed to prove it's an app.) and it's going to be mapped to the string вЂњVectrвЂќ. This principle needn't only apply to letter pairs either glyphs can be mapped to whole strings.

WEBFONT GENERATOR PRO

One of the many ligatures available from Adobe Caslon Pro When the browser encounters that combination, it switches the letters out for a single ligature. The ligature glyph is then вЂњmapped toвЂќ (associated with) the letter combination in question. If two characters in a font look awkward when placed next to one another ( fl being a classic example) a ligature can be designed to help out. To summarize, ligatures are purposefully designed character pair combinations.

Using ligatures means no need for image replacement techniques (which are a bit hacky, when all's said and done).ДЇor a detailed explanation, take a look at our Anatomy of Web Typography.

Having your logo in font format means you can color it with CSS however you like, with as many variants of it on the page as you please.

If you're using web font icons already (why wouldn't you be?) then patching an additional glyph into the font file would mean no extra server requests and very little extra bandwidth.

Both possibilities, but how about we lean on web fonts by desiging our own ligature? For the above techniques to work in a retina world, a second hiвЂ“res version of the logo would have to be served when needed.

The CSS swaps out the content for 100% visually accurate branding.Д«ut what about the issue of high pixel density screens. The markup says вЂњimportant heading, link to the home page, with indexable (accessible) content to tell us what it's aboutвЂќ.

Or by using an image replacement technique on the content of the anchor: Most web pages display a logo (which makes you wonder why there's no or element?) and they're often implemented either with an tag: Logos can't be approximated they must be reproduced precisely, which is why we're reliant on image files to display them on web pages. Typography, colors, whitespace, variants вЂ“ take a look through the corporate branding guidelines of any product or company and you'll quickly become aware of the small margins for interpretation. Visual identity (when done properly) is designed very thoroughly and very specifically. Perhaps you'll use image replacement through CSS, perhaps you'll even venture into SVG files, but have you considered what's possible by designing your own web font ligature?ДЇirst up, a quick word about branding.

Normally, you'll approach the challenge by using an tag. Let's look at an alternative approach for displaying logos on a web page.

Webfont generator