Improve layout and typography (fixes #12899)

src/vs/workbench/parts/watermark/watermark.css

@@ -58,13 +58,19 @@
 
 .monaco-workbench > .part.editor > .watermark dt {
 	text-align: right;
-	font-weight: bold;
+	letter-spacing: 0.04em
 }
 
 .monaco-workbench > .part.editor > .watermark dd {
 	text-align: left;
 }
 
+.monaco-workbench > .part.editor > .watermark dd > .shortcuts {
+	padding-left: 0.5em;
+	padding-right: 0.5em;
+	letter-spacing: 0.15em;
+}
+
 .monaco-workbench > .part.editor > .watermark dt,
 .monaco-workbench > .part.editor > .watermark dd {
 	display: table-cell;

src/vs/workbench/parts/watermark/watermark.ts

@@ -47,10 +47,10 @@ export function create(container: Builder, keybindingService: IKeybindingService
 		entries.map(entry => {
 			builder.element('dl', {}, dl => {
 				dl.element('dt', {}, dt => dt.text(entry.text));
-				dl.element('dd', {}, dd => dd.text(
+				dl.element('dd', {}, dd => dd.innerHtml(
 					entry.ids
 						.map(id => keybindingService.lookupKeybindings(id).slice(0, 1)
-							.map(k => keybindingService.getLabelFor(k))
+							.map(k => `<span class="shortcuts">${keybindingService.getLabelFor(k)}</span>`)
 							.join('') || UNBOUND)
 						.join(' / ')
 				));