Unpacking the Fluent Design System
In the ever changing world of generating Power Apps, CRM solutions, and Power Portals for customers, we often do not give a thought to the font being used. Microsoft does have a prescribed font though and it is part of a bigger design system called "Fluent".
The Microsoft Fluent Design System employs a font called Segoe UI. It is pronounced like this: se-goe OR se-go-eh.
Microsoft has considered readability across various devices and platforms when choosing this font. If you are on an Android device and Segoe UI is not available on that device, then Android will use the native Roboto font. On a macOS/iOS device if the Segoe UI font is not available, then the native font used is San Francisco Pro Display.
Now that we know Microsoft uses Segoe UI as the font, it is important to understand what a "type ramp", also known as a "type scale", is. A type ramp is a range of type sized related to each other by a growth ratio. It provides a standardized set of font sizes.
Lucky for us in Dynamics 365 CRM and Power Apps, we generally only see five (5) of these type sizes.
Form Header -- This is the oversized font we see at the top of forms in the header. For example, on the contact form it is the contact name. It is the primary field for a table. For this, Microsoft uses "Subtitle 1", which is Segoe UI, semi bold, with a font size of 20px,and a line-height of 26px.
Tabs -- This is the font for the tabs you see on your form. They are "Body 2", which is Segoe UI, regular, with a font size of16px, and a line-height of 22px.
Selected tabs -- This is the font you see for the selected tab on the form. They are "Body 2 strong", which is Segoe UI, semi bold, with a font size of 16px, and a line-height of 22px.
Section headers and sitemap group names -- This is for the name you see on a section found on a form and it is also for the name of a group of entities grouped together on the sitemap. They are "Body 1 strong", which is Segoe UI, semi bold, with a font size of 14px, and a line-height of22px.
Everything else -- For everything else, you are looking at "Body 1", which is Segoe UI, regular, with a font size of 14px, and a line-height of 22px.
Here is an image I put together showing the type ramp:
Font type plays a vital role in Dynamics 365 CRM and Power Apps projects, particularly when using the Microsoft Fluent Design System. It ensures consistency across the Microsoft ecosystem, enhances readability and accessibility, and contributes to a seamless user experience. By adhering to the prescribed fonts, such as Segoe UI, you maintain visual cohesion and brand alignment, ultimately delivering a polished and professional application that resonates with users across various devices and platforms.
Happy Engineering!
For close to a decade our Purely CRM team has been laser-like focused on delivering CRM solutions built solely on Microsoft Dynamics 365 CRM, combined with Power Apps and the Microsoft Power Platform. We’ve expanded our team immensely in the past years to help better serve our clients and partners. Most recently we merged with Endeavour Solutions, a top Microsoft ERP, CRM, and Cloud consulting firm to further expand our talented team of CRM consultants.
Our core focus is on large mid-market and enterprise CRM Design & Development projects, Staff Augmentation, and CRM Support. When needed we can also tap upon our peers at Endeavour for Dynamics 365 Business Central ERP to provide an All-in-One Cloud ERP-CRM. We provide services to clients Coast to Coast across the United States and Canada. We do not use resources overseas.
Reach out to explore our track record, rates, skills, and approach to discover how we can collaborate and drive YOUR SUCCESS.
