diff --git a/frontend/src/_common.sass b/frontend/src/_common.sass
index cf4fab2cf..00bf18dfe 100644
--- a/frontend/src/_common.sass
+++ b/frontend/src/_common.sass
@@ -5,5 +5,5 @@
 @use "~@fortawesome/fontawesome-pro/scss/solid"
 
 @use "~typeface-roboto" as roboto
-
 @use "~typeface-source-sans-pro" as source-sans-pro
+@use "~typeface-source-code-pro" as source-code-pro
diff --git a/frontend/src/app.sass b/frontend/src/app.sass
index ae859585b..56f4d7028 100644
--- a/frontend/src/app.sass
+++ b/frontend/src/app.sass
@@ -22,6 +22,7 @@
   // FONTS
   --font-base: "Source Sans Pro", "Trebuchet MS", sans-serif
   --font-logo: "Roboto", var(--font-base)
+  --font-monospace: "Source Code Pro", monospace
 
   // DIMENSIONS
   --header-height: 100px
@@ -585,9 +586,6 @@ section
     border-bottom: none
     padding-bottom: 0px
 
-.pseudonym
-  font-family: monospace
-
 .headline-one
   margin-bottom: 10px
 
@@ -717,8 +715,13 @@ section
      background-color: hsla($hue, 75%, 50%, $opacity) !important
 
 
-.uuid
-  font-family: monospace
+.uuid, .pseudonym, .ldap-primary-key, .email, .file-path, .metric-value, .metric-label
+  font-family: var(--font-monospace)
+
+.token
+  font-family: var(--font-monospace)
+  white-space: pre-wrap
+  word-break: break-all
 
 .form--inline
   display: inline-block
@@ -832,7 +835,7 @@ section
 
 .comment, .literal-error
   white-space: pre-wrap
-  font-family: monospace
+  font-family: var(--font-monospace)
 
 th
   vertical-align: top
@@ -1099,12 +1102,12 @@ th, td
 #changelog
   font-size: 14px
   white-space: pre-wrap
-  font-family: monospace
+  font-family: var(--font-monospace)
 
 #gitrev
   font-size: 12px
   white-space: pre-wrap
-  font-family: monospace
+  font-family: var(--font-monospace)
 
 .breadcrumbs__container
   position: relative
@@ -1225,12 +1228,12 @@ a.breadcrumbs__home
   top: 5px
 
 .table__td--csv, .table__th--csv
-  font-family: monospace
+  font-family: var(--font-monospace)
 
 .confirmationText
   white-space: pre-wrap
   font-size: 14px
-  font-family: monospace
+  font-family: var(--font-monospace)
 
 .func-field__wrapper, .allocation-missing-prios, .allocation-users__accept, .corrections-overview__section
   max-height: 75vh
@@ -1295,7 +1298,7 @@ a.breadcrumbs__home
 
 .csv-parse-error
   white-space: pre-wrap
-  font-family: monospace
+  font-family: var(--font-monospace)
   overflow: auto
   max-height: 75vh
 
diff --git a/frontend/src/utils/form/datepicker.css b/frontend/src/utils/form/datepicker.css
index 7c1172da1..b052a1e7c 100644
--- a/frontend/src/utils/form/datepicker.css
+++ b/frontend/src/utils/form/datepicker.css
@@ -29,7 +29,7 @@
     visibility: hidden;
     direction: ltr;
     border-collapse: separate;
-    font-family: "Open Sans", Calibri, Arial, sans-serif;
+    /* font-family: "Open Sans", Calibri, Arial, sans-serif; */
     background-color: white;
     border-width: 0;
     border-style: solid;
@@ -724,4 +724,4 @@
 }
 /* @end RTL */
 
