![]() So here is our selection of the top Figma fonts for a modern UI design.įlorian Karsten created the slab-serif display typeface known as Montagu Slab. Starting with open-source fonts, you don’t need a huge font collection with hundreds of high-end typefaces to make ground-breaking designs. And the best part, most of them are free to use. All fonts in the selection are readable, efficient, and mobile-friendly. The good news is, we’re going to look through the best Figma fonts to bet on for your designs. On the other hand, you also want a typeface that is readable, effective, and mobile-friendly to perform the best across all platforms and screen sizes. On the one hand, you want user interface fonts that are memorable and consistent with your brand. It can be difficult to choose the ideal UI font for your website or app. The last step is to align the two text boxes to overlap using the align tools for vertical and horizontal center.What are the Best Figma Fonts for Modern UI Design? Change the font size to the size you want them to appear and set the text boxes to the same height and width.Īssemble and align the parts of the duotone iconĪdjust the color and opacity of the two layers as you like. Create a second text box and epeat for the secondary glyph. Open up your desktop design app and create a text box with the font set to Font Aweseome 6 Duotone, then paste in the primary glyph. ![]() Find the Icon and Copy the Glyphsįirst, find the icon you want to use in the icon gallery.Ĭopy the glyphs one at a time and paste them in your graphics program. You'll find the glyphs in any icon's quick preview in the icon gallery or an icon's detail page. You can also add duotone icons into your designs as glyphs, but you'll need add each of the two layers separately and then take an extra step to align the two layers. You can just paste in the icon's glyph into a text layer and it will appear! Choose a Style by Adjusting Font Weights If you are using the Kit custom icon font, it works the same as all the other Font Awesome font glyphs. Rocket's glyph pasted into the text layer renders the icon Then, paste the glyph of that icon into the text layer you've created. ![]() Select the copy glyph button on any icon's details First, find the icon and copy its glyph to your clipboard. Next, you're all set to reference the icon you want to use. ![]() Includes Custom Icons in a Kit Download (if you're using one) Includes Sharp Solid, Regular, Light, and Thinusing your app's font/typeface selector, find and select the Font Awesome icon family you want to use for the current text layer/block: Font/Typeface name However your app allows you, create a new layer or text block to insert text into.Ī new text layer created in a Figma document We'll use a new document in Figma (opens new window) for the walkthrough below. Set up Font Awesome in your project and the force is with you.Īdd an Icon as a Glyph Open a Document in Your Desktop AppĪfter getting set up, open a new or existing document in the Desktop app you want to use Font Awesome icons in.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |