diff --git a/lib/web/css/docs/source/_buttons.less b/lib/web/css/docs/source/_buttons.less
index a81599c517ff8..a071eed85ef9e 100644
--- a/lib/web/css/docs/source/_buttons.less
+++ b/lib/web/css/docs/source/_buttons.less
@@ -397,7 +397,7 @@ button {
 
 //  # Button with an icon on the left or right side of the text
 //
-//  <code>@_button-icon-font-position</code> variable is used to set up the icon postiton
+//  <code>@_button-icon-font-position</code> variable is used to set up the icon position
 //
 //  Use <code>before</code> to set up button icon position on the left:
 //  ```css
@@ -818,7 +818,7 @@ button {
 
 //  # Link as a button
 //
-//  The <code>.lib-link-as-button()</code> mixin is used to reset link styles (text-decoration and display inline). Then to make it look like a button, you need to add the <code>.lib-button()</code> mixin with appropriate paremeters.
+//  The <code>.lib-link-as-button()</code> mixin is used to reset link styles (text-decoration and display inline). Then to make it look like a button, you need to add the <code>.lib-button()</code> mixin with appropriate parameters.
 //
 //  ```html
 //  <a href="#" class="example-button-9"><span>Button</span></a>
diff --git a/lib/web/css/docs/source/_layout.less b/lib/web/css/docs/source/_layout.less
index 37598197142f6..799f940b44c02 100644
--- a/lib/web/css/docs/source/_layout.less
+++ b/lib/web/css/docs/source/_layout.less
@@ -91,7 +91,7 @@ footer.footer {
 //            <th>@gutter-width</th>
 //            <td class="vars_value">0</td>
 //            <td class="vars_value">'' | false | value</td>
-//            <td>Distanse between columns</td>
+//            <td>Distance between columns</td>
 //        </tr>
 //        <tr>
 //            <th colspan="4" class="vars_section">Variables for layout columns</th>
@@ -361,7 +361,7 @@ footer.footer {
 
 //  # Layout width
 //
-//  The <code>.lib-layout-width()</code> mixin is used to set default page width of the element the mixin is applyed to. It can be used to set width for the whole page wrapper or for the page elements individualy like header, footer, and so on.
+//  The <code>.lib-layout-width()</code> mixin is used to set default page width of the element the mixin is applied to. It can be used to set width for the whole page wrapper or for the page elements individualy like header, footer, and so on.
 
 //  # Layout width variables
 //
diff --git a/lib/web/css/docs/source/_typography.less b/lib/web/css/docs/source/_typography.less
index 294f6446fdf13..b360c672a6d7c 100644
--- a/lib/web/css/docs/source/_typography.less
+++ b/lib/web/css/docs/source/_typography.less
@@ -3,7 +3,7 @@
 //  * See COPYING.txt for license details.
 //  */
 
-//  # Typogrphy
+//  # Typography
 //
 //  Magento UI library provides mixins for typography styling. To configure typography, global variables from **_variables.less** file are used.
 //
@@ -978,7 +978,7 @@
 
 //  # Text hide
 //
-//  The <code>.lib-text-hide()</code> mixin hides a text of the element the mixin is applyed to.
+//  The <code>.lib-text-hide()</code> mixin hides a text of the element the mixin is applied to.
 //
 //  ```html
 //  <p class="example-text-hide">