-/*# sourceMappingURL=tail.datetime-default-green.map */
\ No newline at end of file
+/*# sourceMappingURL=tail.datetime-default-green.map */
diff --git a/frontend/src/utils/inputs/inputs.sass b/frontend/src/utils/inputs/inputs.sass
index 374d37189..022efa71d 100644
--- a/frontend/src/utils/inputs/inputs.sass
+++ b/frontend/src/utils/inputs/inputs.sass
@@ -235,7 +235,7 @@ option
     padding-bottom: 0
 
   .file-input__list-item
-    font-family: monospace
+    font-family: var(--font-monospace)
     font-size: 15px
 
 // PREVIOUSLY UPLOADED FILES
diff --git a/package-lock.json b/package-lock.json
index 220155f3f..ed5bc0fea 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -20773,6 +20773,11 @@
       "integrity": "sha512-VrR/IiH00Z1tFP4vDGfwZ1esNqTiDMchBEXYY9kilT6wRGgFoCAlgkEUMHb1E3mB0FsfZhv756IF0+R+SFPfdg==",
       "dev": true
     },
+    "typeface-source-code-pro": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/typeface-source-code-pro/-/typeface-source-code-pro-1.1.3.tgz",
+      "integrity": "sha512-BAQ8I7Xy5zS5+KuG+gjRPNYCdfwL8vSF9jT8q9wzCRiiOG4h7id5zt8wcQx59riGRbRsgycRfs/ubyAm2z/FJQ=="
+    },
     "typeface-source-sans-pro": {
       "version": "0.0.75",
       "resolved": "https://registry.npmjs.org/typeface-source-sans-pro/-/typeface-source-sans-pro-0.0.75.tgz",
diff --git a/package.json b/package.json
index 06e071f99..8fc0589ff 100644
--- a/package.json
+++ b/package.json
@@ -109,6 +109,7 @@
     "tmp": "^0.1.0",
     "typeface-roboto": "0.0.75",
     "typeface-source-sans-pro": "0.0.75",
+    "typeface-source-code-pro": "^1.1.3",
     "webpack": "^4.44.1",
     "webpack-cli": "^3.3.12",
     "webpack-manifest-plugin": "^2.2.0",
diff --git a/src/Foundation/Yesod/ErrorHandler.hs b/src/Foundation/Yesod/ErrorHandler.hs
index 025b4098d..f24a7ea85 100644
--- a/src/Foundation/Yesod/ErrorHandler.hs
+++ b/src/Foundation/Yesod/ErrorHandler.hs
@@ -44,29 +44,24 @@ errorHandler err = do
 
                 [whamlet|
                   <p>_{MsgErrorResponseEncrypted}
-                  <pre .errMsg>
+                  <pre .literal-error>
                     #{ciphertext}
                 |]
             | otherwise -> plaintext
 
         errPage = case err of
           NotFound -> [whamlet|<p>_{MsgErrorResponseNotFound}|]
-          InternalError err' -> encrypted err' [whamlet|<p .errMsg>#{err'}|]
+          InternalError err' -> encrypted err' [whamlet|<p .literal-error>#{err'}|]
           InvalidArgs errs -> [whamlet|
               <ul>
                 $forall err' <- errs
-                  <li .errMsg>#{err'}
+                  <li .literal-error>
+                    #{err'}
              |]
           NotAuthenticated -> [whamlet|<p>_{MsgErrorResponseNotAuthenticated}|]
           PermissionDenied err' -> [whamlet|<p .errMsg>#{err'}|]
           BadMethod method -> [whamlet|<p>_{MsgErrorResponseBadMethod (decodeUtf8 method)}|]
       siteLayout (toWgt . mr $ ErrorResponseTitle err) $ do
-        toWidget
-          [cassius|
-            .errMsg
-              white-space: pre-wrap
-              font-family: monospace
-          |]
         errPage
     provideRep . fmap PrettyValue $ case err of
       PermissionDenied err' -> return $ object [ "message" JSON..= err' ]
