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

// Include ontimize-lite theme
@import 'node_modules/ontimize-web-ngx-theming/ontimize-theme-lite.scss';

// Define a custom typography config that overrides the font-family as well as the
// `headlines` and `title` levels.
$custom-typography: mat-typography-config( $font-family: 'Nunito Sans', $headline: mat-typography-level(16px, 22px, 400), $title: mat-typography-level(14px, 22px, 500));

@include ontimize-theme-styles-lite($theme, $custom-typography);

// Define a custom typography config that overrides the header height, row height, header font size header and row
// of the tables
$custom-table-typography: ( small-header-height: mat-typography-level(30px, 32px, 400), small-row-height: mat-typography-level(24px, 26px, 400), small-header-font-size: mat-typography-level(12px, 12px, 400), small-row-font-size: mat-typography-level(11px, 11px, 400), medium-header-height: mat-typography-level(30px, 32px, 400), medium-row-height: mat-typography-level(26px, 28px, 400), medium-header-font-size: mat-typography-level(11px, 12px, 300), medium-row-font-size: mat-typography-level(11px, 11px, 400), large-header-height: mat-typography-level(30px, 32px, 400), large-row-height: mat-typography-level(26px, 28px, 400), large-header-font-size: mat-typography-level(11px, 12px, 300), large-row-font-size: mat-typography-level(11px, 11px, 400) );

// Merge both typographys
$lite-typography: map-merge($custom-typography, $custom-table-typography);

// After define theme, it is necessary to transfer typography to Ontimize Web framework and material components
@import 'node_modules/ontimize-web-ngx/theme.scss';
@include o-material-theme($theme, $lite-typography);

Updated: