Adobe Fonts and XD, Oh my!
The next step in my process of setting up a design system is typography! In the previous post, I demonstrated how I populated my CC libraries with a color palette, lets continue this exercise with fonts! We’ll be exploring Adobe Fonts today. In the future, maybe we can sit and create our own! However, Adobe Fonts gives you access to unlimited fonts with no extra charge with your Creative Cloud subscription, and they are all already licensed (super useful if you’re not familiar with art buying or licensing for commercial use). Personally, I prefer to focus on all the creativity than legalities when I design!
Everyone’s design system can be done differently but for this super fun exploration, I’m using a design system checklist. This source is “An open-source checklist to help you plan, build and grow your design system.”
I’m doing this exercise out of order based on my preference of starting with colors and fonts but you definitely should establish your brand based on its values and what makes you stand out from others.
From my previous post, you realized that I love bright colors, and to be honest, the bolder the better. I want the ongoing tutorials to show you that learning Adobe XD can be fun and experimental without feeling like you’re taking a class. There are so many blogs and tutorials that I love learning from but I absolutely understand if you feel like everyone knows this software already and you don’t. However, XD is so much fun!
So let’s select some fonts! Adobe’s ecosystem is so resourceful so I came across a UX Font Pack curated by the Adobe Type team, so I’m just going to run with it because since these tutorials are shared on screens I need screen-friendly fonts! They even have an XD starter kit that you can download here.
The pairing that matches what I’m doing is Montserrat and Roboto. As soon as you open the starter kit, your fonts will be activated in your Creative Cloud.
I went ahead and added them to my XD Document Assets, for now, to see what works. Open your libraries on the lower left and add the fonts (see video).
If you want to add fonts to Adobe CC at any time to utilize in other Adobe apps in your workflow, as I do, there are numerous ways but here are 3 different steps:
- Navigate to the font you’d like in Adobe fonts and activate the font you like. As a reminder, I’m using Montserrat and Roboto (and Slab) families.
- Or, if you want to add them to the library that we created in the previous post, as I did. Add them manually through another app (i. e. Photoshop or InDesign). You can achieve this by adding Character Style to your library—noticed how I did that with the accompanying gif.
- Even easier, publish your entire XD as a library! Next to Document Assets, there’s an export icon that allows you to publish your library with permissions. I love this option because when I open the other apps, everything will be there!
So, you’ve selected your fonts. Let’s use them! I’ll be exploring what works best for me in my social feed.
See how this turned out by following my feed on Instagram: @designladyllc . For the next post, let’s have some fun with our design system by creating some digital prototypes! Follow this blog to keep updated.
