Figma serif fonts3/7/2024 That mechanism helps fonts when they run out of characters, and it’s called font fallback. Moreover, all have one common underlying cause-an important and in some ways very impressive mechanism of computer typography many of us might be completely unaware of. They seem like small bugs that permeate everyday interaction with our tasteless machines.īut these are not bugs, at least not in the traditional sense. These little transgressions can be confusing, but not frustrating enough to spend time dissecting. (If you actually raised your hand, thank you!) The foundation of your typography is formed by the selection of the fonts you’ll be using in your design.Something tells me there is no one left with their hand down at this point. A Comprehensive Guide to Typography Basics.answering questions such as: Should I use serif or sans-serif? Where should I use slab serif fonts? What are monospace fonts meant for? As such, we’re going to start the course by covering the difference between font classifications in practical terms, i.e. Welcome to the first section of Web Typography Basics in Figma. This first section of the course is gonna be all about font selection, and we're gonna break that into three parts. The first part is gonna be about the different classifications of fonts. Then we're gonna move on to combining fonts together, and then the third part, we're gonna talk about font stacks. So first up, we're looking at font classification because it just helps to simplify the process of font selection. Generally speaking, if you have an idea what type of a style you're going for in a design, you're gonna be able to match that to a certain category or a classification of font. There are six essential categories of fonts. So if you know which category you're looking for, you can immediately reduce the number of fonts that you need to troll through down to a sixth of what it otherwise would be. What you can see on the screen here is a set of examples of each of the different classifications of font. ![]() ![]() So just to quickly rattle them off, we've got serif fonts, sans serif fonts, slab serif fonts, semi-serif, script, and monospace. Now, Google Fonts are automatically available for you inside Figma, whether you're using a desktop version or an online version.Īnd in each of these examples, the first four of the fonts that you're seeing on the screen here come from Google Fonts. However, if you want to use local fonts, fonts that you have installed on your machine inside Figma, there are two ways. You can either go via the desktop application for your operating system. If you're using the desktop editor on either Windows or Mac, then it will just automatically pick up your local fonts. There isn't actually an official Linux version of the Figma desktop application, but there is an unofficial version which is built on Electron. It's also free and open source, and I will link to that in the notes below this video if you are working on Linux. This will also pick up your local fonts automatically, but in my experience so far, it will only pick up fonts that are inside your user share fonts TTF folder. So you might just need to take some manual steps to make sure that your fonts are inside that folder, and then you'll be all good on Linux as well. ![]() If you're using the online version of Figma, then you can still use local fonts as well, but you're gonna need to install the Figma Font Helper. Now, this one is only available for Mac and Windows. And I'll provide a link in the notes below this video to the instructions on how you can get that local font enabler set up on your system. Okay, now with that bit of housekeeping out of the way, back to the fonts. In a lot of lessons in this course, we're actually going to be building on top of topics that we've previously covered already on Tuts+. And in the case of this lesson, we're building on this excellent article titled, A Comprehensive Guide To Typography Basics.
0 Comments
Leave a Reply.AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |