diff --git a/app/assets/javascripts/discourse/components/poster-name.js.es6 b/app/assets/javascripts/discourse/components/poster-name.js.es6
index ae1617f182b..3c5738cac47 100644
--- a/app/assets/javascripts/discourse/components/poster-name.js.es6
+++ b/app/assets/javascripts/discourse/components/poster-name.js.es6
@@ -1,21 +1,22 @@
-var PosterNameComponent = Em.Component.extend({
+const PosterNameComponent = Em.Component.extend({
   classNames: ['names', 'trigger-user-card'],
   displayNameOnPosts: Discourse.computed.setting('display_name_on_posts'),
 
   // sanitize name for comparison
-  sanitizeName: function(name){
+  sanitizeName(name){
     return name.toLowerCase().replace(/[\s_-]/g,'');
   },
 
-  render: function(buffer) {
-    var post = this.get('post');
+  render(buffer) {
+    const post = this.get('post');
 
     if (post) {
-      var name = post.get('name'),
-          username = post.get('username'),
-          linkClass = 'username',
-          primaryGroupName = post.get('primary_group_name'),
-          url = post.get('usernameUrl');
+      const username = post.get('username'),
+            primaryGroupName = post.get('primary_group_name'),
+            url = post.get('usernameUrl');
+
+      var linkClass = 'username',
+          name = post.get('name');
 
       if (post.get('staff')) { linkClass += ' staff'; }
       if (post.get('admin')) { linkClass += ' admin'; }
@@ -29,7 +30,7 @@ var PosterNameComponent = Em.Component.extend({
       buffer.push("<span class='" + linkClass + "'><a href='" + url + "' data-auto-route='true' data-user-card='" + username + "'>" + username + "</a>");
 
       // Add a glyph if we have one
-      var glyph = this.posterGlyph(post);
+      const glyph = this.posterGlyph(post);
       if (!Em.isEmpty(glyph)) {
         buffer.push(glyph);
       }
@@ -42,7 +43,7 @@ var PosterNameComponent = Em.Component.extend({
       }
 
       // User titles
-      var title = post.get('user_title');
+      let title = post.get('user_title');
       if (!Em.isEmpty(title)) {
 
         title = Handlebars.Utils.escapeExpression(title);
@@ -59,18 +60,10 @@ var PosterNameComponent = Em.Component.extend({
     }
   },
 
-  /**
-    Overwrite this to give a user a custom font awesome glyph.
-
-    @method posterGlyph
-    @param {Post} the related post.
-    @return {String} the glyph to render (or null for none)
-  **/
-  posterGlyph: function(post) {
-    var desc;
-
+  //  Overwrite this to give a user a custom font awesome glyph.
+  posterGlyph(post) {
     if(post.get('moderator')) {
-      desc = I18n.t('user.moderator_tooltip');
+      const desc = I18n.t('user.moderator_tooltip');
       return '<i class="fa fa-shield" title="' + desc +  '" alt="' + desc + '"></i>';
     }
   }
diff --git a/app/views/email/_post.html.erb b/app/views/email/_post.html.erb
index b5447c68edc..122df1af5e5 100644
--- a/app/views/email/_post.html.erb
+++ b/app/views/email/_post.html.erb
@@ -2,10 +2,13 @@
   <tbody>
     <tr>
       <td class='user-avatar'>
-        <img src="<%= post.user.small_avatar_url%>" title="<%= post.user.username%>">
+        <img src="<%= post.user.small_avatar_url %>" title="<%= post.user.username%>">
       </td>
       <td>
         <a class="username" href="<%=Discourse.base_url%>/users/<%= post.user.username_lower%>" target="_blank"><%= post.user.username %></a>
+        <%- if SiteSetting.enable_names? && post.user.name.present? && post.user.name != post.user.username %>
+          <a class="user-name" href="<%=Discourse.base_url%>/users/<%= post.user.username_lower%>" target="_blank"><%= post.user.name %></a>
+        <% end %>
         <%- if post.user.title.present? %>
           <span class='user-title'><%= post.user.title %></span>
         <% end %>
diff --git a/lib/email/styles.rb b/lib/email/styles.rb
index 46495aef3ea..ee0a973c994 100644
--- a/lib/email/styles.rb
+++ b/lib/email/styles.rb
@@ -75,7 +75,8 @@ module Email
       style('.previous-discussion', 'font-size: 17px; color: #444;')
       style('.notification-date', "text-align:right;color:#999999;padding-right:5px;font-family:'lucida grande',tahoma,verdana,arial,sans-serif;font-size:11px")
       style('.username', "font-size:13px;font-family:'lucida grande',tahoma,verdana,arial,sans-serif;color:#3b5998;text-decoration:none;font-weight:bold")
-      style('.user-title', "font-size:13px;font-family:'lucida grande',tahoma,verdana,arial,sans-serif;text-decoration:none;font-weight:bold;margin-left:7px;")
+      style('.user-title', "font-size:13px;font-family:'lucida grande',tahoma,verdana,arial,sans-serif;text-decoration:none;margin-left:7px;color: #999;")
+      style('.user-name', "font-size:13px;font-family:'lucida grande',tahoma,verdana,arial,sans-serif;text-decoration:none;margin-left:7px;color: #3b5998;font-weight:normal;")
       style('.post-wrapper', "margin-bottom:25px;")
       style('.user-avatar', 'vertical-align:top;width:55px;')
       style('.user-avatar img', nil, width: '45', height: '45')