adjustable font size

[oliver-sanders]

Somewhat related to #9

Allow users to adjust font-size independently of theme.

We have users for which this is a major functional requirement.

[oliver-sanders]

At the moment many font sizes are hard-coded in pixels making it hard to change them all at the root level.

Redefining the font size as a proportion of $font-size-general makes sense:

--- a/src/styles/material-dashboard/_variables.scss
+++ b/src/styles/material-dashboard/_variables.scss
 // Font size
-$font-size-mini:                    9px !default;
-$font-size-small:                   12px !default;
-$font-size-default:                 14px !default;
-$font-size-avatar-title:            18px !default;
-$font-size-alert-icon:              30px !default;
-$font-size-big:                     36px !default;
-$font-size-small-tag:               65% !default;
+$font-size-mini:                    .64rem !default;
+$font-size-small:                   .88rem !default;
+$font-size-default:                 1rem !default;
+$font-size-avatar-title:            1.29rem !default;
+$font-size-alert-icon:              2.14rem !default;
+$font-size-big:                     2.57rem !default;
+$font-size-small-tag:               .65rem !default;
 $font-size-toolbar-title:           $font-size-avatar-title;
-$font-size-toolbar-items:           20px !default;
+$font-size-toolbar-items:           1.43rem !default;
 $font-size-h1:                      3.3125rem;
 $font-size-h2:                      2.25rem !default;
 $font-size-h3:                      1.5625rem;
 $font-size-h4:                      1.125rem !default;
 $font-size-h5:                      1.0625rem !default;
-$font-size-h6:                      0.75rem !default;
+$font-size-h6:                      .75rem !default;
 $font-paragraph:                    $font-size-default !default;
 $font-size-chart-label:             .730rem !default;

But sadly it doesn't work for everything, for example the controls of the table component appear to be hardcoded in pixels:

Vuetify sets its variables in a stylus file. There is a font-size-root variable but fonts are still hard-coded in pixels.

I can't find anything in the Vuetify documentation along these lines and their accessibility pages don't mention font size.

Questions:

• Can we avoid changing the font-size and do something clever with the viewport?
• Should we be using stylus so we can import the Vuetify library directly?
• Does Vuetify do accessability or have I just missed it!?

[kinow]

I can't find anything in the Vuetify documentation along these lines and their accessibility pages don't mention font size.

Known issue in Vuetify: https://github.com/vuetifyjs/vuetify/issues/3401

Can we avoid changing the font-size and do something clever with the viewport?

Probably I think. Our theme (Tom Creative's Material Dashboard) is doing that already for Toolbar/Footer (see _toolbar.scss and _footer.scss), so at least we have a precedent here.

Should we be using stylus so we can import the Vuetify library directly?

We can import the final distribution version with something like @import '~vuetify/dist/vuetify.min'; (done in src/plugins/vuetify.js). If we want to customize Vuetify, then we can use it, as it is currently in our devDependencies, though I think while modifying the theme is a bit risk, modifying vuetify itself has a higher risk of conflicts when they release version 2.0 (they have a note in their docs that says "2.0 is coming", and their roadmap lists the 2.0 release for Q2 2019, so soon).

Does Vuetify do accessability or have I just missed it!?

I think it wasn't their main focus, but some users have already reported issues related to it: https://github.com/vuetifyjs/vuetify/issues?utf8=%E2%9C%93&q=is%3Aissue+is%3Aopen+accessibility

Furthermore, if you look at their roadmap, the description of version 2.0 for Q2/2019 says:

A complete rebuild of the framework core. Improving the layout and theme systems, platform integration, accessibility and performance. Fully modular and automatic tree-shaking from the vuetify-loader.

So probably best that we don't change vuetify itself for a while. Or if need to work on this, I think your bullet item #1 could be done directly in their issue (they have a Help Wanted label there, and quite sure they'd be keen to receive a contribution from users).

There will be a delay between 2.0 and the release of our theme (maybe we could re-assess the theme, and go with our own base components based on vuetify instead... though that'd be for another issue).

[oliver-sanders]

Known issue in Vuetify: vuetifyjs/vuetify#3401

Dammit! Kinda shocked accessability wasn't baked in to Vuetify from the start, it's pretty essential stuff.

Thanks for this research @kinow!

[kinow]

And just 6 hours ago, Vuetify 2.0 has been released: https://github.com/vuetifyjs/vuetify/releases/tag/v2.0.0

Every component has been updated with proper accessibility (a11y) support The root font-size (per MD2 specification) is now 16px. ( So I reckon they haven't fixed the font sizes yet)

Now just need to wait for the update of the theme to use 2.0 too https://github.com/creativetimofficial/vuetify-material-dashboard/issues/35

But for the font sizes we still need more work here (that could become a nice PR to vuetify later) 👍

[oliver-sanders]

Cool.

Still a lot of px definitions but it looks like most fonts are defined in rem :champagne:

https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/styles/settings/_variables.scss

[kinow]

Still a lot of px definitions but it looks like most fonts are defined in rem champagne

Oh, nice! I only searched the changelog for typography/font, but didn't look at the code. Looks like it's a good start for what we need :tada:

[kinow]

I think this could be done before #9 , but pending #143 . We just need to find the right place to apply a font-size: 100 + {increase}% to increase or the - to decrease.

With #143, we would probably use a cookie or local storage to store user settings. Then we can add a + and a - buttons that increase and decrease font size somewhere. And persist the selected value on the user local settings.

Downside is that that setting would persisted only in one browser for the user, but I don't think that is a major issue.

[kinow]

Re-reading their docs today looks like they have added more on accessibility: https://vuetifyjs.com/en/customization/accessibility/, though not much on font sizes.