[Typography] Only define letter spacing if default family is used

packages/material-ui/src/styles/createTypography.js

@@ -16,8 +16,9 @@ function round(value) {
  * @see @link{https://material.io/design/typography/understanding-typography.html}
  */
 export default function createTypography(palette, typography) {
+  const defaultFontFamiliy = '"Roboto", "Helvetica", "Arial", sans-serif';
   const {
-    fontFamily = '"Roboto", "Helvetica", "Arial", sans-serif',
+    fontFamily: fontFamilyOption,
     // The default font size of the Material Specification.
     fontSize = 14, // px
     fontWeightLight = 300,
@@ -41,6 +42,8 @@ export default function createTypography(palette, typography) {
     ...other
   } = typeof typography === 'function' ? typography(palette) : typography;
 
+  const fontFamily = fontFamilyOption || defaultFontFamiliy;
+
   warning(
     !Object.keys(other).some(variant => deprecatedVariants.includes(variant)),
     'Deprecation Warning: Material-UI: You are passing a deprecated variant to ' +
@@ -90,12 +93,18 @@ export default function createTypography(palette, typography) {
   const utils = { getVariant, letterSpacingToEm, pxToRem };
 
   const propertiesForCategory = (weight, size, casing, letterSpacing) => {
+    // The letter spacing was designed for the Roboto font-family. Using the same letter-spacing
+    // across font-families can cause issues with the kerning.
+    const robotoStyles = !fontFamilyOption
+      ? { letterSpacing: letterSpacingToEm(letterSpacing, size) }
+      : {};
+
     return {
       color: palette.text.primary,
       fontFamily,
       fontSize: pxToRem(size),
       fontWeight: weight,
-      letterSpacing: letterSpacingToEm(letterSpacing, size),
+      ...robotoStyles,
       ...casing,
       ...allVariants,
     };

packages/material-ui/src/styles/createTypography.test.js

@@ -3,7 +3,7 @@ import { mock } from 'sinon';
 import createPalette from './createPalette';
 import createTypography from './createTypography';
 
-describe('createTypography', () => {
+describe.only('createTypography', () => {
   let palette;
 
   before(() => {
@@ -66,6 +66,11 @@ describe('createTypography', () => {
     });
   });
 
+  it('only defines letter-spacing if the font-family is not overwritten', () => {
+    assert.isDefined(createTypography(palette, {}).headline1.letterSpacing);
+    assert.isUndefined(createTypography(palette, { fontFamily: 'Gotham' }).headline1.letterSpacing);
+  });
+
   describe('typography v2 migration', () => {
     let warning;