diff --git a/src/Handler/Admin/ErrorMessage.hs b/src/Handler/Admin/ErrorMessage.hs
index 64d0d538c..681388175 100644
--- a/src/Handler/Admin/ErrorMessage.hs
+++ b/src/Handler/Admin/ErrorMessage.hs
@@ -18,8 +18,9 @@ postAdminErrMsgR = do
   let ctView' = wrapForm ctView def{ formAction = Just . SomeRoute $ AdminErrMsgR, formEncoding = ctEncoding }
   defaultLayout
     [whamlet|
+      $newline never
       $maybe t <- plaintext
-        <pre style="white-space:pre-wrap; font-family:monospace">
+        <pre .literal-error>
           $case t
             $of String t'
               #{t'}
diff --git a/src/Handler/Admin/Test.hs b/src/Handler/Admin/Test.hs
index 645152b0e..fdfe301ec 100644
--- a/src/Handler/Admin/Test.hs
+++ b/src/Handler/Admin/Test.hs
@@ -224,7 +224,7 @@ postAdminTestR = do
             $forall err <- errs
               <li>#{err}
         $of FormSuccess res
-          <p style="white-space:pre-wrap; font-family:monospace;">
+          <p style="white-space:pre-wrap; font-family:var(--font-monospace);">
             #{tshow res}
     |]
 
diff --git a/src/Handler/Health.hs b/src/Handler/Health.hs
index 72a04eee4..050644330 100644
--- a/src/Handler/Health.hs
+++ b/src/Handler/Health.hs
@@ -88,9 +88,9 @@ getInstanceR = do
           $newline never
           <dl .deflist>
             <dt .deflist__dt>_{MsgClusterId}
-            <dd .deflist__dd style="font-family: monospace">#{UUID.toText clusterId}
+            <dd .deflist__dd .uuid>#{UUID.toText clusterId}
             <dt .deflist__dt>_{MsgInstanceId}
-            <dd .deflist__dd style="font-family: monospace">#{UUID.toText instanceId}
+            <dd .deflist__dd .uuid>#{UUID.toText instanceId}
         |]
     provideJson instanceInfo
     provideRep . return $ tshow instanceInfo
diff --git a/templates/course/lecturerMassInput/cellInvitation.hamlet b/templates/course/lecturerMassInput/cellInvitation.hamlet
index 6e95bcf1f..24e43a5a7 100644
--- a/templates/course/lecturerMassInput/cellInvitation.hamlet
+++ b/templates/course/lecturerMassInput/cellInvitation.hamlet
@@ -1,7 +1,7 @@
  $newline never
  <td>
    #{csrf}
-   <span style="font-family: monospace">
+   <span .email>
      #{lEmail}
  <td>
    ^{messageTooltip invWarnMsg}
diff --git a/templates/external-exam-show.hamlet b/templates/external-exam-show.hamlet
index e9fbf5c95..9604f7be4 100644
--- a/templates/external-exam-show.hamlet
+++ b/templates/external-exam-show.hamlet
@@ -51,6 +51,6 @@ $maybe ExternalExamResult{externalExamResultResult} <- mResult
                 <li>
                   ^{nameEmailWidget userDisplayEmail userDisplayName userSurname}
               $of Left email
-                <li style="font-family: monospace">
+                <li .email>
                   #{email}
 
diff --git a/templates/external-exam/staffMassInput/cellInvitation.hamlet b/templates/external-exam/staffMassInput/cellInvitation.hamlet
index df7df418a..284762127 100644
--- a/templates/external-exam/staffMassInput/cellInvitation.hamlet
+++ b/templates/external-exam/staffMassInput/cellInvitation.hamlet
@@ -1,6 +1,6 @@
 $newline never
 <td>
-  <span style="font-family: monospace">
+  <span .email>
     #{email}
 <td>
   ^{messageTooltip invWarnMsg}
diff --git a/templates/mail/support.hamlet b/templates/mail/support.hamlet
index 623ba907f..f85790925 100644
--- a/templates/mail/support.hamlet
+++ b/templates/mail/support.hamlet
@@ -3,6 +3,10 @@ $newline never
 <html>
   <head>
     <meta charset="UTF-8">
