menu
searchType anywhere to search
logo

typography

Inter

Getting started

The type system.

The most advanced type system in a dashboard UI framework. Specially designed for user interfaces with focus on high legibility of small-to-medium sized text on computer screens.

Inter font Project

Have an Improvement or a suggestion?
goto request box

Typefaces

Consistent across all browsers and all operating systems. Packed with modern features. Works best for dashboard designs.

Pages Type system consist of three(3) font variables. Specifically Base font family - Which can be used for text sizes that are above 12px. Interface font family - text that are 12px and below. Secondary font family - Used for font pairing with base font.


Used for paragraphs and fonts that are above 12px

Inter-font-family

Meet Inter - a consistent, hinted, Screen optimized font family guided by optical balance and packed with modern font features that work widely across all types of Operating Systems and browsers.

"Inter UI", -apple-system, BlinkMacSystemFont,  "Segoe UI", "Roboto", 
"Oxygen", "Ubuntu", "Cantarell","Fira Sans", "Droid Sans", "Helvetica Neue",sans-serif;

Inter is licensed under the SIL Open Font License. In simple terms Its open source and free to use.

Used for paragraphs and fonts that are below 14px

Inter-font-family

Meet Inter - a consistent, hinted, Screen optimized font family guided by optical balance and packed with modern font features that work widely across all types of Operating Systems and browsers.

"Inter UI", -apple-system, BlinkMacSystemFont,  "Segoe UI", 
"Roboto", "Oxygen", "Ubuntu", "Cantarell","Fira Sans", "Droid Sans", "Helvetica Neue",sans-serif;

Inter is licensed under the SIL Open Font License. In simple terms Its open source and free to use.

Used for overlines and as a font pair to break the scan.

Montserrat-font-family

Meet Montserrat - a Beautiful Geometric Font designed by Julieta Ulanovsky released and shared with the world through Google Fonts. It looks great in all caps with a long letterspacing.

"montserrat", -apple-system, BlinkMacSystemFont,  "Segoe UI", 
"Roboto", "Oxygen", "Ubuntu", "Cantarell","Fira Sans", "Droid Sans", "Helvetica Neue",sans-serif;

Montserrat is licensed under the SIL Open Font License. In simple terms Its open source and free to use.

Type Scale

Pages type scale includes a range of contrasting styles that support the needs of your product and its content.

The type scale is a combination of 8 styles that are supported by the type system. It contains reusable categories of text, each with an intended application and meaning.

Typography Scale - 1.125

The quick brown fox jumps over the lazy dog

h1

44px/50px Letter-spacing: -0.0141279em

The quick brown fox jumps over the lazy dog

h2

30px/38px Letter-spacing: -0.021em;

Forsaking monastic tradition, twelve jovial friars gave up their vocation for a questionable existence on the flying trapeze. Bawds jog, flick quartz, vex nymph.

h3

27px/35px Letter-spacing: -0.0114923em

Forsaking monastic tradition, twelve jovial friars gave up their vocation for a questionable existence on the flying trapeze. Bawds jog, flick quartz, vex nymph.

h4

22px/32px Letter-spacing: -0.00865734em

Forsaking monastic tradition, twelve jovial friars gave up their vocation for a questionable existence on the flying trapeze. Bawds jog, flick quartz, vex nymph.

h5

18px/26px Letter-spacing: -0.00630069em

We quickly seized the black axle and just saved it from going past him. No kidding, Lorenzo called off his trip to visit Mexico City just because they told him the conquistadores were extinct. We promptly judged antique onyx buckles for the next prize.

paragraph

44px/52px

We quickly seized the black axle and just saved it from going past him. No kidding, Lorenzo called off his trip to visit Mexico City just because they told him the conquistadores were extinct. We promptly judged antique onyx buckles for the next prize.

overline

11px/inherit Letter-spacing: 0.06em

We quickly seized the black axle and just saved it from going past him. No kidding, Lorenzo called off his trip to visit Mexico City just because they told him the conquistadores were extinct. We promptly judged antique onyx buckles for the next prize.

small-text

12px/18px Letter-spacing: 0.00849077em

Paint the world

Color can be a wonderful tool for making your dashboard less stressful and more calming and it can have a significant impact on your mood and well-being, We made it with you in mind

Heading color

.text-black

#2c2c2c

Body text

Default

#626262

Hinted text

.hint-text

#2c2c2c

Primary color

.text-primary

#62549a

Success color

.text-success

#4aa9e9

Complete color

.text-complete

#23b9a9

Danger color

.text-danger

#ce4e4d

Warning color

.text-warning

#eac459

Highlighted Text

For highlighting a run of text due to its relevance in another context

<mark>
it is more then ONE nation/nationality as its fall name is The United Kingdom of Great Britain and North Ireland..

Bold Text

For emphasizing a snippet of text with a heavier font-weight.

<strong> .bold
it is more then ONE nation/nationality as its fall name is The United Kingdom of Great Britain and North Ireland..

Ordered List

For highlighting a run of text due to its relevance in another context

<ol></ol>
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa

Un-Ordered List

For highlighting a run of text due to its relevance in another context

<ul></ul>
  • Life isn’t about getting and having...
  • Strive not to be a success...
  • Whatever the mind of man can...
Address Block

For quotes in your document & client reviews

It is during our darkest moments that we must focus to see the light.

Aristotle Onassis

The best and most beautiful things in the world cannot be seen or even touched.

Helen Keller
Address Block
Revox, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P:(123) 456-7890
David Nester
david.nester@revox.io
close
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

    12/12/20 chevron_right
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

    12/12/20 chevron_right
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

    12/12/20 chevron_right
  • Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam

    12/12/20 chevron_right
21st april 2020 2:13am

Press enter to search

suggestions :

Pages Search Results:

ice cream on pages

via john smith

T
ice cream related topics

via pages

M
ice cream music

via pagesmix

facebook
ice cream on facebook

via facebook

twitter
Tweats on ice cream

via twitter

google_plus
Circles on ice cream

via google plus