share

DESIGN

3min read

Icon Fonts: Welcome to the Post-Pixel World

Two weeks ago Magda explained how to minimize your cutting time by using Photoshop Generator. Today I will show you how to avoid cutting altogether by replacing raster assets with fonts. This tutorial requires a basic level of Adobe Illustrator.

When skeuomorphism has gone with the wind and flat design is becoming more and more popular, we don’t use many gradients and/or drop shadows in interfaces. If we compare simple icons and letters, we can see they have a similar structure.

letters_vs_icons.gif

When icons are simple, solid shapes, we can successfully replace raster assets (like *.png files) with vectors… and that’s the point: fonts are vectors!

font_awesome.jpg

Many web designers use Font Awesome (which is a great collection of 479 icons) in their web projects, and it’s working really well because they’re rendered flawless on any screen density and all parameters like size, position, color and so on are easily editable (and we don’t have to prepare a new asset every time we want to e.g. change its color). I’ve been using Font Awesome in several web projects, but I never realized that I could use it in an app (big kudos to Tomek for this hint!).

Tools

First of all we’ll need Adobe Illustrator to prepare vector shapes in proper way. Next we will combine all these shapes into a font.

There are plenty of great tools for creating/editing fonts like Fontlab or Glyphs, but to build an icon set we don’t need such professional software (with setting alternates, ligatures etc). I found an easy, adequate web based tool called Fontello.

Start with Shapes

Draw or import vector icons to Adobe Illustrator; make sure they’re solid, merged shapes.

vector_icons.png

It’s easy to check: select an item and make sure it’s completely black. If it’s not, use the pathfinder tool (Window > Pathfinder) to merge all shapes together.

pathfinder.png

If there are some normal lines (with parameters like weight or cap style) in icons, we should outline them to make solid shapes (Object > Path > Outline Stroke).

outline_stroke.png

Now we should distribute all shapes on separate artboards (make sure all artboards are even and all icons are properly aligned).

artboards.png

When we’re done, we can export all artboards to separate *.svg files (checkbox “use artboards” should be checked). Leave the standard SVG Options the way they are. It’s helpful to save them in a separate folder.

export.png

Font Making!

Open fontello and drag each icon into the Custom Icons area.

drag.png

Select appropriate icons.

select.png

You can customize the icons’ names, but it’s not necessary.

naming.png

Go to “Customize Codes” and take a screenshot of the icons with their unicodes - this will be helpful during the implementation. You can also change the unicodes if you need to.

unicodes.png

Type in the font name, click “Download webfont” and that’s it: you have your own custom font!

download.png

Using the font (in Illustrator)

If you’re working in Illustrator on wireframes or final designs, you can use your custom font there. After font instalation all characters will be easily available via the glyphs preview (Type > Glyphs).

usage.png

Whale App Icons SVG in ZIP file

Whale App Font

share


GosiaUI Designer

LEARN MORE

Contact us if you have any questions regarding the article or just want to chat about technology, our services, job offers and more!

POLIDEA NEWSLETTER

Sign in and expect sharp insights, recommendations, ebooks and fascinating project stories delivered to your inbox

The controller of the personal data that you are about to provide in the above form will be Polidea sp. z o.o. with its registered office in Warsaw at ul. Przeskok 2, 00-032 Warsaw, KRS number: 0000330954, tel.: 0048 795 536 436, email: hello@polidea.com (“Polidea”). We will process your personal data based on our legitimate interest and/or your consent. Providing your personal data is not obligatory, but necessary for Polidea to respond to you in relation to your question and/or request. If you gave us consent to call you on the telephone, you may revoke the consent at any time by contacting Polidea via telephone or email. You can find detailed information about the processing of your personal data in relation to the above contact form, including your rights relating to the processing, HERE.

Data controller:

The controller of your personal data is Polidea sp. z o.o. with its registered office in Warsaw at ul. Przeskok 2, 00-032 Warsaw, KRS number: 0000330954, tel.: [0048795536436], email: [hello@polidea.com] (“Polidea”)

