[theme] Allow changing the font-size

mui · Mar 17, 2018 · 003db87 · 003db87
1 parent 6c672df
commit 003db87
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 10 deletions.
diff --git a/docs/src/pages/customization/themes/themes.md b/docs/src/pages/customization/themes/themes.md
@@ -234,6 +234,23 @@ so `rem` units allow us to accommodate the users settings, resulting in a much b
 Users change font size settings for all kinds of reasons, from poor eyesight to choosing optimum settings
 for devices that can be vastly different in size and viewing distance.
 
+To change the font-size of Material-UI you can provide a `fontSize` property.
+The default value is `14px`.
+
+```js
+const theme = createMuiTheme({
+  typography: {
+    // In Japanese the characters are usually larger.
+    fontSize: 12,
+  },
+});
+```
+
+The computed font size by the browser follows this mathematical equation:
+
+![font-size](/static/images/font-size.gif)
+<!-- https://latex.codecogs.com/gif.latex?computed&space;=&space;specification&space;\frac{typography.fontSize}{14}&space;\frac{html&space;font&space;size}{typography.htmlFontSize} -->
+
 ### Typography - HTML font size
 
 You might want to change the `<html>` element default font size. For instance, when using the [10px simplification](https://www.sitepoint.com/understanding-and-using-rem-units-in-css/).

diff --git a/src/BottomNavigation/BottomNavigationAction.js b/src/BottomNavigation/BottomNavigationAction.js
@@ -36,13 +36,13 @@ export const styles = theme => ({
   },
   label: {
     fontFamily: theme.typography.fontFamily,
-    fontSize: theme.typography.pxToRem(theme.typography.fontSize - 2),
+    fontSize: theme.typography.pxToRem(12),
     opacity: 1,
     transition: 'font-size 0.2s, opacity 0.2s',
     transitionDelay: '0.1s',
   },
   labelSelected: {
-    fontSize: theme.typography.pxToRem(theme.typography.fontSize),
+    fontSize: theme.typography.pxToRem(14),
   },
   labelHidden: {
     opacity: 0,

diff --git a/src/Button/Button.js b/src/Button/Button.js
@@ -133,13 +133,13 @@ export const styles = theme => ({
     padding: `${theme.spacing.unit - 1}px ${theme.spacing.unit}px`,
     minWidth: theme.spacing.unit * 8,
     minHeight: 32,
-    fontSize: theme.typography.pxToRem(theme.typography.fontSize - 1),
+    fontSize: theme.typography.pxToRem(13),
   },
   sizeLarge: {
     padding: `${theme.spacing.unit}px ${theme.spacing.unit * 3}px`,
     minWidth: theme.spacing.unit * 14,
     minHeight: 40,
-    fontSize: theme.typography.pxToRem(theme.typography.fontSize + 1),
+    fontSize: theme.typography.pxToRem(15),
   },
   fullWidth: {
     width: '100%',

diff --git a/src/List/ListSubheader.js b/src/List/ListSubheader.js
@@ -12,7 +12,7 @@ export const styles = theme => ({
     color: theme.palette.text.secondary,
     fontFamily: theme.typography.fontFamily,
     fontWeight: theme.typography.fontWeightMedium,
-    fontSize: theme.typography.pxToRem(theme.typography.fontSize),
+    fontSize: theme.typography.pxToRem(14),
   }),
   colorPrimary: {
     color: theme.palette.primary.main,

diff --git a/src/Tabs/Tab.js b/src/Tabs/Tab.js
@@ -73,15 +73,15 @@ export const styles = theme => ({
     },
   },
   label: {
-    fontSize: theme.typography.pxToRem(theme.typography.fontSize),
+    fontSize: theme.typography.pxToRem(14),
     whiteSpace: 'normal',
     [theme.breakpoints.up('md')]: {
-      fontSize: theme.typography.pxToRem(theme.typography.fontSize - 1),
+      fontSize: theme.typography.pxToRem(13),
     },
   },
   labelWrapped: {
     [theme.breakpoints.down('sm')]: {
-      fontSize: theme.typography.pxToRem(theme.typography.fontSize - 2),
+      fontSize: theme.typography.pxToRem(12),
     },
   },
 });

diff --git a/src/styles/createTypography.js b/src/styles/createTypography.js
@@ -20,8 +20,9 @@ export default function createTypography(palette: Object, typography: Object | F
   } =
     typeof typography === 'function' ? typography(palette) : typography;
 
+  const coef = fontSize / 14;
   function pxToRem(value) {
-    return `${value / htmlFontSize}rem`;
+    return `${value / htmlFontSize * coef}rem`;
   }
 
   return deepmerge(
@@ -109,7 +110,7 @@ export default function createTypography(palette: Object, typography: Object | F
         color: palette.text.secondary,
       },
       button: {
-        fontSize: pxToRem(fontSize),
+        fontSize: pxToRem(14),
         textTransform: 'uppercase',
         fontWeight: fontWeightMedium,
         fontFamily,

diff --git a/src/styles/createTypography.spec.js b/src/styles/createTypography.spec.js
@@ -30,6 +30,11 @@ describe('createTypography', () => {
     assert.strictEqual(typography.fontSize, 15);
   });
 
+  it('should accept a custom font size', () => {
+    const typography = createTypography(palette, { fontSize: 16 });
+    assert.strictEqual(typography.body1.fontSize, '1rem', 'should be 16px');
+  });
+
   it('should create a typography with a custom baseFontSize', () => {
     const typography = createTypography(palette, { htmlFontSize: 10 });
     assert.strictEqual(typography.display4.fontSize, '11.2rem');

diff --git a/static/images/font-size.gif b/static/images/font-size.gif