Instruction Videos
Typography and symbols
290 views
What you'll learn
How to add an arrow or symbol to a button element.
How to adjust line height and line spacing.
Where to find symbols to use.
View transcript
Designers are often responsible for the tactful integration of both type and imagery. But there’s so much that can be achieved by using just type alone. Today we will cover what it means to use typography and symbols, we’ll also go over some bold examples of how to use type. And we’ll cover some general best practices as well. Typography is the art of using type to create appealing, readable, and legible messages. When deciding how to convey a message through type, a designer should consider all aspects of form. From selecting the appropriate typefaces, all the way down to fine-tuning the space between each pair of letters. Aside from letters, there are also text symbols. Text symbols are graphics that can be made by pressing a series of keys on your keyboard. Since they’re type, they can be contained in a text element, which allows for more layout opportunities than other types of imagery in Foleon. Like putting an arrow or symbol inside a button element. Here are some bold and fun pages designed by our Creative Director Vincent, these pages are using only type to achieve complex and engaging layouts. Color, contrast, and size are used to convey a visual hierarchy. This dynamic approach to type can be used to highlight important areas on a page, and to break up any dull repetitive blocks. When experimenting with type, you can change the line height and the line spacing from the font menu style bar at the top of the editor. A hard enter is used to create a text style break between two lines of text. This allows you to put more than one font or style in the same text element. By highlighting text, you can then choose to change the color of it, and even the transparency of it, through the color menu. In order to use text symbols and see what could work for your brand, we recommend visiting a website which lists a variety of them. We use unicode-table.com and coolsymbol.com It’s important to check your brand style guide to see if bold type experiment is compliant with your brand. If you don’t have an established brand guide, and type design is new to you, we recommend sticking to one font across your doc design process. A thoughtful pairing of two fonts can also look nice, as long as they are different enough to achieve a satisfying contrast. A text symbol or glyph will only work if the font you’re using supports that symbol. Some text-symbols are more universal than others, some emojis may not show up on certain devices even if your font supports it. Trial and error is necessary to determine which symbols will show appropriately and universally.. I hope some of these tips prove to be useful as you dive deeper into designing amazing Foleon Docs. Good luck trying out typography and symbols to make your Foleon Docs look even better!