Typography
Everything you need to style your texts
Font Families
OxyProps offers the 3 Open Props font stacks, available as props:
--o-font-sans, --o-font-serif, --o-font-mono
or as classes:
o-sans, o-serif, o-mono
The sans serif stack: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif.
The serif stack: ui-serif, serif.
The mono stack: Dank Mono, Operator Mono, Inconsolata, Fira Mono, ui-monospace, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, monospace.
We suggest you disable completely Google Fonts from your Oxygen dashboard when using then.
--o-font-sans, --o-font-serif, --o-font-mono
or as classes:
o-sans, o-serif, o-mono
The sans serif stack: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif.
The serif stack: ui-serif, serif.
The mono stack: Dank Mono, Operator Mono, Inconsolata, Fira Mono, ui-monospace, SF Mono, Monaco, Droid Sans Mono, Source Code Pro, monospace.
We suggest you disable completely Google Fonts from your Oxygen dashboard when using then.
o-sans
--o-font-sans
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In iaculis nunc sed augue lacus viverra. Molestie at elementum eu facilisis sed odio.
o-serif
--o-font-serif
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In iaculis nunc sed augue lacus viverra. Molestie at elementum eu facilisis sed odio.
o-mono
--o-font-mono
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. In iaculis nunc sed augue lacus viverra. Molestie at elementum eu facilisis sed odio.
Font Weights
Available as props or classes.
What it does:
Font thin
Font extra-light
Font light
Font normal
Font medium
Font semi-bold
Font bold
Font extra-bold
Font black
The props :
--o-font-weight-1
--o-font-weight-2
--o-font-weight-3
--o-font-weight-4
--o-font-weight-5
--o-font-weight-6
--o-font-weight-7
--o-font-weight-8
--o-font-weight-9
The classes :
o-thin
o-extra-light
o-light
o-normal
o-medium
o-semi-bold
o-bold
o-extra-bold
o-black
Tracking aka letter-spacing
Available as props or classes.
What it does:
Tracking-0
Tracking-1
Tracking-2
Tracking-3
Tracking-4
Tracking-5
Tracking-6
Tracking-7
The props :
--o-font-letterspacing-0
--o-font-letterspacing-1
--o-font-letterspacing-2
--o-font-letterspacing-3
--o-font-letterspacing-4
--o-font-letterspacing-5
--o-font-letterspacing-6
--o-font-letterspacing-7
The classes :
o-tracking-0
o-tracking-1
o-tracking-2
o-tracking-3
o-tracking-4
o-tracking-5
o-tracking-6
o-tracking-7
Leading aka line-height
Available as props or classes.
What it does:
Leading 00 - Lorem ipsum dolor sit amet, consectetur.
Leading 0 - Lorem ipsum dolor sit amet, consectetur.
Leading 1 - Lorem ipsum dolor sit amet, consectetur.
Leading 2 - Lorem ipsum dolor sit amet, consectetur.
Leading 3 - Lorem ipsum dolor sit amet, consectetur.
Leading 4 - Lorem ipsum dolor sit amet, consectetur.
Leading 5 - Lorem ipsum dolor sit amet, consectetur.
The props :
--o-font-lineheight-00
--o-font-lineheight-0
--o-font-lineheight-1
--o-font-lineheight-2
--o-font-lineheight-3
--o-font-lineheight-4
--o-font-lineheight-5
The classes :
o-leading-00
o-leading-0
o-leading-1
o-leading-2
o-leading-3
o-leading-4
o-leading-5
Fluid Font Sizes
Available as props or classes.
What it does:
Fluid 0
Fluid 1
Fluid 2
Fluid 3
The props :
--o-font-size-fluid-0
--o-font-size-fluid-1
--o-font-size-fluid-2
--o-font-size-fluid-3
The classes :
o-font-fluid-0
o-font-fluid-1
o-font-fluid-2
o-font-fluid-3
Font Sizes
Available as props or classes.
What it does:
Font 00
Font 0
Font 1
Font 2
Font 3
Font 4
Font 5
Font 6
Font 7
Font 8
The props :
--o-font-size-00
--o-font-size-0
--o-font-size-1
--o-font-size-2
--o-font-size-3
--o-font-size-4
--o-font-size-5
--o-font-size-6
--o-font-size-7
--o-font-size-8
The classes :
o-font-00
o-font-0
o-font-1
o-font-2
o-font-3
o-font-4
o-font-5
o-font-6
o-font-7
o-font-8
Text Alignments
Available as classes.
What it does:
Text-Left. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tellus id interdum velit laoreet id donec ultrices tincidunt arcu.
Text-Right. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tellus id interdum velit laoreet id donec ultrices tincidunt arcu.
Text-Justify. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tellus id interdum velit laoreet id donec ultrices tincidunt arcu.
Text-Start. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tellus id interdum velit laoreet id donec ultrices tincidunt arcu.
Text-End. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tellus id interdum velit laoreet id donec ultrices tincidunt arcu.
The classes :
o-text-left
o-text-right
o-text-justify
o-text-start
o-text-end
Text Orientations
Available as classes.
What it does:
Sample text up
Sample text down
Sample upright
The classes :
o-text-up
o-text-down
o-upright