Typography in SJSS

SJSS offers a robust typography system that allows for the customization of text styles across various HTML elements.

Using Typography in Components

To apply these typography styles in SJSS, you can use the [sj] directive in your Angular components. For example:

<p [sj]>This paragraph will use SJSS default styling.</p>
<p [sj]="{ c: 'primary.main' }">This paragraph will have the primary color.</p>

In these examples, the first paragraph will be rendered with the default SJSS styling for

elements. The second paragraph will additionally have a text color corresponding to the primary color from the palette.

Typography Default Styles

SJSS provides default styles for various HTML elements. These styles are defined in the SjThemeService and can be customized as per your application's needs. The following table lists the default typography styles in SJSS:

This table provides a comprehensive guide to the default typography settings in SJSS. Users can rely on this data to understand how text will be styled by default and make informed decisions about customizing these styles.

Customizing Typography

SJSS allows for easy customization of typography styles. You can use the SjThemeService to update the default typography settings. For example:

import { Component } from "@angular/core";
import { SjDirective, SjThemeService } from "super-jss";

@Component({
  standalone: true,
  selector: 'app-themed-component',
  template: `
    <h3 (click)="updateFont()" [sj]="{ bg: 'primary.main', color: 'primary.contrast', p: 2, m: 1}">
      Primary Themed Content
    </h3>
  `
})
export class ThemedComponent {
  constructor(private sjTheme: SjThemeService) {}
  updateFont(): void {
    this.sjTheme.setTypography({
      h3: {
        fontSize: '2rem',
        fontWeight: 600,
        lineHeight: 3
      }
    });
  }
}

← Responsive Styles | Home | Theming →