diff --git a/src/mol-plugin/skin/base/components/sequence.scss b/src/mol-plugin/skin/base/components/sequence.scss
index 3176df95901db1831da4675139c02c153ede2d21..27b50d739a2f51481e1a05532e46cf8a3e0022c0 100644
--- a/src/mol-plugin/skin/base/components/sequence.scss
+++ b/src/mol-plugin/skin/base/components/sequence.scss
@@ -20,6 +20,10 @@
     overflow-y: auto;
     overflow-x: hidden;
     font-size: 90%;
+
+    .msp-sequence-wrapper-non-empty {
+        font-family: monospace;
+    }
 }
 
 .msp-sequence-wrapper {
diff --git a/src/mol-plugin/ui/sequence.tsx b/src/mol-plugin/ui/sequence.tsx
index e61635b3b20f050273143227cd1849fe586b0330..77de081ef350304ed84c24b7207f86e3694788e2 100644
--- a/src/mol-plugin/ui/sequence.tsx
+++ b/src/mol-plugin/ui/sequence.tsx
@@ -297,7 +297,7 @@ export class SequenceView extends PluginUIComponent<{ }, SequenceViewState> {
             </div>
 
             {typeof sequenceWrapper === 'string'
-                ? <div className='msp-sequence-wrapper'>{sequenceWrapper}</div>
+                ? <div className='msp-sequence-wrapper msp-sequence-wrapper-non-empty'>{sequenceWrapper}</div>
                 : <Sequence sequenceWrapper={sequenceWrapper} />}
         </div>;
     }
diff --git a/src/mol-plugin/ui/sequence/sequence.tsx b/src/mol-plugin/ui/sequence/sequence.tsx
index 50234a175c063d2e8249ad23fb663ea3fe43c970..7034e510da45177d8925b96699703bb265d03f98 100644
--- a/src/mol-plugin/ui/sequence/sequence.tsx
+++ b/src/mol-plugin/ui/sequence/sequence.tsx
@@ -104,7 +104,7 @@ export class Sequence<P extends SequenceProps> extends PluginUIComponent<P, Sequ
         }
 
         return <div
-            className='msp-sequence-wrapper'
+            className='msp-sequence-wrapper msp-sequence-wrapper-non-empty'
             onContextMenu={this.contextMenu}
             onMouseDown={this.mouseDown}
         >