Skip to content

[Feature]: Standardize/Unify app-wide typography #1284

@itsalaidbacklife

Description

@itsalaidbacklife

Feature Summary

Currently our use of typography is sloppily defined piecemeal in different parts of the app. We should use Vuetify's config to standardize the definition of our typography styles across the app.

Detailed Description

We should use vuetify's scss config in src/sass/variables.scss to configure standardized type styles for our h1-h6, body, title, subtitle. This will require some investigation and fiddling to define typographic styles that make sense across different areas of the application. In particular, we should check each top-level page, BaseDialog, and the GameOverlays, which each have large type.

This should be done using the format specified in Vuetify's docs for sass config.

Generally, our headings should use Luckiest Guy and other text should use changa. We can try the type definitions that are used in src/routes/stats/StatsView.vue:

.text-h1 {
font-family: 'Luckiest Guy', serif;
}

.text-h2 {
font-family: 'Luckiest Guy', serif;
font-size: 64px;
line-height: 64px;
}

.text-h3 {
font-family: 'Luckiest Guy', serif;
font-size: 48px;
line-height: 52px;
}

.text-body-1 {
font-size: 24px !important;
line-height: 32px;
font-weight: bold;
}

#1275 introduced these as hard-coded in the StatsView, but this inherently makes them inconsistent with the rest of the app. We can try applying these globally in variables.scss to start, and then we need to investigate the other areas of the app to see how this affects the typography and if these values work nicely or need further adjustment (or whether areas where we are currently defining certain header styles should be adjusted to use different typographic classes)

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions