diff --git a/packages/chakra-ui/src/DescriptionField/DescriptionField.tsx b/packages/chakra-ui/src/DescriptionField/DescriptionField.tsx
index 1596fc2325..3d998dbc62 100644
--- a/packages/chakra-ui/src/DescriptionField/DescriptionField.tsx
+++ b/packages/chakra-ui/src/DescriptionField/DescriptionField.tsx
@@ -12,7 +12,7 @@ export default function DescriptionField<
 
   if (typeof description === 'string') {
     return (
-      <Text id={id} mt={2} mb={4}>
+      <Text as='sup' fontSize='md' id={id}>
         {description}
       </Text>
     );
diff --git a/packages/chakra-ui/test/__snapshots__/Array.test.tsx.snap b/packages/chakra-ui/test/__snapshots__/Array.test.tsx.snap
index c23a2b13af..2cce43876d 100644
--- a/packages/chakra-ui/test/__snapshots__/Array.test.tsx.snap
+++ b/packages/chakra-ui/test/__snapshots__/Array.test.tsx.snap
@@ -1635,8 +1635,7 @@ exports[`with title and description array 1`] = `
 }
 
 .emotion-5 {
-  margin-top: 2px;
-  margin-bottom: 4px;
+  font-size: md;
 }
 
 .emotion-6 {
@@ -1740,12 +1739,12 @@ exports[`with title and description array 1`] = `
             className="chakra-divider emotion-4"
           />
         </div>
-        <p
+        <sup
           className="chakra-text emotion-5"
           id="root__description"
         >
           a test description
-        </p>
+        </sup>
         <div
           className="emotion-6"
         >
@@ -1814,8 +1813,7 @@ exports[`with title and description array icons 1`] = `
 }
 
 .emotion-5 {
-  margin-top: 2px;
-  margin-bottom: 4px;
+  font-size: md;
 }
 
 .emotion-6 {
@@ -2014,12 +2012,12 @@ exports[`with title and description array icons 1`] = `
             className="chakra-divider emotion-4"
           />
         </div>
-        <p
+        <sup
           className="chakra-text emotion-5"
           id="root__description"
         >
           a test description
-        </p>
+        </sup>
         <div
           className="emotion-6"
         >
@@ -2078,12 +2076,12 @@ exports[`with title and description array icons 1`] = `
                     <p
                       className="chakra-text emotion-15"
                     >
-                      <p
+                      <sup
                         className="chakra-text emotion-5"
                         id="root_0__description"
                       >
                         a test item description
-                      </p>
+                      </sup>
                     </p>
                   </div>
                 </div>
@@ -2233,12 +2231,12 @@ exports[`with title and description array icons 1`] = `
                     <p
                       className="chakra-text emotion-15"
                     >
-                      <p
+                      <sup
                         className="chakra-text emotion-5"
                         id="root_1__description"
                       >
                         a test item description
-                      </p>
+                      </sup>
                     </p>
                   </div>
                 </div>
@@ -2564,8 +2562,7 @@ exports[`with title and description checkboxes 1`] = `
 }
 
 .emotion-16 {
-  margin-top: 2px;
-  margin-bottom: 4px;
+  font-size: md;
 }
 
 .emotion-17 {
@@ -2716,12 +2713,12 @@ exports[`with title and description checkboxes 1`] = `
       <p
         className="chakra-text emotion-15"
       >
-        <p
+        <sup
           className="chakra-text emotion-16"
           id="root__description"
         >
           a test description
-        </p>
+        </sup>
       </p>
     </div>
   </div>
@@ -2752,8 +2749,7 @@ exports[`with title and description fixed array 1`] = `
 }
 
 .emotion-5 {
-  margin-top: 2px;
-  margin-bottom: 4px;
+  font-size: md;
 }
 
 .emotion-6 {
@@ -2864,12 +2860,12 @@ exports[`with title and description fixed array 1`] = `
             className="chakra-divider emotion-4"
           />
         </div>
-        <p
+        <sup
           className="chakra-text emotion-5"
           id="root__description"
         >
           a test description
-        </p>
+        </sup>
         <div
           className="emotion-6"
         >
@@ -2928,12 +2924,12 @@ exports[`with title and description fixed array 1`] = `
                     <p
                       className="chakra-text emotion-15"
                     >
-                      <p
+                      <sup
                         className="chakra-text emotion-5"
                         id="root_0__description"
                       >
                         a test item description
-                      </p>
+                      </sup>
                     </p>
                   </div>
                 </div>
@@ -2992,12 +2988,12 @@ exports[`with title and description fixed array 1`] = `
                     <p
                       className="chakra-text emotion-15"
                     >
-                      <p
+                      <sup
                         className="chakra-text emotion-5"
                         id="root_1__description"
                       >
                         a test item description
-                      </p>
+                      </sup>
                     </p>
                   </div>
                 </div>
@@ -3035,8 +3031,7 @@ exports[`with title and description from both array 1`] = `
 }
 
 .emotion-5 {
-  margin-top: 2px;
-  margin-bottom: 4px;
+  font-size: md;
 }
 
 .emotion-6 {
@@ -3140,12 +3135,12 @@ exports[`with title and description from both array 1`] = `
             className="chakra-divider emotion-4"
           />
         </div>
-        <p
+        <sup
           className="chakra-text emotion-5"
           id="root__description"
         >
           a fancier description
-        </p>
+        </sup>
         <div
           className="emotion-6"
         >
@@ -3214,8 +3209,7 @@ exports[`with title and description from both array icons 1`] = `
 }
 
 .emotion-5 {
-  margin-top: 2px;
-  margin-bottom: 4px;
+  font-size: md;
 }
 
 .emotion-6 {
@@ -3414,12 +3408,12 @@ exports[`with title and description from both array icons 1`] = `
             className="chakra-divider emotion-4"
           />
         </div>
-        <p
+        <sup
           className="chakra-text emotion-5"
           id="root__description"
         >
           a fancier description
-        </p>
+        </sup>
         <div
           className="emotion-6"
         >
@@ -3478,12 +3472,12 @@ exports[`with title and description from both array icons 1`] = `
                     <p
                       className="chakra-text emotion-15"
                     >
-                      <p
+                      <sup
                         className="chakra-text emotion-5"
                         id="root_0__description"
                       >
                         a fancier item description
-                      </p>
+                      </sup>
                     </p>
                   </div>
                 </div>
@@ -3633,12 +3627,12 @@ exports[`with title and description from both array icons 1`] = `
                     <p
                       className="chakra-text emotion-15"
                     >
-                      <p
+                      <sup
                         className="chakra-text emotion-5"
                         id="root_1__description"
                       >
                         a fancier item description
-                      </p>
+                      </sup>
                     </p>
                   </div>
                 </div>
@@ -3964,8 +3958,7 @@ exports[`with title and description from both checkboxes 1`] = `
 }
 
 .emotion-16 {
-  margin-top: 2px;
-  margin-bottom: 4px;
+  font-size: md;
 }
 
 .emotion-17 {
@@ -4116,12 +4109,12 @@ exports[`with title and description from both checkboxes 1`] = `
       <p
         className="chakra-text emotion-15"
       >
-        <p
+        <sup
           className="chakra-text emotion-16"
           id="root__description"
         >
           a fancier description
-        </p>
+        </sup>
       </p>
     </div>
   </div>
@@ -4152,8 +4145,7 @@ exports[`with title and description from both fixed array 1`] = `
 }
 
 .emotion-5 {
-  margin-top: 2px;
-  margin-bottom: 4px;
+  font-size: md;
 }
 
 .emotion-6 {
@@ -4264,12 +4256,12 @@ exports[`with title and description from both fixed array 1`] = `
             className="chakra-divider emotion-4"
           />
         </div>
-        <p
+        <sup
           className="chakra-text emotion-5"
           id="root__description"
         >
           a fancier description
-        </p>
+        </sup>
         <div
           className="emotion-6"
         >
@@ -4328,12 +4320,12 @@ exports[`with title and description from both fixed array 1`] = `
                     <p
                       className="chakra-text emotion-15"
                     >
-                      <p
+                      <sup
                         className="chakra-text emotion-5"
                         id="root_0__description"
                       >
                         a fancier item description
-                      </p>
+                      </sup>
                     </p>
                   </div>
                 </div>
@@ -4392,12 +4384,12 @@ exports[`with title and description from both fixed array 1`] = `
                     <p
                       className="chakra-text emotion-15"
                     >
-                      <p
+                      <sup
                         className="chakra-text emotion-5"
                         id="root_1__description"
                       >
                         a fancier item description
-                      </p>
+                      </sup>
                     </p>
                   </div>
                 </div>
@@ -4435,8 +4427,7 @@ exports[`with title and description from uiSchema array 1`] = `
 }
 
 .emotion-5 {
-  margin-top: 2px;
-  margin-bottom: 4px;
+  font-size: md;
 }
 
 .emotion-6 {
@@ -4540,12 +4531,12 @@ exports[`with title and description from uiSchema array 1`] = `
             className="chakra-divider emotion-4"
           />
         </div>
-        <p
+        <sup
           className="chakra-text emotion-5"
           id="root__description"
         >
           a fancier description
-        </p>
+        </sup>
         <div
           className="emotion-6"
         >
@@ -4614,8 +4605,7 @@ exports[`with title and description from uiSchema array icons 1`] = `
 }
 
 .emotion-5 {
-  margin-top: 2px;
-  margin-bottom: 4px;
+  font-size: md;
 }
 
 .emotion-6 {
@@ -4814,12 +4804,12 @@ exports[`with title and description from uiSchema array icons 1`] = `
             className="chakra-divider emotion-4"
           />
         </div>
-        <p
+        <sup
           className="chakra-text emotion-5"
           id="root__description"
         >
           a fancier description
-        </p>
+        </sup>
         <div
           className="emotion-6"
         >
@@ -4878,12 +4868,12 @@ exports[`with title and description from uiSchema array icons 1`] = `
                     <p
                       className="chakra-text emotion-15"
                     >
-                      <p
+                      <sup
                         className="chakra-text emotion-5"
                         id="root_0__description"
                       >
                         a fancier item description
-                      </p>
+                      </sup>
                     </p>
                   </div>
                 </div>
@@ -5033,12 +5023,12 @@ exports[`with title and description from uiSchema array icons 1`] = `
                     <p
                       className="chakra-text emotion-15"
                     >
-                      <p
+                      <sup
                         className="chakra-text emotion-5"
                         id="root_1__description"
                       >
                         a fancier item description
-                      </p>
+                      </sup>
                     </p>
                   </div>
                 </div>
@@ -5364,8 +5354,7 @@ exports[`with title and description from uiSchema checkboxes 1`] = `
 }
 
 .emotion-16 {
-  margin-top: 2px;
-  margin-bottom: 4px;
+  font-size: md;
 }
 
 .emotion-17 {
@@ -5516,12 +5505,12 @@ exports[`with title and description from uiSchema checkboxes 1`] = `
       <p
         className="chakra-text emotion-15"
       >
-        <p
+        <sup
           className="chakra-text emotion-16"
           id="root__description"
         >
           a fancier description
-        </p>
+        </sup>
       </p>
     </div>
   </div>
@@ -5552,8 +5541,7 @@ exports[`with title and description from uiSchema fixed array 1`] = `
 }
 
 .emotion-5 {
-  margin-top: 2px;
-  margin-bottom: 4px;
+  font-size: md;
 }
 
 .emotion-6 {
@@ -5664,12 +5652,12 @@ exports[`with title and description from uiSchema fixed array 1`] = `
             className="chakra-divider emotion-4"
           />
         </div>
-        <p
+        <sup
           className="chakra-text emotion-5"
           id="root__description"
         >
           a fancier description
-        </p>
+        </sup>
         <div
           className="emotion-6"
         >
@@ -5728,12 +5716,12 @@ exports[`with title and description from uiSchema fixed array 1`] = `
                     <p
                       className="chakra-text emotion-15"
                     >
-                      <p
+                      <sup
                         className="chakra-text emotion-5"
                         id="root_0__description"
                       >
                         a fancier item description
-                      </p>
+                      </sup>
                     </p>
                   </div>
                 </div>
@@ -5792,12 +5780,12 @@ exports[`with title and description from uiSchema fixed array 1`] = `
                     <p
                       className="chakra-text emotion-15"
                     >
-                      <p
+                      <sup
                         className="chakra-text emotion-5"
                         id="root_1__description"
                       >
                         a fancier item description
-                      </p>
+                      </sup>
                     </p>
                   </div>
                 </div>
@@ -6639,8 +6627,7 @@ exports[`with title and description with global label off checkboxes 1`] = `
 }
 
 .emotion-16 {
-  margin-top: 2px;
-  margin-bottom: 4px;
+  font-size: md;
 }
 
 .emotion-17 {
@@ -6791,12 +6778,12 @@ exports[`with title and description with global label off checkboxes 1`] = `
       <p
         className="chakra-text emotion-15"
       >
-        <p
+        <sup
           className="chakra-text emotion-16"
           id="root__description"
         >
           a test description
-        </p>
+        </sup>
       </p>
     </div>
   </div>
diff --git a/packages/chakra-ui/test/__snapshots__/Form.test.tsx.snap b/packages/chakra-ui/test/__snapshots__/Form.test.tsx.snap
index 11bd50400e..783e92b019 100644
--- a/packages/chakra-ui/test/__snapshots__/Form.test.tsx.snap
+++ b/packages/chakra-ui/test/__snapshots__/Form.test.tsx.snap
@@ -709,8 +709,7 @@ exports[`single fields field with description 1`] = `
 }
 
 .emotion-8 {
-  margin-top: 2px;
-  margin-bottom: 4px;
+  font-size: md;
 }
 
 .emotion-9 {
@@ -803,12 +802,12 @@ exports[`single fields field with description 1`] = `
               <p
                 className="chakra-text emotion-7"
               >
-                <p
+                <sup
                   className="chakra-text emotion-8"
                   id="root_my-field__description"
                 >
                   some description
-                </p>
+                </sup>
               </p>
             </div>
           </div>
@@ -851,8 +850,7 @@ exports[`single fields field with description in uiSchema 1`] = `
 }
 
 .emotion-8 {
-  margin-top: 2px;
-  margin-bottom: 4px;
+  font-size: md;
 }
 
 .emotion-9 {
@@ -945,12 +943,12 @@ exports[`single fields field with description in uiSchema 1`] = `
               <p
                 className="chakra-text emotion-7"
               >
-                <p
+                <sup
                   className="chakra-text emotion-8"
                   id="root_my-field__description"
                 >
                   some other description
-                </p>
+                </sup>
               </p>
             </div>
           </div>
diff --git a/packages/chakra-ui/test/__snapshots__/Object.test.tsx.snap b/packages/chakra-ui/test/__snapshots__/Object.test.tsx.snap
index b4ae132afc..691d5ea16b 100644
--- a/packages/chakra-ui/test/__snapshots__/Object.test.tsx.snap
+++ b/packages/chakra-ui/test/__snapshots__/Object.test.tsx.snap
@@ -736,8 +736,7 @@ exports[`object fields with title and description additionalProperties 1`] = `
 }
 
 .emotion-4 {
-  margin-top: 2px;
-  margin-bottom: 4px;
+  font-size: md;
 }
 
 .emotion-5 {
@@ -884,12 +883,12 @@ exports[`object fields with title and description additionalProperties 1`] = `
           className="chakra-divider emotion-3"
         />
       </div>
-      <p
+      <sup
         className="chakra-text emotion-4"
         id="root__description"
       >
         a test description
-      </p>
+      </sup>
       <div
         className="emotion-5"
       >
@@ -1050,8 +1049,7 @@ exports[`object fields with title and description from both additionalProperties
 }
 
 .emotion-4 {
-  margin-top: 2px;
-  margin-bottom: 4px;
+  font-size: md;
 }
 
 .emotion-5 {
@@ -1198,12 +1196,12 @@ exports[`object fields with title and description from both additionalProperties
           className="chakra-divider emotion-3"
         />
       </div>
-      <p
+      <sup
         className="chakra-text emotion-4"
         id="root__description"
       >
         a fancier description
-      </p>
+      </sup>
       <div
         className="emotion-5"
       >
@@ -1364,8 +1362,7 @@ exports[`object fields with title and description from both object 1`] = `
 }
 
 .emotion-4 {
-  margin-top: 2px;
-  margin-bottom: 4px;
+  font-size: md;
 }
 
 .emotion-5 {
@@ -1446,12 +1443,12 @@ exports[`object fields with title and description from both object 1`] = `
           className="chakra-divider emotion-3"
         />
       </div>
-      <p
+      <sup
         className="chakra-text emotion-4"
         id="root__description"
       >
         a fancier description
-      </p>
+      </sup>
       <div
         className="emotion-5"
       >
@@ -1496,12 +1493,12 @@ exports[`object fields with title and description from both object 1`] = `
               <p
                 className="chakra-text emotion-11"
               >
-                <p
+                <sup
                   className="chakra-text emotion-4"
                   id="root_a__description"
                 >
                   a fancier item A description
-                </p>
+                </sup>
               </p>
             </div>
           </div>
@@ -1548,12 +1545,12 @@ exports[`object fields with title and description from both object 1`] = `
               <p
                 className="chakra-text emotion-11"
               >
-                <p
+                <sup
                   className="chakra-text emotion-4"
                   id="root_b__description"
                 >
                   a fancier item B description
-                </p>
+                </sup>
               </p>
             </div>
           </div>
@@ -1588,8 +1585,7 @@ exports[`object fields with title and description from uiSchema additionalProper
 }
 
 .emotion-4 {
-  margin-top: 2px;
-  margin-bottom: 4px;
+  font-size: md;
 }
 
 .emotion-5 {
@@ -1736,12 +1732,12 @@ exports[`object fields with title and description from uiSchema additionalProper
           className="chakra-divider emotion-3"
         />
       </div>
-      <p
+      <sup
         className="chakra-text emotion-4"
         id="root__description"
       >
         a fancier description
-      </p>
+      </sup>
       <div
         className="emotion-5"
       >
@@ -1902,8 +1898,7 @@ exports[`object fields with title and description from uiSchema object 1`] = `
 }
 
 .emotion-4 {
-  margin-top: 2px;
-  margin-bottom: 4px;
+  font-size: md;
 }
 
 .emotion-5 {
@@ -1984,12 +1979,12 @@ exports[`object fields with title and description from uiSchema object 1`] = `
           className="chakra-divider emotion-3"
         />
       </div>
-      <p
+      <sup
         className="chakra-text emotion-4"
         id="root__description"
       >
         a fancier description
-      </p>
+      </sup>
       <div
         className="emotion-5"
       >
@@ -2034,12 +2029,12 @@ exports[`object fields with title and description from uiSchema object 1`] = `
               <p
                 className="chakra-text emotion-11"
               >
-                <p
+                <sup
                   className="chakra-text emotion-4"
                   id="root_a__description"
                 >
                   a fancier item A description
-                </p>
+                </sup>
               </p>
             </div>
           </div>
@@ -2086,12 +2081,12 @@ exports[`object fields with title and description from uiSchema object 1`] = `
               <p
                 className="chakra-text emotion-11"
               >
-                <p
+                <sup
                   className="chakra-text emotion-4"
                   id="root_b__description"
                 >
                   a fancier item B description
-                </p>
+                </sup>
               </p>
             </div>
           </div>
@@ -2126,8 +2121,7 @@ exports[`object fields with title and description from uiSchema show add button
 }
 
 .emotion-4 {
-  margin-top: 2px;
-  margin-bottom: 4px;
+  font-size: md;
 }
 
 .emotion-5 {
@@ -2274,12 +2268,12 @@ exports[`object fields with title and description from uiSchema show add button
           className="chakra-divider emotion-3"
         />
       </div>
-      <p
+      <sup
         className="chakra-text emotion-4"
         id="root__description"
       >
         a fancier description
-      </p>
+      </sup>
       <div
         className="emotion-5"
       >
@@ -2440,8 +2434,7 @@ exports[`object fields with title and description object 1`] = `
 }
 
 .emotion-4 {
-  margin-top: 2px;
-  margin-bottom: 4px;
+  font-size: md;
 }
 
 .emotion-5 {
@@ -2522,12 +2515,12 @@ exports[`object fields with title and description object 1`] = `
           className="chakra-divider emotion-3"
         />
       </div>
-      <p
+      <sup
         className="chakra-text emotion-4"
         id="root__description"
       >
         a test description
-      </p>
+      </sup>
       <div
         className="emotion-5"
       >
@@ -2572,12 +2565,12 @@ exports[`object fields with title and description object 1`] = `
               <p
                 className="chakra-text emotion-11"
               >
-                <p
+                <sup
                   className="chakra-text emotion-4"
                   id="root_a__description"
                 >
                   A description
-                </p>
+                </sup>
               </p>
             </div>
           </div>
@@ -2624,12 +2617,12 @@ exports[`object fields with title and description object 1`] = `
               <p
                 className="chakra-text emotion-11"
               >
-                <p
+                <sup
                   className="chakra-text emotion-4"
                   id="root_b__description"
                 >
                   B description
-                </p>
+                </sup>
               </p>
             </div>
           </div>
@@ -2664,8 +2657,7 @@ exports[`object fields with title and description show add button and fields if
 }
 
 .emotion-4 {
-  margin-top: 2px;
-  margin-bottom: 4px;
+  font-size: md;
 }
 
 .emotion-5 {
@@ -2812,12 +2804,12 @@ exports[`object fields with title and description show add button and fields if
           className="chakra-divider emotion-3"
         />
       </div>
-      <p
+      <sup
         className="chakra-text emotion-4"
         id="root__description"
       >
         a test description
-      </p>
+      </sup>
       <div
         className="emotion-5"
       >