.jpg)
Typography elements are the basic text elements, such as headings and paragraphs.
For example: h1, h2, h3, p, a, etc.
These elements may be visible throughout the entire application.
<aside> ➡️ Do not confuse inline links with buttons that appear like links. Inline links appear within the body text.
</aside>
<aside> ➡️ Please keep the total font count low.
</aside>
The inline links should be displayed in the following state:
<aside> ℹ️ Usually, styling this element takes from-to: 4-6h
</aside>
<aside> ➡️ If you want inline links to be bold on hover, please make sure the width of the link does not change (use letter-spacing) otherwise, on the hover of the link, the text will shrink.
</aside>
The heading must have a line-height matching a font size. You can show 3 headings, heading 4 and 5 are rarely used.
An example display of typography elements
Issues with the designs
text-transform but the client has a German store where it is redundant to use forced uppercase or lowercase due to grammar specificsThe body text styling refers to all text inside the body element, except headings. Please, specifically ensure the body text is applied to lists (li), paragraphs (p), inline links (a), body (body).
ScandiPWA defines the default look of each basic HTML element (such as h1, h2, etc) in the /src/style/base/_reset.scss file. Override it to customize the look of each element.
For overriding _reset.scss create _reset.override.scss under the /src/style/base directory. Copy-paste the src/style/main.scss file from the base theme (if not already), add @import './base/reset.override'; otherwise your new _reset.override will be ignored!
We just simply have to override these variables, like this:
/src/style/base/_reset.override.scss
// this is how it was done in the Halo project, for example
:root {
--h1-font-family: var(--imported_h1_font_family, #{$font-HurmeGeometricSans});
--h1-font-size: var(--imported_h1_font_size, 40px);
--h1-font-weight: var(--imported_h1_font_weight, 400);
--h1-line-height: var(--imported_h1_line_height, 44px);
--h2-font-family: var(--imported_h2_font_family, #{$font-HurmeGeometricSans});
--h2-font-size: var(--imported_h2_font_size, 32px);
--h2-font-weight: var(--imported_h2_font_weight, 400);
--h2-line-height: var(--imported_h2_line_height, 36px);
}
Please note that we put the actual values as the second argument and not in place of the variables with the --imported prefix. Those are from the backend, and we should not directly replace them.
Before trying to style typography elements, make sure the fonts have been updated:
<aside> ➡️ You might find it confusing to implement a CSS reset and base styling in the same file – ScandiPWA does this for historical reasons.
</aside>