MOBILE-4470 a11y: Fix fixed font sizes

2024-05-17 15:23:27 +02:00 · 2024-05-17 15:23:27 +02:00 · af94add7e9
parent 42b67d58a3
commit af94add7e9
55 changed files with 124 additions and 194 deletions
--- a/src/addons/block/myoverview/components/myoverview/myoverview.scss
+++ b/src/addons/block/myoverview/components/myoverview/myoverview.scss
@ -33,7 +33,6 @@
        .item-heading {
            font-weight: bold;
            margin-bottom: 0;
-            font-size: 16px;
        }

        .subdued {
--- a/src/addons/block/timeline/components/events/addon-block-timeline-events.html
+++ b/src/addons/block/timeline/components/events/addon-block-timeline-events.html
@ -9,7 +9,7 @@
 <ion-item-group *ngFor="let dayEvents of events">
    <ion-item>
        <ion-label>
-            <h4 [class.core-bold]="!course">{{ dayEvents.dayTimestamp * 1000 | coreFormatDate:"strftimedaydate" }}</h4>
+            <h4>{{ dayEvents.dayTimestamp * 1000 | coreFormatDate:"strftimedaydate" }}</h4>
        </ion-label>
    </ion-item>
    <ng-container *ngFor="let event of dayEvents.events">
--- a/src/addons/block/timeline/components/events/events.scss
+++ b/src/addons/block/timeline/components/events/events.scss
@ -1,16 +1,11 @@
@use "theme/globals" as *;

 h3 {
-    font-weight: bold;
-    font-size: 18px;
+    font: var(--mdl-typography-heading5-font);
 }

 h4 {
-    font-size: 15px;
-}
-
-h4.core-bold {
-    font-weight: bold;
+    font: var(--mdl-typography-heading6-font);
 }

 .addon-block-timeline-activity {
--- a/src/addons/calendar/components/calendar/calendar.scss
+++ b/src/addons/calendar/components/calendar/calendar.scss
@ -144,7 +144,6 @@

    swiper-slide {
        display: block;
-        font-size: inherit;
        justify-content: start;
        align-items: start;
        text-align: start;
--- a/src/addons/messages/messages-common.scss
+++ b/src/addons/messages/messages-common.scss
@ -30,7 +30,7 @@
            }
            .addon-message-last-message-date {
                white-space: nowrap;
-                font-size: 11px;
+                font-size: #{dynamic-font(11px)};
            }
        }

--- a/src/addons/mod/assign/tests/behat/snapshots/test-basic-usage-of-assignment-activity-in-app-editadd-submission-online-text--add-new-attempt-from-previous-submission--submit-for-grading_8.png
+++ b/src/addons/mod/assign/tests/behat/snapshots/test-basic-usage-of-assignment-activity-in-app-editadd-submission-online-text--add-new-attempt-from-previous-submission--submit-for-grading_8.png
--- a/src/addons/mod/forum/pages/search/search.scss
+++ b/src/addons/mod/forum/pages/search/search.scss
@ -1,15 +0,0 @@
-:host {
-    --results-count-text-color: var(--gray-700);
-
-    .results-count {
-        color: var(--results-count-text-color);
-        min-height: 0px;
-        margin: 8px 16px;
-        font-size: 14px;
-    }
-
-}
-
-:host-context(html.dark) {
-    --results-count-text-color: var(--gray-400);
-}
--- a/src/addons/mod/forum/pages/search/search.ts
+++ b/src/addons/mod/forum/pages/search/search.ts
@ -34,7 +34,6 @@ import { Translate } from '@singletons';
@Component({
    selector: 'page-addon-mod-forum-search',
    templateUrl: 'search.html',
-    styleUrls: ['search.scss'],
 })
 export class AddonModForumSearchPage implements OnInit {

--- a/src/addons/mod/forum/tests/behat/snapshots/test-basic-usage-of-forum-activity-in-app-reply-a-post_9.png
+++ b/src/addons/mod/forum/tests/behat/snapshots/test-basic-usage-of-forum-activity-in-app-reply-a-post_9.png
--- a/src/addons/mod/quiz/tests/behat/snapshots/attempt-a-quiz-in-app-submit-a-quiz--review-a-quiz-attempt_40.png
+++ b/src/addons/mod/quiz/tests/behat/snapshots/attempt-a-quiz-in-app-submit-a-quiz--review-a-quiz-attempt_40.png
--- a/src/addons/notifications/pages/list/list.scss
+++ b/src/addons/notifications/pages/list/list.scss
@ -5,12 +5,12 @@ ion-item.addon-notification-item {
    ion-label {
        margin-top: 8px;
        margin-bottom: 8px;
-        p.item-heading {
-            font-size: var(--text-size);
-            @include ellipsis(3);
-        }
        p {
-            font-size: 12px;
+            font: var(--mdl-typography-body-font-sm);
+            &.item-heading {
+                font-size: var(--text-size);
+                @include ellipsis(3);
+            }
        }
    }

@ -20,7 +20,7 @@ ion-item.addon-notification-item {
        padding-top: 12px;

        ion-icon {
-            font-size: 6px;
+            font-size: #{dynamic-font(6px)};
            vertical-align: middle;
        }
    }
--- a/src/addons/notifications/pages/notification/notification.scss
+++ b/src/addons/notifications/pages/notification/notification.scss
@ -10,10 +10,10 @@
            margin-top: 16px;
        }
        p.item-heading {
-            font-size: 16px;
+            font: var(--mdl-typography-body-font-lg);
        }
        p {
-            font-size: 12px;
+            font: var(--mdl-typography-body-font-sm);
        }
    }

--- a/src/addons/qtype/ddwtos/component/addon-qtype-ddwtos.html
+++ b/src/addons/qtype/ddwtos/component/addon-qtype-ddwtos.html
@ -2,13 +2,14 @@
    <!-- Content is outside the core-loading to let the script calculate drag items position -->
    <core-loading [hideUntil]="question.loaded" />

+    <ion-card *ngIf="!question.readOnly" class="core-info-card" [hidden]="!question.loaded">
+        <ion-item>
+            <ion-icon name="fas-circle-info" slot="start" aria-hidden="true" />
+            <ion-label>{{ 'core.question.howtodraganddrop' | translate }}</ion-label>
+        </ion-item>
+    </ion-card>
+
    <div class="fake-ion-item ion-text-wrap" [hidden]="!question.loaded">
-        <ion-card *ngIf="!question.readOnly" class="core-info-card">
-            <ion-item>
-                <ion-icon name="fas-circle-info" slot="start" aria-hidden="true" />
-                <ion-label>{{ 'core.question.howtodraganddrop' | translate }}</ion-label>
-            </ion-item>
-        </ion-card>
        <div class="addon-qtype-ddwtos-container">
            <core-format-text [component]="component" [componentId]="componentId" [text]="question.text" [contextLevel]="contextLevel"
                [contextInstanceId]="contextInstanceId" [courseId]="courseId" #questiontext (afterRender)="textRendered()" />
--- a/src/core/components/input-errors/input-errors.scss
+++ b/src/core/components/input-errors/input-errors.scss
@ -8,7 +8,7 @@
    .core-input-error {
        padding: 4px;
        color: var(--danger);
-        font-size: 12px;
+        font: var(--mdl-typography-body-font-sm);
        display: none;

        &:first-child {
--- a/src/core/components/message/message.scss
+++ b/src/core/components/message/message.scss
@ -63,12 +63,11 @@
                }

                div {
-                    font-weight: 500;
                    flex-grow: 1;
                    padding-left: .5rem;
                    padding-right: .5rem;
                    @include ellipsis();
-                    font-size: 16px;
+                    font: var(--mdl-typography-subtitle-font-md);
                }
            }

--- a/src/core/components/swipe-slides/swipe-slides.scss
+++ b/src/core/components/swipe-slides/swipe-slides.scss
@ -4,7 +4,6 @@

        swiper-slide {
            display: block;
-            font-size: inherit;
            justify-content: start;
            align-items: start;
            text-align: start;
--- a/src/core/components/tabs/tabs.scss
+++ b/src/core/components/tabs/tabs.scss
@ -65,9 +65,16 @@
                        word-wrap: break-word;
                        max-width: 100%;
                        line-height: 1.2em;
+                        display: flex;
+                        flex-direction: row;
+                        align-items: center;
+
                        h2 {
-                            font-size: 14px;
-                            font-weight: 400;
+                            font: var(--mdl-typography-label-font-lg);
+                        }
+
+                        ion-badge {
+                            @include margin-horizontal(4px, 0px);
                        }
                    }
                }
