For electron Typography

base.css

html, body, .full{
  height: 100%;
  padding: 0;
  margin: 0;
}
/* Webfont: Lato-Black */@font-face {
    font-family: 'Lato';
    src: url('fonts/Lato-Black.eot'); /* IE9 Compat Modes */
    src: url('fonts/Lato-Black.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/Lato-Black.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/Lato-Black.woff') format('woff'), /* Modern Browsers */
         url('fonts/Lato-Black.ttf') format('truetype');
    font-style: normal;
    font-weight: 800;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-BlackItalic */@font-face {
    font-family: 'Lato';
    src: url('fonts/Lato-BlackItalic.eot'); /* IE9 Compat Modes */
    src: url('fonts/Lato-BlackItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/Lato-BlackItalic.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/Lato-BlackItalic.woff') format('woff'), /* Modern Browsers */
         url('fonts/Lato-BlackItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: 800;
    text-rendering: optimizeLegibility;
}


/* Webfont: Lato-Bold */@font-face {
    font-family: 'Lato';
    src: url('fonts/Lato-Bold.eot'); /* IE9 Compat Modes */
    src: url('fonts/Lato-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/Lato-Bold.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/Lato-Bold.woff') format('woff'), /* Modern Browsers */
         url('fonts/Lato-Bold.ttf') format('truetype');
    font-style: 600;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-BoldItalic */@font-face {
    font-family: 'Lato';
    src: url('fonts/Lato-BoldItalic.eot'); /* IE9 Compat Modes */
    src: url('fonts/Lato-BoldItalic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/Lato-BoldItalic.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/Lato-BoldItalic.woff') format('woff'), /* Modern Browsers */
         url('fonts/Lato-BoldItalic.ttf') format('truetype');
    font-style: italic;
    font-weight: 600;
    text-rendering: optimizeLegibility;
}
/* Webfont: Lato-Regular */@font-face {
    font-family: 'Lato';
    src: url('fonts/Lato-Regular.eot'); /* IE9 Compat Modes */
    src: url('fonts/Lato-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/Lato-Regular.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/Lato-Regular.woff') format('woff'), /* Modern Browsers */
         url('fonts/Lato-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

/* Webfont: Lato-Italic */@font-face {
    font-family: 'Lato';
    src: url('fonts/Lato-Italic.eot'); /* IE9 Compat Modes */
    src: url('fonts/Lato-Italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/Lato-Italic.woff2') format('woff2'), /* Modern Browsers */
         url('fonts/Lato-Italic.woff') format('woff'), /* Modern Browsers */
         url('fonts/Lato-Italic.ttf') format('truetype');
    font-style: italic;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

*{
  font-family: 'Lato', -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
  -webkit-user-select: none;
 }

layout{
  display: flex;
}

view{
  flex: 1;
  overflow: hidden;
}

.middle{
  align-items: center;
}

.center{
  justify-content: center;
}

.pad4{
  padding: 4px;
}

.pad8{
  padding: 8px;
}

.pad16{
  padding: 16px;
}

style.css

@import url('./base.css');
@import url('./typo.css');

typo.css

text{
  display: block;
  color: #3e3b3b;
  line-height: 1.6;
}
text.italic{
  font-style: italic;
}
text.huge{
  font-size: 4em;
  line-height: 1;
}
text.large{
  font-size: 2em;
}
text.medium{
  font-size: 1.25em;
}
text.small{
  font-size: .8em;
}
text.bold{
  font-weight: 700;
}
text.no-wrap{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

typo.html

<!DOCTYPE html>
<html ng-app="">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    <script src="../node_modules/angular/angular.min.js"></script>
    <script src="../node_modules/angular-electron/angular-electron.min.js"></script>
  </head>
  <body>
    <layout class="full">
      <view class="pad8">
        <text class="huge">Huge Text</text>
        <text class="large">Large Text</text>
        <text class="medium">Medium Text</text>
        <text class="bold">Normal Bold Text</text>
        <text>Normal Text</text>
        <text class="small">Small Text</text>        
        <text>Working in software development and design, we are often required to ship one-off solutions</text>
        <text class="no-wrap">Working in software development and design, we are often required to ship one-off solutions</text>
      </view>
    </layout>
  </body>
</html>