+    <style>
+      .url {
+        font-family: monospace;
+      }
   <body>
     <section>
       <dl>
@@ -36,7 +40,7 @@ $newline never
         $maybe referer <- jReferer
           <dt>Referer
           <dd>
-            <a href=#{referer} style="font-family: monospace">
+            <a href=#{referer} .url>
               #{referer}
         $maybe errName <- errPartName
           <dt>Fehlermeldung
diff --git a/templates/mail/userAuthModeUpdate.hamlet b/templates/mail/userAuthModeUpdate.hamlet
index d128ab4db..10938a372 100644
--- a/templates/mail/userAuthModeUpdate.hamlet
+++ b/templates/mail/userAuthModeUpdate.hamlet
@@ -9,6 +9,9 @@ $newline never
         font-variant: small-caps;
         font-weight: normal;
       }
+      .email {
+        font-family: monospace;
+      }
   <body>
     <h1>
       $case userAuthentication
@@ -20,8 +23,10 @@ $newline never
       <p>
         _{SomeMessage MsgAuthPWHashTip}
       <dd>
-        <dt>_{SomeMessage MsgPWHashIdent}
-        <dd style="font-family: monospace">#{userIdent}
+        <dt>
+          _{SomeMessage MsgPWHashIdent}
+        <dd .email>
+          #{userIdent}
         <dt>_{SomeMessage MsgPWHashPassword}
         <dd>
           _{SomeMessage MsgPasswordResetEmailIncoming}
diff --git a/templates/messages/courseInvitationAlreadyRegistered.hamlet b/templates/messages/courseInvitationAlreadyRegistered.hamlet
index ba9c16c59..3e467067f 100644
--- a/templates/messages/courseInvitationAlreadyRegistered.hamlet
+++ b/templates/messages/courseInvitationAlreadyRegistered.hamlet
@@ -2,4 +2,5 @@
   _{MsgCourseParticipantsAlreadyRegistered (length aurAlreadyRegistered)}
 <ul>
   $forall email <- aurAlreadyRegistered'
-    <li style="font-family: monospace">#{email}
+    <li .email>
+      #{email}
diff --git a/templates/messages/courseInvitationRegisteredWithoutField.hamlet b/templates/messages/courseInvitationRegisteredWithoutField.hamlet
index a03358c00..f10595b0c 100644
--- a/templates/messages/courseInvitationRegisteredWithoutField.hamlet
+++ b/templates/messages/courseInvitationRegisteredWithoutField.hamlet
@@ -2,4 +2,5 @@
   _{MsgCourseParticipantsRegisteredWithoutField (length aurNoUniquePrimaryField)}
 <ul>
   $forall email <- aurNoUniquePrimaryField'
-    <li style="font-family: monospace">#{email}
+    <li .email>
+      #{email}
diff --git a/templates/messages/examRegistrationInvitationNotRegisteredWithoutCourse.hamlet b/templates/messages/examRegistrationInvitationNotRegisteredWithoutCourse.hamlet
index b67450643..42a4177c6 100644
--- a/templates/messages/examRegistrationInvitationNotRegisteredWithoutCourse.hamlet
+++ b/templates/messages/examRegistrationInvitationNotRegisteredWithoutCourse.hamlet
@@ -2,4 +2,5 @@
   _{MsgExamRegistrationNotRegisteredWithoutCourse (length aurNoCourseRegistration)}
 <ul>
   $forall email <- aurNoCourseRegistration
