Typography

What is typography?

Typography is a way of arranging type to make text legible, readable, and appealing when displayed.

Custom Typography of Ontimize Web framework.

To change the typography it is neccesary to apply an extension of Angular Material’s (you can see spec in Angular Material’s typography) and an extension of Ontimize Web Sass-based theming.

The extension of Ontimize Web Sass-based theming. is arranged into typography levels, as Angular Material’s typography. Each level has a font-size, line-height and font-weight. This custom typography is used to apply css about o-table depending of the row-height attribute. For more details about table typography and defaut config, see the source. The available levels are:

small-header-height: table header height for 'small' predefined row height options.
small-row-height: table row height for 'small' predefined row height options.
small-header-font-size : table header font size for 'small' predefined row height options.
small-row-font-size: table row font size for 'small' predefined row height options
medium-header-height: table header height for 'medium' predefined row height options
medium-row-height: table row height for 'medium' predefined row height options.
medium-header-font-size: table header font size for 'medium' predefined row height options
medium-row-font-size: table row font size for 'medium' predefined row height options
large-header-height: table header height for 'large' predefined row height options
large-row-height: table row height for 'large' predefined row height options.
large-header-font-size: table header font size for 'large' predefined row height options
large-row-font-size: table row font size for 'large' predefined row height options

Customization

First you must create a custom typography configuration of Angular Material’s Sass-based theming and another typography configuration of Ontimize Web Sass-based theming as the below example demonstrates.

app.scss

@use 'ontimize-web-ngx/theming/themes/ontimize.scss'as theme;
@use 'ontimize-web-ngx/theming/ontimize-style.scss';
@use '../../app/login/login.theme.scss'as login;

// Necesary imports
@use '@angular/material'as mat;
@use 'sass:map';
// Imports the Ontimize table typography instead of also modificate it
@use 'ontimize-web-ngx/theming/typography/o-table-typography.scss'as ontimize-table-typography;

// Defines the custom typography
$custom-typography: mat.define-typography-config($font-family: '"Comic Neue", cursive',
  $headline-1: mat.define-typography-level(84px, 92px, 300),
  $headline-2: mat.define-typography-level(42px, 42px, 400),
  $headline-3: mat.define-typography-level(34px, 36px, 400),
  $headline-4: mat.define-typography-level(26px, 30px, 400),
  $headline-5: mat.define-typography-level(24px, 24px, 400),
  $headline-6: mat.define-typography-level(18px, 24px, 500),
  $subtitle-1: mat.define-typography-level(14px, 21px, 600),
  $subtitle-2: mat.define-typography-level(12px, 18px, 500),
  $body-1: mat.define-typography-level(13px, 1.125em, 400),
  $body-2: mat.define-typography-level(12px, 15px, 400),
  $caption: mat.define-typography-level(11px, 15px, 400),
  $button: mat.define-typography-level(13px, 14px, 500)
);

// Merges our custom typography with the Ontimize table typography
$merged-typography: map.merge($custom-typography, ontimize-table-typography.$table-typography);

// Replaze the theme typography by our self created typography
$theme: map.set(theme.$theme, "typography", $merged-typography);

@include ontimize-style.ontimize-theme-styles($theme);

@include login.login-theme($theme);