Home
appsIntroduction
expand_more favoriteFoundations
expand_more paletteDesign
expand_more grid_guidesCase study
download_for_offlineResources
Degular is the typeface that makes our brand unique. Designed by James Edmondson from OH no Type Co and licensed through Adobe Fonts, the beautiful character curves need to be flaunted in large display titles and headings.
MedBrief currently holds a license of Degular for three desktop users, so the usage is limited to marketing material.
Inherited from Google's Material 3 open-source design system we use Roboto as our default typeface for body text, and product UI.
Roboto has six font weights to choose from ranging from thin to black and over 3,300 glyphs for representing hundreds of languages around the world. This typeface should be used at all times for body and paragraph text and even headings when Degular is not available*.
* With e-mail clients like Outlook, where third-party fonts are not supported, Roboto is replaced with Arial which is a pre-installed font on most devices.
Download Roboto open_in_newA type scale is a selection of font sizes that can be used across an app, ensuring a flexible, yet consistent, style that accommodates a range of purposes.
The Material Design type scale is a combination of 15 styles, each with an intended application and meaning. They’re assigned based on use (such as display or headline) and grouped more broadly into categories based on scale (such as large or small).
For office use cases (pretty much anything not styled with CSS) such as documents, brochures and presentations, we use a static or fixed type scale.
Font size: 78pt (104px)
Font weight: Regular (400)
Font size: 63pt (84px)
Font weight: Regular (400)
Font size: 48pt (64px)
Font weight: Regular (400)
Font size: 39pt (52px)
Font weight: Regular (400)
Font size: 30pt (40px)
Font weight: Regular (400)
Font size: 26pt (34px)
Font weight: Regular (400)
Font size: 20pt (26px)
Font weight: Regular (400)
Font size: 16pt (21px)
Font weight: Regular (400)
Font size: 12pt (16px)
Font weight: Regular (400)
This is what a lead paragraph looks like.
The font family used for body text is Roboto or Roboto flex.
Font size: 13.5pt (18px)
Font weight: Light (300)
This paragraph uses body large as a font size. The font family used for body text is Roboto or Roboto Flex.
Font size: 10pt (13px)
Font weight: Regular (400)
This paragraph uses body medium as a font size. The font family used for body text is Roboto or Roboto Flex.
Font size: 9pt (12px)
Font weight: Regular (400)
This paragraph uses body sm as a font size. The font family used for body text is Roboto or Roboto Flex.
Font size: 8pt (10px)
Font weight: Regular (400)
This is label text. The font family used for labels is Roboto or Roboto Flex. Labels are used in fine prints like footers, terms and conditions and footnotes.
Font size: 7.5pt (10px)
Font weight: Medium (500)
For digital media like our website, we use a fluid type scale to resize according to the browser's window size. For mobile, we use the major third scale with a ratio of 1.250. For larger desktop screens, we use the perfect fourth scale with a ratio of 1.333.
Font size: clamp(2.89rem, 18.91vw + -1.84rem, 13.29rem)
Font weight: Regular (400)
Font size: clamp(2.57rem, 13.46vw + -0.8rem, 9.97rem)
Font weight: Regular (400)
Font size: clamp(2.28rem, 9.45vw + -0.08rem, 7.48rem)
Font weight: Regular (400)
Font size: clamp(2.03rem, 6.51vw + 0.4rem, 5.61rem)
Font weight: Regular (400)
Font size: clamp(1.8rem, 4.38vw + 0.71rem, 4.21rem)
Font weight: Regular (400)
Font size: clamp(1.6rem, 2.83vw + 0.89rem, 3.16rem)
Font weight: Regular (400)
Font size: clamp(1.42rem, 1.72vw + 0.99rem, 2.37rem)
Font weight: Regular (400)
Font size: clamp(1.27rem, 0.93vw + 1.03rem, 1.78rem)
Font weight: Regular (400)
Font size: clamp(1.13rem, 0.38vw + 1.03rem, 1.33rem)
Font weight: Regular (400)
This is what a lead paragraph looks like.
The font family used for body text is Roboto or Roboto flex.
Font size: clamp(1.1rem, 0.83vw + 1.03rem, 1.5rem)
Font weight: Light (300)
This paragraph uses body large as a font size. The font family used for body text is Roboto or Roboto Flex.
Font size: 16px (1rem)
Font weight: Regular (400)
This paragraph uses body medium as a font size. The font family used for body text is Roboto or Roboto Flex.
Font size: 14px (0.875rem)
Font weight: Regular (400)
This paragraph uses body sm as a font size. The font family used for body text is Roboto or Roboto Flex.
Font size: 12px (0.75rem)
Font weight: Regular (400)
This is large label text. The font family used for labels is Roboto or Roboto Flex. Labels are used in fine prints like footers, terms and conditions and footnotes.
Font size: 14px (0.875rem)
Font weight: Regular (400)
This is medium label text. The font family used for labels is Roboto or Roboto Flex. Labels are used in fine prints like footers, terms and conditions and footnotes.
Font size: 12px (0.75rem)
Font weight: Medium (500)
This is small label text. The font family used for labels is Roboto or Roboto Flex. Labels are used in fine prints like footers, terms and conditions and footnotes.
Font size: 11px (0.6875rem)
Font weight: Medium (500)