-    <li style="font-family: monospace">#{email}
+    <li .email>
+      #{email}
diff --git a/templates/messages/examRegistrationInvitationRegisteredWithoutField.hamlet b/templates/messages/examRegistrationInvitationRegisteredWithoutField.hamlet
index 41bd13e1a..cf5090887 100644
--- a/templates/messages/examRegistrationInvitationRegisteredWithoutField.hamlet
+++ b/templates/messages/examRegistrationInvitationRegisteredWithoutField.hamlet
@@ -2,4 +2,5 @@
   _{MsgExamRegistrationRegisteredWithoutField (length aurNoUniquePrimaryField)}
 <ul>
   $forall email <- aurNoUniquePrimaryField
-    <li style="font-family: monospace">#{email}
+    <li .email>
+      #{email}
diff --git a/templates/messages/submissionFilesIgnored.hamlet b/templates/messages/submissionFilesIgnored.hamlet
index 82149984c..2e586ea95 100644
--- a/templates/messages/submissionFilesIgnored.hamlet
+++ b/templates/messages/submissionFilesIgnored.hamlet
@@ -3,7 +3,8 @@
   $forall ident <- ignoredFiles
     $case ident
       $of Right fileTitle
-        <li style="font-family: monospace">#{fileTitle}
+        <li .file-path>
+          #{fileTitle}
       $of Left cID
