diff --git a/UI/WebServerResources/angular-material b/UI/WebServerResources/angular-material
index eda14e9b3..d34ac5bdb 160000
--- a/UI/WebServerResources/angular-material
+++ b/UI/WebServerResources/angular-material
@@ -1 +1 @@
-Subproject commit eda14e9b367cccfe61ddc53686d288d7ed237d92
+Subproject commit d34ac5bdbc1623421d6888095ff159563b5ac40b
diff --git a/UI/WebServerResources/scss/core/typography/typography.scss b/UI/WebServerResources/scss/core/typography.scss
similarity index 98%
rename from UI/WebServerResources/scss/core/typography/typography.scss
rename to UI/WebServerResources/scss/core/typography.scss
index 5f0940a0f..9798c5946 100644
--- a/UI/WebServerResources/scss/core/typography/typography.scss
+++ b/UI/WebServerResources/scss/core/typography.scss
@@ -1,11 +1,6 @@
-/*! typography.scss - */
-////
-/// SOGo
-/// Version: #{$Version}
-/// Module: typography
-///
-/// Main typography module file define basic typographic styles
-////
+// Import from sources for extends
+// -------------------------------
+@import "../../angular-material/src/core/style/typography";
 
 // Fonts declaration
 // ----------------------------------------------------------------------------
diff --git a/UI/WebServerResources/scss/core/variables.scss b/UI/WebServerResources/scss/core/variables.scss
index 9c6e22912..656c0b6d8 100644
--- a/UI/WebServerResources/scss/core/variables.scss
+++ b/UI/WebServerResources/scss/core/variables.scss
@@ -10,13 +10,24 @@ $version: '3.alpha';
 //@import '../themes/color-palette'; // fixme : clarify if it is needed or assure by javascript
 @import 'components/palette';        // fixme : The maps in color-palettes are more js then scss
 
-// Font Variables
-$font-family: 'Fira sans', 'Helvetica Neue', sans-serif !default;
-
 $primary-color: sg-color($sogoBlue, 300) !default;
 //$foreground-primary-color: rgba($foreground-base-color, 0.73) !default;
 $foreground-primary-color: rgba($primary-color, 0.87);//override
 
+// Typography
+// ------------------------------
+$font-family: 'Fira sans', 'Helvetica Neue', sans-serif !default;
+
+$display-4-font-size-base: 11.20rem !default;
+$display-3-font-size-base: 5.600rem !default;
+$display-2-font-size-base: 4.500rem !default;
+$display-1-font-size-base: 3.400rem !default;
+$headline-font-size-base:  2.400rem !default;
+$title-font-size-base:     2.000rem !default;
+$subhead-font-size-base:   1.600rem !default;
+
+$body-font-size-base:      1.400rem !default;
+$caption-font-size-base:   1.200rem !default;
 
 // Layout and grid
 // ------------------------------
diff --git a/UI/WebServerResources/scss/styles.scss b/UI/WebServerResources/scss/styles.scss
index 7596ca74e..0cd90e093 100755
--- a/UI/WebServerResources/scss/styles.scss
+++ b/UI/WebServerResources/scss/styles.scss
@@ -31,7 +31,7 @@
 @import 'core/mixins';
 @import 'core/structure';
 @import 'core/layout';
-@import 'core/typography/typography';
+@import 'core/typography';
 
 // Original angular-material components
 // ------------------------------------------------------------------------------