Design+Code logo

Quick links

Suggested search

What are font managers?

As a designer, you have to work with fonts on a constant basis. Simply selecting a font out of the various options available can sometimes appear to be daunting. The font managers make it so much easier to organise these fonts. With features like syncing, font managers make it easier for a team to collaborate.

Why use font managers?

Now, that we know what font managers are and some of their major features, let's see why we should use these. Aside from making collaboration and organising easier, these managers also give you access to tons of fonts and some go a step further and provide you with things like icons too! You can also preview a font before using it, similar to how you would on the Google Fonts website.

Right Font

With Right Font you can also sync your fonts with your team and can favorite any font. It automatically syncs fonts from Google Fonts and Adobe Typekit. You can also access different icons that you can use for your designs, it is a really nice app. UI S27 01

Font Base

FontBase is a font manager app. With it you can share fonts with your whole team just by adding them to any cloud folder. You also have access to any font from Google's library in a single click. It is a really interesting tool with many hidden features. UI S27 02

Typeface 2

Typeface is a font manager for macOS that lets you organize font collections and it has a minimal UI. It also has a dark mode. UI S27 03

Work with Font Manager

For this exercise, we will use RightFont and Sketch. If you don't have them, you can download them and use their trial versions. UI S27 01

Once installed, let's open RightFont. Go to the left side bar and select All Fonts so you can have a quick preview of all the fonts installed on your machine. UI S27 04

Normally when you are designing a brand you will like to see how the name of the brand looks like in different types of fonts. With RightFont, you can do that by typing any kind of word in the box that is located in the top right of the screen. In my case, I will type 'design code'. Automatically, you will see that the word will be shown in different types of fonts. UI S27 05

Now let's put both apps, Sketch and RightFont next to each other. Add a text in Sketch with the words Design Code. If you'd like to see how your font changes in Sketch, RighFont has a small shortcut that lets you change the text in Sketch directly from RightFont. This makes your workflow more efficient UI S27 06

Conclusion

Having your fonts organized is a key step to efficiency in your workflow. It is interesting how much time you can save when you can easily see what type of fonts are being used at the spot.

Learn with videos and source files. Available to Pro subscribers only.

Purchase includes access to 50+ courses, 320+ premium tutorials, 300+ hours of videos, source files and certificates.

BACK TO

Pick Fonts

READ NEXT

Icon Organizer

Templates and source code

Download source files

Download the videos and assets to refer and learn offline without interuption.

check

Design template

check

Source code for all sections

check

Video files, ePub and subtitles

Browse all downloads

1

UI Design Aesthetic

Learn about UI design aesthetics.

3:52

2

Design for accessibility

Learn about accessibility in design.

1:59

3

Localization

Read more about the importance of localization.

1:14

4

Color Selection

Select colors for your projects

5:06

5

Pick Fonts

Select the most suitable fonts for your design.

3:35

6

Font Managers

Manage your fonts more efficiently.

2:06

7

Icon Organizer

Organize your icons in a better way.

2:59

8

UI Sound Design

Importance of sound in UI design

4:25

9

Stock Images

Find the right images for your UI

1:29

10

Image optimization

Optimize your images to improve performance.

1:46

11

Illustrations

Add illustrations to your design project

1:38

12

Realistic Mockups

Resources to add realistic mockups to your design.

2:47

13

UI 3D Assets

Work with 3D assets in your design projects

2:29

14

Introduction to Animations

Learn about basic animations in UI design.

5:09

15

UI Animation Resources

List of tools and resources for UI animation.

1:45

16

Apple Watch Faces

Create customizable watch faces for the Apple watch

2:06

17

Designing for Apple Watch

Getting started with Apple Watch Design

4:24

18

Designing for Apple TV

Learn the basics steps to design for Apple TV

1:58

19

Design for Game Center

Learn how to design for Game Center

3:43

20

Designing for CarPlay

Learn the basics of designing for CarPlay

1:37

21

Designing App Clips

Learn how to design app clips for iOS

7:05

22

Designing Widgets

Design widgets for your applications.

3:29

23

Design Systems

Create design systems for a better workflow.

1:27

24

UI Kits

Learn more about UI Kits and where to find them.

3:33

25

Prototyping Tools

Learn about prototyping tools.

3:22

26

Voice prototyping

Take a look at voice prototyping.

2:14

27

Prototyping with Code

Read more about prototyping with code.

3:01

28

Turn your Designs into Code

Learn how to turn your Designs into Code.

2:18

29

Version Control Tools

Share and synchronize your files with your team

2:12

30

Developer Handoff

Learn more about developer handoff.

1:05

31

Color Theory

Understand color theory to select the best color themes for your application.

10:35

32

Dark Interfaces

Add dark mode to your application.

3:53

33

Icons

Learn more about UI icons.

10:32

34

Background Patterns

Create beautiful background patterns.

5:41

35

Typographic Scales

Learn more about typographic scales.

2:40