Hire a Team
TYPOGRAPHY
Outfit & Spline Sans. Free fonts combo for every case.
We have nominated the combination of free fonts Outfit & Spline Sans to use for every project. Whether it's branding, or complex web application development, this is the best choice in 2023. Let's breakdown how this pair looks.
December 2022 · 2 mins read

by Roman Kamushken

Userpic
← Back

The best fonts pairing for 2023 nominated by Setproduct

2023 is set to be continued full of bold and creative fonts in graphic design. We are constantly looking for the latest and greatest font pairings to enhance our visuals. Two of the most popular picks for font pairings are Spline Sans and Outfit.
Spline Sans is a modern sans-serif typeface with a unique and eye-catching aesthetic. Its geometric shapes and rounded edges create a unique look that is perfect for branding, print materials, web & apps design. Spline Sans is nicely accessible and easy to read. Fits ideally to use as a body text.

Outfit is a geometric sans-serif typeface with a modern and sophisticated look. Its strong and bold shapes make it a great choice for headers that need a bit of a punch. This trendy neo-grotesk font is crafted perfectly, well shaped, and always on our UI design radar.
Best fonts combination for 2023 in graphic design
Duplicate for Figma → https://www.figma.com/community/file/1190318968556493722
These two fonts work together very well, creating a strong and modern look that is perfect for any graphic design project. They are free fonts, available at Google Fonts and licensed as OFL. This makes them the perfect choice for any designer looking to create an eye-catching design without breaking the bank.

Let's see how it works for the website, dashboard, mobile app

Using these two fonts together can add a modern and sophisticated look to any design project. Whether used for branding, print materials, web & apps design, these two fonts will make any project stand out from the crowd. They are versatile enough to be used in a variety of different design styles, making them the perfect choice for any designer looking to create a modern and stylish look.
We've picked various screens from our impressive Figma templates collection, replaced fonts with Outfit & Spline Sans, added some visual smoothness and here is how universally this fonts pair looks everywhere:
Best fonts combination for app design, websites and dashboard
Duplicate for Figma → https://www.figma.com/community/file/1190318968556493722
In conclusion, font pairings are a great way to create a unique and eye-catching look for any design product. We've nominated Spline Sans and Outfit are two of the best font pairings for 2023 and can recommend to use in a variety of different design tasks. They are free and available at Google Fonts, making them a great choice for any designer looking to create an eye-catching design without breaking the bank.
Subscribe to Setproduct
Once per week we send a newsletter with new releases, freebies and blog publications

More to ☕ read

