When it comes to text styling, Norska expands on the existing utilities, add a few, and modify some of the existing ones.

Font scale

The font scale used ranges from .text-1 to .text-10. Values smaller than 1 can be achieved with classes .text-01 to .text-0001.

Class
Example
.text-0
Aa
.text-00001
Aa
.text-0001
Aa
.text-001
Aa
.text-01
Aa
.text-1
Aa
.text-2
Aa
.text-3
Aa
.text-4
Aa
.text-5
Aa
.text-6
Aa
.text-7
Aa
.text-8
Aa
.text-9
Aa
.text-10
Aa
.text-larger
Aa
.text-smaller
Aa

Font family

The font family classes dropped their .font-* prefix and have a few additions.

Class
Example
.arial
Hello World
.helvetica
Hello World
.mono
Hello World
.sans
Hello World
.serif
Hello World
.verdana
Hello World

Font color

Color can be applied directly to text without the .text-* preifx. For a complete list of all available colors, check the color palette page.

Class
Example
.black
Hello World
.white
Hello World
.gray
Hello World
.red
Hello World
.orange
Hello World
.yellow
Hello World
.green
Hello World
.teal
Hello World
.blue
Hello World
.indigo
Hello World
.purple
Hello World
.pink
Hello World

Font Weight

Norska simplifies the font weight to the .bold and .no-bold classes.

Class
Example
.bold
Hello World
.no-bold
Hello World

Font Decoration

Norska renames the .line-through class to .strike and allow changing the color of the text decoration through the .underline-* color classes.

For a complete list of all available colors, check the color palette page.

Class
Example
.underline
Hello World
.strike
Hello World
.underline.underline-blue
Hello World
.strike.underline-red
Hello World

Line height

Norska renames the .leading-* classes handling line height to .lh-*.

Class
Example
.lh-0
Hello World
.lh-1
Hello World
.lh-2
Hello World
.lh-3
Hello World
.lh-4
Hello World
.lh-5
Hello World
.lh-6
Hello World
.lh-loose
Hello World
.lh-normal
Hello World
.lh-tight
Hello World