@ -78,7 +85,7 @@
                    border-bottom-color: var(--border-color-active);
                    ion-tab-button {
                        color: var(--color-active);
-                        ion-label {
+                        ion-label h2 {
                            font-weight: var(--font-weight-active);
                        }
                    }
--- a/src/core/features/block/components/side-blocks-tour/side-blocks-tour.scss
+++ b/src/core/features/block/components/side-blocks-tour/side-blocks-tour.scss
@ -1,10 +1,11 @@
 :host {

-    h2 {
+    h1 {
        margin-top: 0;
+        font-size: var(--mdl-typography-heading2-fontSize);
    }

-    h2, p {
+    h1, p {
        text-align: center;
    }

--- a/src/core/features/comments/components/comments/comments.scss
+++ b/src/core/features/comments/components/comments/comments.scss
@ -0,0 +1,3 @@
+button.as-link {
+    font: var(--mdl-typography-body-font-md);
+}
--- a/src/core/features/comments/components/comments/comments.ts
+++ b/src/core/features/comments/components/comments/comments.ts
@ -29,6 +29,7 @@ import { ContextLevel } from '@/core/constants';
@Component({
    selector: 'core-comments',
    templateUrl: 'core-comments.html',
+    styleUrl: 'comments.scss',
 })
 export class CoreCommentsCommentsComponent implements OnInit, OnChanges, OnDestroy {

@ -38,7 +39,7 @@ export class CoreCommentsCommentsComponent implements OnInit, OnChanges, OnDestr
    @Input() itemId!: number;
    @Input() area = '';
    @Input() title?: string;
-    @Output() onLoading: EventEmitter<boolean>; // Event that indicates whether the component is loading data.
+    @Output() onLoading = new EventEmitter<boolean>();  // Event that indicates whether the component is loading data.
    @Input() courseId?: number; // Course ID the comments belong to. It can be used to improve performance with filters.
    @Input() showItem = false; // Show button as an item.

@ -47,14 +48,11 @@ export class CoreCommentsCommentsComponent implements OnInit, OnChanges, OnDestr
    countError = false;
    enabled = false;

-    protected updateSiteObserver?: CoreEventObserver;
-    protected refreshCommentsObserver?: CoreEventObserver;
-    protected commentsCountObserver?: CoreEventObserver;
+    protected updateSiteObserver: CoreEventObserver;
+    protected refreshCommentsObserver: CoreEventObserver;
+    protected commentsCountObserver: CoreEventObserver;

    constructor() {
-
-        this.onLoading = new EventEmitter<boolean>();
-
        this.enabled = CoreComments.areCommentsEnabledInSite();

        // Update visibility if current site info is updated.
@ -87,7 +85,7 @@ export class CoreCommentsCommentsComponent implements OnInit, OnChanges, OnDestr
        this.commentsCountObserver = CoreEvents.on(
            CoreCommentsProvider.COMMENTS_COUNT_CHANGED_EVENT,
            (data) => {
-            // Verify these comments need to be updated.
+                // Verify these comments need to be updated.
                if (!this.commentsCount.endsWith('+') && this.undefinedOrEqual(data, 'contextLevel') &&
                    this.undefinedOrEqual(data, 'instanceId') && this.undefinedOrEqual(data, 'component') &&
                    this.undefinedOrEqual(data, 'itemId') && this.undefinedOrEqual(data, 'area') && !this.countError) {
@ -103,14 +101,14 @@ export class CoreCommentsCommentsComponent implements OnInit, OnChanges, OnDestr
    }

    /**
-     * View loaded.
+     * @inheritdoc
     */
    ngOnInit(): void {
        this.fetchData();
    }

    /**
-     * Listen to changes.
+     * @inheritdoc
     */
    ngOnChanges(changes: { [name: string]: SimpleChange }): void {
        // If something change, update the fields.
@ -193,7 +191,7 @@ export class CoreCommentsCommentsComponent implements OnInit, OnChanges, OnDestr
    }

    /**
-     * Component destroyed.
+     * @inheritdoc
     */
    ngOnDestroy(): void {
        this.updateSiteObserver?.off();
--- a/src/core/features/course/components/course-index-tour/course-index-tour.scss
+++ b/src/core/features/course/components/course-index-tour/course-index-tour.scss
@ -1,10 +1,11 @@
 :host {

-    h2 {
+    h1 {
        margin-top: 0;
+        font-size: var(--mdl-typography-heading2-fontSize);
    }

-    h2, p {
+    h1, p {
        text-align: center;
    }

--- a/src/core/features/course/components/course-index/course-index.scss
+++ b/src/core/features/course/components/course-index/course-index.scss
@ -74,7 +74,7 @@ ion-item.item {
        padding: 12px 16px;

        &.completioninfo {
-            font-size: 10px;
+            font-size: #{dynamic-font(10px)};
            width: 18px;
        }

--- a/src/core/features/course/components/module-completion-details/module-completion-details.scss
+++ b/src/core/features/course/components/module-completion-details/module-completion-details.scss
@ -1,14 +1,14 @@
+@use "theme/globals" as *;
+
 :host {
-    h2, div {
-        font-size: 16px;
-    }
    h2 {
        margin-top: 0px;
        margin-bottom: 8px;
-        line-height: 27px;
+        font: var(--mdl-typography-heading6-font);
    }
    ion-list {
-        line-height: 32px;
+        font: var(--mdl-typography-body-font-lg);
+        line-height: 200%;
    }

    ion-icon {
@ -17,6 +17,6 @@
    }

    ion-icon.completion_dot {
-        font-size: 4px;
+        font-size: #{dynamic-font(4px)};
    }
 }
--- a/src/core/features/course/components/module-navigation/module-navigation.scss
+++ b/src/core/features/course/components/module-navigation/module-navigation.scss
@ -25,8 +25,7 @@
            margin: 0;
            --border-radius: 0;
            width: 100%;
-            font-size: 12px;
-            font-weight: normal;
+            font: var(--mdl-typography-body-font-sm);
            --color: var(--button-color);

            .button-text {
@ -34,7 +33,7 @@
            }

            ion-icon {
-                font-size: 12px;
+                font-size: var(--mdl-typography-body-fontSize-sm);
            }
        }
        .core-course-previous-module {
--- a/src/core/features/course/components/module-summary/module-summary.scss
+++ b/src/core/features/course/components/module-summary/module-summary.scss
@ -5,7 +5,7 @@
 }

 h1 {
-    font-size: 20px;
+    font-size: var(--mdl-typography-heading4-fontSize);
 }

 .core-modulename {
--- a/src/core/features/course/components/module/module.scss
+++ b/src/core/features/course/components/module/module.scss
@ -93,8 +93,7 @@

            ion-badge {
                @include margin-horizontal(null, 4px);
-                font-size: 12px;
-                font-weight: normal;
+                font: var(--mdl-typography-body-font-sm);
            }
        }
    }
@ -135,7 +134,7 @@
            border-radius: var(--mdl-shape-borderRadius-sm);
            margin-top: 8px;
            padding: 8px;
-            font-size: 14px;
+            font-size: var(--mdl-typography-body-fontSize-md);
            line-height: 120%;

            ::ng-deep ul {
--- a/src/core/features/course/pages/course-summary/course-summary.scss
+++ b/src/core/features/course/pages/course-summary/course-summary.scss
@ -34,6 +34,7 @@
            }
        }

+        /** Deprecated icon */
        ion-icon.course-icon {
            padding: 24px;
            font-size: calc(var(--thumb-height) - 48px);
@ -58,7 +59,7 @@
    }

    h1 {
-        font-size: 20px;
+        font-size: var(--mdl-typography-heading4-fontSize);
    }

    .core-course-category {
--- a/src/core/features/course/pages/index/index.scss
+++ b/src/core/features/course/pages/index/index.scss
@ -20,6 +20,7 @@
            }
        }

+        /** Deprecated icon */
        ion-icon.course-icon {
            padding: 12px;
            font-size: calc(var(--core-courseimage-on-course-size) - 24px);
@ -47,7 +48,7 @@
    }

    h1 {
-        font-size: 20px;
+        font-size: var(--mdl-typography-heading4-fontSize);
    }

    .core-course-header {
--- a/src/core/features/courses/components/course-list-item/course-list-item.scss
+++ b/src/core/features/courses/components/course-list-item/course-list-item.scss
@ -106,6 +106,7 @@ ion-chip {
 ion-card.core-course-list-item {
    max-width: var(--list-item-max-width);

+    /** Deprecated icon */
    ion-icon.course-icon {
        padding: 12px;
        font-size: calc(var(--avatar-size) - 24px);
--- a/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss
+++ b/src/core/features/editor/components/rich-text-editor/rich-text-editor.scss
@ -147,7 +147,7 @@
            padding-right: 6px;
            padding-left: 6px;
            margin: 2px auto;
-            font-size: 18px;
+            font-size: #{dynamic-font(18px)};
            background-color: var(--toobar-background);
            border-radius: var(--mdl-shape-borderRadius-xs);
            @include core-transition(background-color, 200ms);
--- a/src/core/features/fileuploader/components/audio-recorder/audio-recorder.scss
+++ b/src/core/features/fileuploader/components/audio-recorder/audio-recorder.scss
@ -8,9 +8,7 @@

        h1 {
            margin: 0;
-            font-size: 16px;
-            font-weight: 400;
-            line-height: 24px;
+            font: var(--mdl-typography-body-font-lg);
            letter-spacing: 0.15px;
        }

@ -36,9 +34,7 @@
        align-items: center;

        p {
-            font-size: 14px;
-            font-weight: 400;
-            line-height: 20px;
+            font: var(--mdl-typography-body-font-md);
            letter-spacing: 0.25px;
            text-align: center;
            opacity: 0.6;
--- a/src/core/features/h5p/components/h5p-player/h5p-player.scss
+++ b/src/core/features/h5p/components/h5p-player/h5p-player.scss
@ -21,7 +21,7 @@
        }

        .core-h5p-placeholder-play-button {
-            font-size: 30px;
+            font-size: #{dynamic-font(30px)};
            min-height: 50px;
        }

--- a/src/core/features/login/components/site-onboarding/site-onboarding.scss
+++ b/src/core/features/login/components/site-onboarding/site-onboarding.scss
@ -28,6 +28,6 @@
    }

    h1 {
-        font-size: 22px;
+        font-size: var(--mdl-typography-heading3-fontSize);
    }
 }
--- a/src/core/features/login/login.scss
+++ b/src/core/features/login/login.scss
@ -147,7 +147,7 @@
    }

    p.core-login-inbrowser {
-        font-size: 12px;
+        font: var(--mdl-typography-body-font-sm);
        margin-top: 8px;
        margin-bottom: 8px;
    }
@ -161,7 +161,7 @@
    .core-login-sign-up h2 {
        margin-top: 16px;
        margin-bottom: 8px;
-        font-size: 16px;
+        font: var(--mdl-typography-heading6-font);
    }

 }
--- a/src/core/features/login/pages/site/site.scss
+++ b/src/core/features/login/pages/site/site.scss
@ -31,7 +31,7 @@
    }
    ion-icon {
        margin: 0 auto;
-        font-size: 35px;
+        font-size: #{dynamic-font(35px)};
        height: 50px;
    }
 }
--- a/src/core/features/mainmenu/components/user-menu-tour/user-menu-tour.scss
+++ b/src/core/features/mainmenu/components/user-menu-tour/user-menu-tour.scss
@ -1,10 +1,11 @@
 :host {

-    h2 {
+    h1 {
        margin-top: 0;
+        font-size: var(--mdl-typography-heading2-fontSize);
    }

-    h2, p {
+    h1, p {
        text-align: center;
    }

--- a/src/core/features/mainmenu/components/user-menu/user-menu.scss
+++ b/src/core/features/mainmenu/components/user-menu/user-menu.scss
@ -23,9 +23,7 @@
 }

 .core-usermenu-sitename {
-    font-weight: bold;
-    font-size: 20px;
-    line-height: 24px;
+    font: var(--mdl-typography-subtitle-font-lg);
 }

 img.core-usermenu-site-logo {
--- a/src/core/features/mainmenu/pages/menu/menu.scss
+++ b/src/core/features/mainmenu/pages/menu/menu.scss
@ -68,7 +68,7 @@ ion-tab-button {
    }

    ion-badge.core-tab-badge {
-        font-size: 12px;
+        font-size: var(--mdl-typography-body-fontSize-sm);
        font-weight: bold;
        border-radius: 10px;
        padding-left: 6px;
@ -83,7 +83,7 @@ ion-tab-button {
        padding: 3px 6px 2px;
        @include position(8px, null, null, calc(50% + 6px));
        min-width: 12px;
-        font-size: 8px;
+        font-size: #{dynamic-font(8px)};
        font-weight: normal;
        box-sizing: border-box;
        position: absolute;
@ -173,7 +173,7 @@ ion-tabs.placement-side {
    transition: all 500ms ease-in-out;
    opacity: .8;
    z-index: 12;
-    font-size: 12px;
+    font-size: var(--mdl-typography-body-font-sm);

    .core-online-message {
        display: var(--network-message-online);
--- a/src/core/features/policy/pages/acceptances/acceptances.scss
+++ b/src/core/features/policy/pages/acceptances/acceptances.scss
@ -105,7 +105,7 @@
                margin: 3px;

                &.core-policy-icon-bullet {
-                    font-size: 6px;
+                    font-size: #{dynamic-font(6px)};
                    width: 18px;
                }
            }
--- a/src/core/features/reminders/components/date/date.scss
+++ b/src/core/features/reminders/components/date/date.scss
@ -9,7 +9,8 @@

 div {
    flex-grow: 1;
-    font-size: 14px;
+    font: var(--mdl-typography-body-font-md);
+    line-height: normal;
    margin: 0;
    align-self: center;

--- a/src/core/features/search/components/global-search-filters/global-search-filters.html
+++ b/src/core/features/search/components/global-search-filters/global-search-filters.html
@ -17,7 +17,7 @@
    <ion-list>
        <ng-container *ngIf="searchAreaCategories.length > 0">
            <core-spacer />
-            <ion-item class="ion-text-wrap help">
+            <ion-item class="ion-text-wrap heading">
                <ion-label>
                    <p class="item-heading">{{ 'core.search.filtercategories' | translate }}</p>
                </ion-label>
@ -35,7 +35,7 @@
        </ng-container>
        <ng-container *ngIf="!hideCourses && courses.length > 0">
            <core-spacer />
-            <ion-item class="ion-text-wrap help">
+            <ion-item class="ion-text-wrap heading">
                <ion-label>
                    <p class="item-heading">{{ 'core.search.filtercourses' | translate }}</p>
                </ion-label>
--- a/src/core/features/search/components/global-search-filters/global-search-filters.scss
+++ b/src/core/features/search/components/global-search-filters/global-search-filters.scss
@ -1,21 +1,16 @@
 :host {
-    --help-text-color: var(--gray-700);
+    --heading-text-color: var(--gray-700);

-    ion-item.help {
-        color: var(--help-text-color);
+    ion-item.heading {
+        color: var(--heading-text-color);

        ion-label {
            margin-bottom: 0;
        }

    }
-
-    ion-item:not(.help) {
-        font-size: 16px;
-    }
-
 }

 :host-context(html.dark) {
-    --help-text-color: var(--gray-400);
+    --heading-text-color: var(--gray-400);
 }
--- a/src/core/features/search/components/global-search-result/global-search-result.html
+++ b/src/core/features/search/components/global-search-result/global-search-result.html
@ -2,14 +2,14 @@
    <core-course-image *ngIf="result.course" [course]="result.course" />
    <core-user-avatar *ngIf="result.user" [user]="result.user" [linkProfile]="false" />
    <ion-label>
-        <h3 *ngIf="result.title">
+        <p class="item-heading" *ngIf="result.title">
            <ion-icon *ngIf="renderedIcon" [name]="renderedIcon" aria-hidden="true" />
            <core-mod-icon *ngIf="!renderedIcon && result.module" [modicon]="result.module.iconurl" [modname]="result.module.name"
                [colorize]="false" />
            <img *ngIf="!renderedIcon && !result.module && result.component" [url]="result.component.iconurl" alt="" class="result-icon"
                core-external-content [component]="result.component.name">
            <core-format-text [text]="result.title" />
-        </h3>
+        </p>
        <core-format-text *ngIf="result.content && !result.course && !result.user" [text]="result.content" />
        <div *ngIf="renderedContext" class="result-context-wrapper">
            <div *ngIf="renderedContext.courseName" class="result-context">
--- a/src/core/features/search/components/global-search-result/global-search-result.scss
+++ b/src/core/features/search/components/global-search-result/global-search-result.scss
@ -7,8 +7,7 @@
    --core-global-search-result-context-color: var(--gray-600);
    --core-global-search-result-icon-size: 16px;

-    h3 {
-        font-size: 16px;
+    p.item-heading {
        display: flex;
        align-items: center;
        color: var(--core-global-search-result-title-color);
@ -69,7 +68,7 @@
                color: var(--core-global-search-result-context-color);
                margin-top: var(--mdl-spacing-2);
                margin-inline-end: var(--mdl-spacing-4);
-                font-size: 12px;
+                font: var(--mdl-typography-body-font-sm);

                ion-icon {
                    margin-inline-end: var(--mdl-spacing-1);
--- a/src/core/features/search/components/search-box/search-box.scss
+++ b/src/core/features/search/components/search-box/search-box.scss
@ -31,7 +31,7 @@
            --a11y-sizing-minTargetSize: var(--search-height);
            --padding-start: 0px;
            --padding-end: 0px;
-            font-size: 12px;
+            font-size: var(--mdl-typography-body-fontSize-sm);
        }
    }

--- a/src/core/features/user/pages/about/about.scss
+++ b/src/core/features/user/pages/about/about.scss
@ -39,10 +39,10 @@
    }

    h2 {
-        font-size: 24px;
+        font: var(--mdl-typography-heading2-font);
    }
    h3 {
-        font-size: 20px;
+        font: var(--mdl-typography-heading4-font);
    }
    .core-user-profile-interests {
        ion-badge {
--- a/src/core/features/user/tests/behat/snapshots/test-basic-usage-of-user-features-view-profile_22.png
+++ b/src/core/features/user/tests/behat/snapshots/test-basic-usage-of-user-features-view-profile_22.png
--- a/src/theme/components/collapsible-item.scss
+++ b/src/theme/components/collapsible-item.scss
@ -30,7 +30,6 @@
                text-align: center;
                z-index: 7;
                text-transform: none;
-                font-size: 11px;
                font-weight: normal;
                background-color: var(--collapsible-toggle-background);
                color: var(--collapsible-toggle-text);
--- a/src/theme/components/ion-action-sheet.scss
+++ b/src/theme/components/ion-action-sheet.scss
@ -19,11 +19,10 @@ ion-action-sheet {
    &.md {
        .action-sheet-title {
            @include padding(4px, null, 4px, 16px);
-            font-size: 12px;
+            font: var(--mdl-typography-body-font-sm);
            min-height: auto;
            color: var(--medium);
            line-height: 2em;
-            font-weight: normal;
        }

        .action-sheet-group:first-child {
--- a/src/theme/components/ion-card.scss
+++ b/src/theme/components/ion-card.scss
@ -23,7 +23,7 @@ ion-card {
    }

    ion-card-title {
-        font-size: 20px;
+        font: var(--mdl-typography-heading4-font);
    }

    &.core-card-with-buttons .item ion-label {
--- a/src/theme/components/ion-chip.scss
+++ b/src/theme/components/ion-chip.scss
@ -49,7 +49,7 @@ ion-chip {
 ion-chip,
 ion-button.button.chip {
    line-height: 1.1;
-    font-size: 12px;
+    font-size: var(--mdl-typography-body-fontSize-sm);
    min-height: 24px;
    margin: 4px;
    font-weight: normal;
@ -68,7 +68,7 @@ ion-button.button.chip {
 ion-button.button.chip {
    --border-radius: var(--mdl-shape-borderRadius-md);
    min-height: 32px;
-    font-size: 14px;
+    font-size: var(--mdl-typography-body-fontSize-md);

    ion-icon[slot=start] {
        @include margin(0, 8px, 0, 0);
--- a/src/theme/components/ion-item.scss
+++ b/src/theme/components/ion-item.scss
@ -54,6 +54,7 @@ ion-item.item {
 }

 // Fake item.
+// The usage of this fake item is discouraged, use ion-item instead. It will be removed soon.
 div.fake-ion-item {
    position: relative;
    align-items: center;
@ -63,91 +64,49 @@ div.fake-ion-item {
    background: var(--ion-item-background);
    text-align: initial;
    text-decoration: none;
-    overflow: hidden;
    box-sizing: border-box;
-}
+    white-space: normal;
+    overflow: inherit;

-.md div.fake-ion-item {
-    font-size: var(--text-size);
-    font-weight: normal;
-    text-transform: none;
    @include padding(null, var(--mdl-spacing-4), null, var(--mdl-spacing-4));
-    @include margin(11px, null, 10px, null);
+    margin-top: var(--mdl-spacing-2);
+    margin-bottom: var(--mdl-spacing-2);

    h1 {
-        @include margin(0, 0, 2px);
-        font-size: 24px;
-        font-weight: normal;
+        @include margin(0px, 0px, 2px);
+        font: var(--mdl-typography-heading4-font);
    }

    h2 {
-        @include margin(2px, 0);
-        font-size: 16px;
-        font-weight: normal;
+        @include margin(2px, 0px);
+        font: var(--mdl-typography-heading5-font);
    }

    h3,
    h4,
    h5,
    h6 {
-        @include margin(2px, 0);
-
-        font-size: var(--text-size);
-        font-weight: normal;
-
-        line-height: normal;
+        @include margin(2px, 0px);
+        font: var(--mdl-typography-heading6-font);
    }

    p {
-        @include margin(0, 0, 2px);
-        font-size: var(--text-size);
+        @include margin(0px, 0px, 2px);
+        font: var(--mdl-typography-body-font-md);
        line-height: 20px;
-        text-overflow: inherit;
+    }
+
+    core-format-text,
+    core-format-text > *:not(pre) {
+        white-space: normal;
        overflow: inherit;
    }
 }

-.ios div.fake-ion-item {
-    font-size: var(--text-size);
-    @include padding(null, 10px, null, 20px);
-    @include margin(10px, 8px, 10px, null);
-
-    h1 {
-        @include margin(3px, 0, 2px);
-        font-size: 22px;
-        font-weight: normal;
-    }
-
-    h2 {
-        @include margin(0, 0, 2px);
-        font-size: 17px;
-        font-weight: normal;
-    }
-
-    h3,
-    h4,
-    h5,
-    h6 {
-        @include margin(0, 0, 3px);
-        font-size: var(--text-size);
-        font-weight: normal;
-        line-height: normal;
-    }
-
-    p {
-        @include margin(0, 0, 2px 0);
-        font-size: var(--text-size);
-        line-height: normal;
-        text-overflow: inherit;
-        overflow: inherit;
-    }
-
-}
-
 // Item Headings.
 // Some styles taken from ion-label
-ion-item.item.item-label > ion-label,
-.fake-ion-item > ion-label,
+ion-item.item > ion-label,
+ion-item-divider.item > ion-label,
 ion-item .in-item {
    font-size: var(--text-size);

@ -183,7 +142,6 @@ ion-item .in-item {

 // Correctly inherit ion-text-wrap onto labels.
 .item > ion-label,
-.fake-ion-item,
 .item > ion-checkbox::part(label),
 ion-checkbox::part(label),
 .item ion-toggle::part(label),
@ -198,7 +156,6 @@ ion-input > label {

 .item.ion-text-wrap > ion-label,
 ion-item > .in-item,
-.fake-ion-item.ion-text-wrap,
 .item.ion-text-wrap > ion-checkbox::part(label),
 ion-checkbox.ion-text-wrap::part(label),
 ion-toggle.ion-text-wrap::part(label),
--- a/src/theme/components/swiper.scss
+++ b/src/theme/components/swiper.scss
@ -27,8 +27,6 @@ swiper-container {
        width: 100%;
        height: 100%;

-        font-size: 18px;
-
        text-align: center;
        box-sizing: border-box;

--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@ -713,7 +713,7 @@ table.core-table {
    thead th {
        vertical-align: bottom;
        font-weight: bold;
-        font-size: 14px;
+        font-size: var(--mdl-typography-body-fontSize-md);
        background-color: var(--core-table-header-background);
    }

@ -722,7 +722,7 @@ table.core-table {
            font-weight: normal;
        }
        td {
-            font-size: 16px;
+            font-size: var(--mdl-typography-body-fontSize-lg);
        }
    }

--- a/src/theme/theme.design-system.scss
+++ b/src/theme/theme.design-system.scss
@ -197,7 +197,7 @@ html {
    --core-combobox-border-width: var(--core-input-border-width);
    --core-combobox-box-shadow: none;

-    --core-tab-font-weight-active: normal;
+    --core-tab-font-weight-active: var(--mdl-typography-label-fontWeight);
    --core-tabs-height: 48px;

    --core-progressbar-height: 8px;