Purpose and legal bases for processing:

 

Used abbreviations:

GDPR – Regulation (EU) 2016/679 of the European Parliament and of the Council of 27 April 2016
on the protection of natural persons with regard to the processing of personal data and on the free movement
of such data, and repealing Directive 95/46/EC (General Data Protection Regulation)

ARES – Polish Act on Rendering Electronic Services dated 18 July 2002

TL – Polish Telecommunications Law dated 16 July 2004

1)        sending to the given email address a newsletter including information on Polidea’s new projects, products, services, organised events and/or general insights from the mobile app business world |art. 6.1 a) GDPR, art. 10.2 ARES and art. 172.1 TL (upon your consent)

Personal data:name, email address

2)       statistical, analytical and reporting purposes |art. 6. 1 f) GDPR (based on legitimate interests pursued by Polidea, consisting in analysing the way our services are used and adjusting them to our clients’ needs, as well as developing new services)

Personal data:name, email address

Withdrawal of consent:

You may withdraw your consent to process your personal data at any time.

Withdrawal of the consent is possible solely in the scope of processing performed based on the consent. Polidea is authorised to process your personal data after you withdraw your consent if it has another legal basis for the processing, for the purposes covered by that legal basis.

Categories of recipients:

Your personal data may be shared with:

1)       authorised employees and/or contractors of Polidea

2)       persons or entities providing particular services to Polidea (accounting, legal, IT, marketing and advertising services) – in the scope required for those persons or entities to provide those services to Polidea

 

Retention period:

1)       For the purpose of sending newsletter to the given email address – for as long as the relevant consent is not withdrawn

2)       For statistical, analytical and reporting purposes – for as long as the relevant consent is not withdrawn

Your rights:

 

Used abbreviation:

GDPR – Regulation (EU) 2016/679 of the European Parliament and of the Council of 27 April 2016
on the protection of natural persons with regard to the processing of personal data and on the free movement
of such data, and repealing Directive 95/46/EC (General Data Protection Regulation)

According to GDPR, you have the following rights relating to the processing of your personal data, exercised by contacting Polidea via [e-mail, phone].

1)       to access to your personal data (art. 15 GDPR) by requesting sharing and/or sending a copy of all your personal data processed by Polidea

2)       to request rectification of inaccurate personal data
(art. 16 GDPR) by indicating the data requiring rectification

3)       to request erasure of your persona data (art. 17 GDPR); Polidea has the rights to refuse erasing the personal data in specific circumstances provided by law

4)       to request restriction of processing of your personal data (art. 18 GDPR) by indicating the data which should be restricted

5)       to move your personal data (art. 20 GDPR) by requesting preparation and transfer by Polidea of the personal data that you provided to Polidea to you or another controller in a structured, commonly used machine-readable format

6)       to object to processing your personal data conducted based on art. 6.1 e) or f) GDPR, on grounds relating to your particular situation (art. 21 GDPR)

7)       to lodge a complaint with a supervisory authority,
in particular in the EU member state of your habitual residence, place of work or place of the alleged infringement if you consider that the processing
of personal data relating to you infringes the GDPR
(art. 77.1 GDPR)

No obligation to provide data:

Providing your personal data is not obligatory, but necessary for Polidea to provide you the newsletter service

Refusal to provide the above data will result in inability to receive the newsletter service.

Profiling

In the process of providing the newsletter service, we make decisions in an automated way, including profiling, based on the data you provide.

 

“Profiling” means automated processing of personal data consisting of the use of your personal data to evaluate certain personal aspects relating to you, in particular to analyze or predict aspects concerning your personal preferences and interests.

 

The automated decisions are taken based on the analysis of clicked and viewed content. They affect the targeting of specific newsletter content to selected users registered to receive the newsletter service, based on the anticipated interests of the recipient.