diff --git a/src/components/ha-label-badge.html b/src/components/ha-label-badge.html
index e49e7c24f1..3bf5da46f6 100644
--- a/src/components/ha-label-badge.html
+++ b/src/components/ha-label-badge.html
@@ -32,6 +32,9 @@
     overflow: hidden;
     text-overflow: ellipsis;
   }
+  .label-badge .value.big {
+    font-size: 70%;
+  }
   .label-badge .label {
     position: absolute;
     bottom: -1em;
@@ -70,7 +73,7 @@
   <template>
     <div class='badge-container'>
       <div class='label-badge' id='badge'>
-        <div class='value'>
+        <div class$='[[computeClasses(value)]]'>
           <template is='dom-if' if='[[icon]]'>
             <iron-icon icon='[[icon]]'></iron-icon>
           </template>
diff --git a/src/components/ha-label-badge.js b/src/components/ha-label-badge.js
index 2722d41770..2c8a41078a 100644
--- a/src/components/ha-label-badge.js
+++ b/src/components/ha-label-badge.js
@@ -25,4 +25,8 @@ export default new Polymer({
       observe: 'imageChanged',
     },
   },
+
+  computeClasses(value) {
+    return value && value.length > 5 ? 'value big' : 'value';
+  },
 });