Top 5 Typography Tools For UI/UX Designers

Marvel

Marvel is rapid prototyping, testing, and handoff tool for digital designers that has received endorsements from companies such as Nokia, Monzo, BuzzFeed, and Deliveroo. To prototype with Marvel, you can import previously created static designs or create wireframes from scratch using pre-made elements and icons. You can also use the Sketch plugin to sync Sketch files directly.

Marvel's prototyping tool is relatively simple. Once you've completed your static designs, hover over any file in your project and select "Prototype." This will take you to the editor, where you can add effects, transitions, and gestures and create hotspot links. Close the editor and press "Play" in the project view to preview your prototype. This will launch you into Play mode, where you can click around.

Fonts Ninja

Do you get typography inspiration from fonts you see on the internet? Instead of frantically searching for the font online, try the Fonts Ninja Chrome extension, which allows you to hover over text on your screen to instantly identify a font, line spacing, and letter spacing. Furthermore, Fonts Ninja allows you to test the font with your desired text by typing something into the extension's drop-down window. If you adore it, there's a handy link to the web font's source where you can buy and download it for free.

Font Self

Have you ever wished to design your custom font? Fontself Maker is an Adobe Illustrator and Photoshop extension that can quickly convert any of your letterings into OpenType fonts! Drag and drop any shape or handwriting into the extension, and it will instantly transform it into an editable glyph. It costs $39 for Adobe Illustrator or $59 for Adobe Illustrator and Photoshop.

Framer

Framer is a free app and website prototyping tool that allows you to quickly create realistic, high-fidelity designs and animations.

You can create interactive prototypes with Framer by dragging and dropping pre-made interactive components and adding animations and transitions. Framer generates code-based prototypes based on your designs that behave and feel exactly like a real app or website. Framer includes many tools and features for creating rich prototypes, such as adaptive layouts that serve as the foundation for your design, fully customizable interactive components, and built-in paging, scrolling, and navigation tools. You can also make Magic Motion transitions in which layers of the transition's origin and target will animate into their new styles and positions. Framer, in a nutshell, is all about rapid, high-fidelity prototyping through ready-made components and user-friendly drag-and-drop functionality.

Proto.io

Proto.io is a browser-based prototyping tool that features an easy-to-use drag-and-drop interface and hundreds of pre-made templates and components. Proto.io allows you to quickly create basic low-fidelity prototypes that can later be transformed into more realistic high-fidelity prototypes. To begin by creating low-fi wireframes from scratch, first choose the device/screen size for which you want to design, then add essential UI elements from the extensive UI library. Alternatively, you can modify an existing template. Existing wireframes from Sketch, Adobe XD, Figma, and Photoshop can also be imported. You use the Proto.io interaction wizard to add motion and interactive properties to your basic wireframes to turn them into prototypes. You can connect one screen to another using connector, change the type of transition using the drop-down menu, and polish your prototypes with over 6,000 ready-to-use digital assets and animations. Prototypes can be viewed in preview mode, downloaded and tested with the Proto.io mobile app, and shared with the public via a public URL.