Typography

Typography is one of the most important elements of web design, allowing you to create beautiful and readable text. In the MIZ framework, typography offers a variety of customizable classes that let you style text according to your preferences and create unique designs.

Basic Typography Classes #

In MIZ, there are various classes for managing typography, including:

• Font Size: Classes like txt-small, txt-title, txt-normal, txt-subtitle for setting font sizes. The names and sizes of these classes can be customized.

• Fonts: Classes like font-primary where the name can change based on the desired font.

• Font Weight: Classes like font-weight-black, font-weight-medium, and others for setting font weight.

• Text Styles: Classes like txt-nowrap for displaying text in a single line, classes for setting line height like line-height, and text alignment classes like txt-center, txt-end, txt-right.

Customizing Typography #

To customize typography in MIZ, you can use the typography file located in the miz/sass/structure/_typography.scss file. By setting the variables in this file, you can tailor the typography to meet your specific needs and add new values as needed. You can also create multiple settings for the primary font.

            

                
SCSS
                
            
"primary": (
    "defaults": "sans-serif, 'Courier New', Courier, monospace",
    "folder": "PTSans",
    "font-types": (
        "regular": (
            "PTSans-Regular.ttf",
            "PTSans-Italic.ttf"
        ),
        "bold": (
            "PTSans-Bold.ttf",
            "PTSans-BoldItalic.ttf"
        )
    )
)

Font Size Settings #

You can define different font sizes in your project. For example, the normal size is set to 16px. You can add custom values based on your needs and use them in typography settings.

            

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

Property	Description
primary	Represents the primary font for your project and is included in the $fonts variable.
defaults	A list of fallback fonts used if the custom font fails to load, part of the $fonts variable.
folder	The folder where custom fonts are stored (e.g., "PTSans"), included in the $fonts variable.
font-types	Defines the different types of fonts available (e.g., regular and bold), included in the $fonts variable.
$font-size	Defines various font sizes, including a customizable normal size.

Alignment and Spacing #

To align and space text, you can use the following classes:

• line-height: For setting line spacing.

• txt-center: For centering text.

• txt-nowrap: For displaying text in a single line.

• Other alignment classes: Like txt-end and txt-right for aligning text to the end and right.

These classes allow you to easily and flexibly manage the typography of your site. Using these tools, you can incorporate readable, beautiful, and well-organized text in your designs.

Examples #

                    

                    
HTML

                    <div class="w-100 px-2 d-flex align-items-center border-width-1 border-solid border-primary-color all-border-normal">
    <p class="primary-color txt-wrap txt-normal w-85 py-2">Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque iste voluptatem quas in quis, dolore aperiam necessitatibus maxime repudiandae eos accusamus mollitia non corporis ipsum consequuntur assumenda! Distinctio, hic nesciunt!Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam numquam, enim quidem magni id quam quae recusandae illo dolor est et debitis magnam eos praesentium esse consequuntur nisi animi. Obcaecati. Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam excepturi tempora rerum pariatur voluptatum magni. Quae ab labore beatae iusto maiores totam quis nam omnis optio, architecto commodi eveniet illum.</p>
</div>
                

                    

                    
HTML

                    <div class="w-100 txt-nowrap px-2 d-flex justify-content-center align-items-center">
    <p class="primary-color txt-title py-2 txt-center"> Element </p>
</div>
                

                    

                    
HTML

                    <div class="w-100 d-flex flex-column txt-nowrap px-2 line-height align-items-center">
    <p class="primary-color txt-subtitle py-2 txt-start">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque cum voluptas dolore accusantium </p>
    <p class="primary-color txt-subtitle py-2 txt-start">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque cum voluptas dolore accusantium </p>
    <p class="primary-color txt-subtitle py-2 txt-start">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque cum voluptas dolore accusantium </p>
</div>