MIZ

Github Npm

1.0.0-alpha

1.0.0-alpha

Light

Dark

System

Browse docs

Typography in MIZ

This section explains the basics of typography settings, variables, and font configuration in the MIZ framework.

Basics and Variables #

1.1 Font Prefix

            

                
SCSS

            

            $font-prefix: "txt";

  • Prefix for all typography classes.

  • Example: .txt-small, .txt-title

1.2 Font Sizes

            

                
SCSS

            

            $font-size: (
  tiny: 8px,
  small: 10px,
  subtitle: 12px,
  normal: 16px,
  title: 20px,
  mid-title: 24px,
  high-title: 32px,
  big-title: 48px,
  extra-title: 72px,
  huge: 96px 
);

CSS property: font-size

Example classes:

            

                
CSS

            

            
.txt-tiny { font-size: 8px; }
.txt-title { font-size: 20px; }
.txt-huge { font-size: 96px; }

Typography Properties #

Variable CSS Property Class Structure Available Values
$text-align text-align .{$font-size}-align-{value} center, end, start, left, right
$text-transform text-transform .{$font-size}-transform-{value} none, uppercase, lowercase, capitalize
$text-decoration-line text-decoration-line .{$font-size}-decoration-line-{value} none, underline, line-through, overline, wavy
$text-decoration-style text-decoration-style .{$font-size}-decoration-style-{value} solid, dashed, dotted, double
$font-style font-style .{$font-size}-style-{value} normal, italic

Fonts Variable ($fonts) #

Structure

  • $fonts holds all fonts used in the project.

  • The font name becomes a CSS class like: .font-{font-name}

  • Each font has:

    • defaults: fallback fonts if the main font doesn't work.

    • folder: the name of the folder where the font files are.

    • font-types: available weights like black, bold, regular, etc.

Simple Map Example

            

                
SCSS

            

            $fonts: (
  "{font-name}": (
    "defaults": "{font-defaults}",
    "folder": "{font-folder}",
    "font-types": (
      "{font-weight}": (
        "{font-file-name}"
      )
    )
  )
);

Example with Primary & Secondary

            

                
SCSS

            

            $fonts: (
  "primary": (
    "defaults": "sans-serif, 'Courier New', Courier, monospace",
    "folder": "vazir",
    "font-types": (
      "regular": ("Vazir-Regular.woff2", "Vazir-Regular.woff", "Vazir-Regular.ttf", "Vazir-Regular.eot"),
      "bold": ("Vazir-Bold.woff2", "Vazir-Bold.woff", "Vazir-Bold.ttf", "Vazir-Bold.eot")
    )
  ),
  "secondary": (
    "defaults": "sans-serif, 'Courier New', Courier, monospace",
    "folder": "product-sans",
    "font-types": (
      "regular": ("PTSans-Regular.ttf"),
      "bold": ("PTSans-Bold.ttf")
    )
  )
);

This means you can use the font in CSS like: .font-primary or .font-secondary.

Each weight can then be used via specific classes generated from this map.