-        <li>_{MsgRatingFile} (<span style="font-family: monospace">#{toPathPiece cID}</span>)
+        <li>_{MsgRatingFile} (<span .file-path>#{toPathPiece cID}</span>)
     
diff --git a/templates/metrics.hamlet b/templates/metrics.hamlet
index df87f79c0..096c6c0d7 100644
--- a/templates/metrics.hamlet
+++ b/templates/metrics.hamlet
@@ -1,7 +1,7 @@
 $newline never
 $maybe t <- metricsBearer
   <section>
-    <pre style="font-family: monospace; white-space: pre-wrap; word-break: break-all;">
+    <pre .token>
       #{toPathPiece t}
 <section>
   <dl .deflist>
@@ -23,7 +23,12 @@ $maybe t <- metricsBearer
                 $of _
                   <ul .list-inline .list--comma-separated>
                     $forall (lName, lValue) <- lPairs
-                      <li>#{lName}=#{lValue}
+                      <li>
+                        <span .metric-label>
+                          #{lName}
+                        =
+                        <span .metric-value>
+                          #{lValue}
             $nothing
               $with allLabels <- getLabels mSamples
                 <table .table .table--striped .table--hover>
@@ -32,7 +37,8 @@ $maybe t <- metricsBearer
                       $if showMetricName metricName mSamples
                         <th .table__th>_{MsgMetricName}
                       $forall l <- allLabels
-                        <th .table__th style="font-family: monospace">#{l}
+                        <th .table__th .metric-label>
+                          #{l}
                       <th .table__th>_{MsgMetricValue}
                   <tbody>
                     $forall Sample sName lPairs sValue <- mSamples
@@ -41,8 +47,8 @@ $maybe t <- metricsBearer
                           <td .table__td title=#{sName}>
                             #{metricBasename metricName sName}
                         $forall l <- allLabels
-                          <td .table__td>
+                          <td .table__td .metric-value>
                             $maybe lValue <- lookup l lPairs
                               #{lValue}
-                        <td .table__td>
+                        <td .table__td .metric-value>
                           #{decodeUtf8 sValue}
diff --git a/templates/tutorial/tutorMassInput/cellInvitation.hamlet b/templates/tutorial/tutorMassInput/cellInvitation.hamlet
index df7df418a..284762127 100644
--- a/templates/tutorial/tutorMassInput/cellInvitation.hamlet
+++ b/templates/tutorial/tutorMassInput/cellInvitation.hamlet
@@ -1,6 +1,6 @@
 $newline never
 <td>
-  <span style="font-family: monospace">
+  <span .email>
     #{email}
 <td>
   ^{messageTooltip invWarnMsg}
diff --git a/templates/widgets/email.hamlet b/templates/widgets/email.hamlet
index 285c2c958..371817d97 100644
--- a/templates/widgets/email.hamlet
+++ b/templates/widgets/email.hamlet
@@ -1,2 +1,2 @@
-<span style="font-family: monospace">
+<span .email>
   ^{toHtml email}
diff --git a/templates/widgets/genericFileField.hamlet b/templates/widgets/genericFileField.hamlet
index adf0643bc..4b3f853b8 100644
--- a/templates/widgets/genericFileField.hamlet
+++ b/templates/widgets/genericFileField.hamlet
@@ -43,7 +43,8 @@ $maybe exts <- fmap toNullable fieldRestrictExtensions
     _{MsgUploadModeExtensionRestriction}: #
     <ul .list--inline .list--comma-separated .list--iconless>
       $forall ext <- bool id (mappend zipExtensions) mayUnpack exts
-        <li style="font-family: monospace">#{ext}
+        <li .file-path>
+          #{ext}
     $if fieldMultiple
       <br>
       _{MsgUploadModeExtensionRestrictionMultipleTip}
diff --git a/templates/widgets/massinput/examCorrectors/cellInvitation.hamlet b/templates/widgets/massinput/examCorrectors/cellInvitation.hamlet
index df7df418a..284762127 100644
--- a/templates/widgets/massinput/examCorrectors/cellInvitation.hamlet
+++ b/templates/widgets/massinput/examCorrectors/cellInvitation.hamlet
@@ -1,6 +1,6 @@
 $newline never
 <td>
-  <span style="font-family: monospace">
+  <span .email>
     #{email}
 <td>
   ^{messageTooltip invWarnMsg}
diff --git a/templates/widgets/massinput/examOfficeUsers/cellInvitation.hamlet b/templates/widgets/massinput/examOfficeUsers/cellInvitation.hamlet
index 497c6a4e4..5b4ba5e51 100644
--- a/templates/widgets/massinput/examOfficeUsers/cellInvitation.hamlet
+++ b/templates/widgets/massinput/examOfficeUsers/cellInvitation.hamlet
@@ -1,6 +1,6 @@
  $newline never
  <td>
-   <span style="font-family: monospace">
+   <span .email>
      #{email}
  <td>
    ^{messageTooltip invWarnMsg}
diff --git a/templates/widgets/massinput/submissionUsers/cellInvitation.hamlet b/templates/widgets/massinput/submissionUsers/cellInvitation.hamlet
index abf56ba79..9e991062e 100644
--- a/templates/widgets/massinput/submissionUsers/cellInvitation.hamlet
+++ b/templates/widgets/massinput/submissionUsers/cellInvitation.hamlet
@@ -1,7 +1,7 @@
  $newline never
  <td>
    #{csrf}
-   <span style="font-family: monospace">
+   <span .email>
      #{email}
  <td>
    ^{messageTooltip invWarnMsg}
diff --git a/templates/widgets/specificFileField.hamlet b/templates/widgets/specificFileField.hamlet
index 2f77bae30..58485cb6d 100644
--- a/templates/widgets/specificFileField.hamlet
+++ b/templates/widgets/specificFileField.hamlet
@@ -5,4 +5,5 @@ $if acceptRestricted
   _{MsgUploadModeExtensionRestriction}: 
   <ul .list--inline .list--comma-separated .list--iconless>
     $forall ext <- extensions
-      <li style="font-family: monospace">#{ext}
+      <li .file-path>
+        #{ext}
diff --git a/templates/widgets/zipFileField.hamlet b/templates/widgets/zipFileField.hamlet
index 301d16c4b..073dc8546 100644
--- a/templates/widgets/zipFileField.hamlet
+++ b/templates/widgets/zipFileField.hamlet
@@ -5,4 +5,5 @@ $maybe exts <- fmap toNullable permittedExtensions
   _{MsgUploadModeExtensionRestriction}: 
   <ul .list--inline .list--comma-separated .list--iconless>
     $forall ext <- bool id (mappend zipExtensions) doUnpack exts
-      <li style="font-family: monospace">#{ext}
+      <li .file-path>
+        #{ext}