Choosing app UI, UX design & development studio
How to choose the right web design and development agency for your application? It is a important decision that can have a major impact on the success of your product.
Button UI design – Comprehensive tutorial on UX, styles and usability
Designing buttons that work well requires taking into consideration the style, feedback, and accessibility. The design goal should be to make the them as intuitive as possible so the user can interact with Buttons seamlessly.
Adobe Creative Cloud is stealing UI designs to train the AI
The issue of Adobe Creative Cloud stealing artwork is a serious one and is causing a great deal of concern in the creative community.
18 design & developer resources to boost your productivity and creativity
In today's list, you will find texture and gradient generators, beautiful fonts, Figma plugins, AI tools, and much more.
The best 2023 fonts pairing for app design, website, or presentation
We, as Setproduct design studio, nominated the combination of free fonts Outfit & Spline Sans to use for 2023. Whether it's a website, or complex dashboard, this pair fits everywhere.
How is my clock hides behind a mountain? iOS 16 lock screen feature
No big deal! Apple used their advanced 3D rendering technology to create the mountain in the background. The mountain was rendered using a combination of textures, lighting, and shading to give it a realistic and lifelike appearance.
Freelance designer tips: Difficult clients & endless design revisions
Solid strategies on how to work with difficult design clients and protect yourself from endless revisions without getting paid additionally.
Calendar UI design – Date picker best practices & inspiration
Calendar & date picker UI design inspiration & UX tutorial. Got stuck at designing calendars? In addition to useful UX guide, covered in this post; we've included an inspiration gallery full of calendars. Enjoy, steal and remake!
Freelancer guide: how to switch from Fixed-Price to a Hourly Rate
How to set a hourly rate to avoid cases where a project with a pre-agreed amount ended up going beyond implementation because of seemingly insignificant changes on the client's side.
Checkbox UI design – React component styled in Chakra
Styling ideas for React checkbox component designed in Figma and styled in Chakra. This post contains UI design ideas, live components, code samples and some inspiration to assist coders design better.
How to make 3D animation effect on page scroll HTML & JS
In this tutorial, we'll take the Apple AirPods page as an example and show you how to get this effect if you want to create a webpage with the same effect.
Breadcrumbs UI design exploration — Anatomy, UX tips, use cases overview
Breadcrumbs — is a composition of navigational links to reveal the current position in case of multi-level nested structure for a website, dashboard or application.
Best 20 design resources for startups, developers and designers
Today's list includes a bunch of cool icons, powerful UI kits, great collections and tools, even a history of user interfaces, and so much more.
How to design a landing page to improve conversions
The process of making a high-converting landing page. We've put together design rules and outlined the structure of a successful website.
8 designers and developers bootstrapped a side project to success
We've gathered some inspiring stories of 8 Twitter fellas (mostly designers and developers), who bootstrapped their side projects to life and succeed.
Top 11 design tools and resources to kickstart your project
We've reviewed the most popular launches on ProductHunt after the first quarter of 2022 and here is what we discovered.
Badge UI design exploration — Tips & tricks, usability, and use cases review
Badge (aka Tag) — small overlapped UI item which indicates a status, notification, or event that appears in relativity with the underlying object.
App Bar UI design exploration — Anatomy, specs, states, templates
Application Bar (aka Navigation Bar) — displays prior in-app controls related to the current app section.
Accordion UI design exploration — Styles, states, usage, templates
Accordion (aka Expansion panel) — is a vertically stacked list of options that can expand/collapse to reveal or hide more associated content.
Avatar UI design exploration — The states of userpic component
Avatar (aka Userpic) — is a component used to represent a user's profile picture. The default content for Avatar is empty state, initials or user's picture.
Why do we need UI kits: Our customer's redesign case study for ecommerce
Recently, we've interviewed a freelancing designer from India - Narendra Ram. He used our Material-X UI kit and made a high-quality and professional redesign of the seller’s panel of the GTrendz e-shop
Material–X: The tiny UI details you won't notice till you get too close
Fresh features and UI tricks: here is what's new in our enhanced Material-X design system for Figma
16 fresh design resources of February 2021
Here is what we are gonna review today: icons, emojis and illustrations, the coolest articles on working with color and tables for enterprise, effective plugins for Figma, sources for inspiration and much more
14 useful UI design resources handpicked. January 2021
What's in today's release: various generators, cool sources for your inspiration, stylish icons, top 2020 products from Product Hunt, tools for exporting animations and GIFs, and much more
The most significant releases of 2020 on a UI design scene
Last year has passed. It was a very unstable year that changed the way things were. In this post, we have summed up the results of 2020, where we have collected for you the top events from the design world
13 fresh and useful design resources of outgoing fall 2020
We’ve picked up the best links to resources that are trendy in the design industry, and that will help you get some inspiration and speed up your workflow
6 ways to generate side income for designers and developers
By launching your own side project, you have a great chance to make it your core business. Sometimes such projects become the work of a lifetime. Setproduct.com is living proof of this. It started as a side project, which became the main source of income within 2 months
Top 15 Figma resources: UI kit, design system, components, illustrations
Handpicked collection of the newest templates for Figma: UI kits, UX tools, design systems, icons, illustrations and more
iOS / Android app case study — From Figma UI kit to application release
This is the story of how a ready-made professional UI kit in Figma helped to create an app, which is now gaining popularity in the App Store and Play Market
Remote work: 9 tips to manage your time and get more productivity at home
Just follow a few simple rules that will seriously increase your effectiveness and help you manage your time wisely
Figma for enterprise: Top 10 tech companies where design tool helped to grow
This tool has proven to everyone it's worth it. Figma has convenient and wide functionality, and the fact that companies such as Microsoft and Uber give preference to Figma - already says a lot
Best 20 free Figma templates for your Design system, Dashboard or Application
Figma freebies reviewed: Ant UX Wireframes, Avatar Illustration System. Brainstorming Design System & Brainstorming Table System. Bright Kit - a kit to rapidly design the landing pages. Browk UI Kit - a design system that keeps updating every week
iOS patterns - UI design inspiration made in Figma
Handcrafted UI inspiration gallery for iOS patterns and best UX practices to use in application design
Top 14 Figma plugins for fixing styles, manage grid, auto-layout, run tracking and more
Plugins reviewed: AutoGrid - grid support for auto-layout. Tracking – plugin for creating tracking annotations. Find and Replace Colors – organizing color styles in design. Spacing Manager – plugin for consistent spacings in components. Geometric – creating math shapes and curves and more
Free Figma resources — Best 15 templates of design systems, applications, icons and more
Templates from the Figma community to save your time, boost a productivity and cut costs for a product design
Figma plugins review — Best 16 underrated plugins to speed up design workflow at the beginning of 2020
We’ve collected the tools that help us improve our workflow, boost our productivity and just add some joy to the design process. We’ll start from the last place, so make sure you don’t miss all the fun
Design system features - Start with the UI kit & app templates
How purchasing commercial design system for Figma (or Sketch) can save a significant amount of time for you or your organization
How to create UI kit - Design system to sell worldwide
Your design asset will help someone speed up their work and you will get rewarded for it
8 simple UI design tricks for more dynamics in static prototypes
Perhaps this will help to make your best shot on Dribbble or win a few points in customer's eye or the design team-lead, because of the use of these techniques positions you as a performer attentive to UI details
Table UI design tutorial – Figma data grid within single cell-component
There are three approaches to table design to create a data grid with a flexible architecture. In each case, either a row component, a column component or a cell component is used. Each of the cases will be discussed in detail below.
How to create responsive mobile components in Figma
Every time you create a new project, you want to make it better than the previous one. You want to choose a more elegant solution, to create convenient and flexible components of the design system in Figma.
Free Figma iOS components - Datepicker
Based on isometric angled editable text, this template feels like real and most natural iOS datepicker
Monetizing the design: what I learned after a year of non-stop UI grinding
My 15 insights of successful digital product. Results of the year for the UI designer, who didn`t have any interesting projects in his portfolio and decided to create his own design products for everyone.
Orion UI kit - data visualization and charts templates for Figma
Figma library with 35+ full-width charts templates served in light & dark themes. Contains 200+ of dataviz widgets that look perfect on desktop & mobile screens. Organized as a design system for Figma and supported with 500+ components based on auto-layout
Figma components tutorial: the management for Instances
Pros and Cons of swapping between hidden layers and detaching a Component into the new Master. Inspired by Userpic design item.
Show more ⬇︎