diff --git a/src/_style.scss b/src/_style.scss
index 9c0bbcf2..c10b0589 100644
--- a/src/_style.scss
+++ b/src/_style.scss
@@ -487,4 +487,10 @@ select.form-control {
   border-radius: 0.5rem;
   line-height: 2rem;
   font-weight: 400;
+  font-size: 0.875rem;
+}
+
+.username-suggestion-label {
+  font-size: 0.875rem;
+  margin-right: 0.25rem;
 }
diff --git a/src/register/UsernameField.jsx b/src/register/UsernameField.jsx
index a0a4c808..0dfc4dfe 100644
--- a/src/register/UsernameField.jsx
+++ b/src/register/UsernameField.jsx
@@ -14,7 +14,7 @@ const UsernameField = (props) => {
     <FormGroup {...props}>
       {usernameSuggestions.length > 0 && errorMessage ? (
         <div>
-          <span className="text-gray mr-2">{intl.formatMessage(messages['registration.username.suggestion.label'])}</span>
+          <span className="text-gray username-suggestion-label">{intl.formatMessage(messages['registration.username.suggestion.label'])}</span>
           {usernameSuggestions.map((username, index) => (
             <Button
               type="button"