Page MenuHomeWickedGov Phorge
Files F4153701

typography.less
No OneTemporary
Actions

Size
2 KB
Referenced Files
None
Subscribers
None

typography.less
View Options

html,
body {
font-family: var( --font-family-base );
font-variation-settings: 'GRAD' var( --font-grade );
font-weight: var( --font-weight-normal );
// TODO: Revisit this when italic VF is better supported
// Don't let browser faux font styles and weight
// 1. We are already using VF
// 2. Not all font styles apply to some languages (e.g. Italic is different in ZH)
// font-synthesis: none;
}
body {
text-autospace: normal;
text-spacing-trim: normal;
}
input {
font-family: var( --font-family-base ); // Override browser's default
}
b,
strong {
font-weight: var( --font-weight-semi-bold );
}
cite {
font-style: inherit;
}
p:not( .mw-empty-elt ) {
+ ul,
+ ol,
+ table,
+ dl,
+ blockquote {
margin-top: calc( var( --space-xs ) * -1 );
}
}
blockquote {
font-style: italic;
text-wrap: pretty;
.mixin-citizen-font-styles( 'body' );
cite {
font-style: normal;
.mixin-citizen-font-styles( 'small' );
}
}
figcaption {
color: var( --color-subtle );
.mixin-citizen-font-styles( 'small' );
}
em {
// Languages that do not use italics for emphasis
//
// References:
// - zh: {@link https://www.w3.org/TR/2025/DNOTE-clreq-20251008/#id84}
// - ja: {@link https://www.w3.org/TR/2020/NOTE-jlreq-20200811/#composition_of_emphasis_dots}
// - mn: {@link https://www.w3.org/TR/2025/DNOTE-mlreq-20250710/#h_emphasis}
// - ko: emphasis not mentioned in klreq, further investigation needed
//
// We assume that `mn` without `-Mong` is written in Cyrillic, namely `mn-Cyrl`
&:lang( zh ),
&:lang( ja ),
&:lang( ko ),
&:lang( mn-Mong ) {
font-style: normal;
}
&:lang( zh ) {
-webkit-text-emphasis: filled dot;
text-emphasis: filled dot;
-webkit-text-emphasis-position: under;
text-emphasis-position: under right;
}
&:lang( ja ),
&:lang( ko ) {
-webkit-text-emphasis: filled;
text-emphasis: filled;
-webkit-text-emphasis-position: over;
text-emphasis-position: over right;
}
&:lang( mn-Mong ) {
// For vertical text, wavy line should appear on the right side
// but we are unable to implement that
text-decoration: underline wavy;
}
}
.citizen-body {
font-size: var( --font-size-medium );
line-height: var( --line-height-content );
// CJK languages need increased line-height for readability
&:lang( ja ),
&:lang( ko ),
&:lang( zh ) {
--line-height-content: 1.75;
}
}
// Utility classes
.citizen-text-heading-1 {
.mixin-citizen-font-styles( 'heading-1' );
}
.citizen-text-heading-2 {
.mixin-citizen-font-styles( 'heading-2' );
}
.citizen-text-heading-3 {
.mixin-citizen-font-styles( 'heading-3' );
}
.citizen-text-heading-4 {
.mixin-citizen-font-styles( 'heading-4' );
}
.citizen-text-body {
.mixin-citizen-font-styles( 'body' );
}
.citizen-text-small {
.mixin-citizen-font-styles( 'small' );
}
.citizen-text-overline {
.mixin-citizen-font-styles( 'overline' );
}

File Metadata

Mime Type
text/plain
Expires
Aug 19 2026, 20:49 (7 w, 5 d ago)
Storage Engine
local-disk
Storage Format
Raw Data
Storage Handle
5d/40/be84846ee68ac46228102c8fb481
Default Alt Text
typography.less (2 KB)

Event Timeline