{"id":7605,"date":"2025-02-19T21:34:48","date_gmt":"2025-02-19T18:34:48","guid":{"rendered":"https:\/\/pixadoro.com\/how-and-when-to-use-px-rem-em-vh-vw\/"},"modified":"2025-06-19T13:20:22","modified_gmt":"2025-06-19T10:20:22","slug":"how-and-when-to-use-px-rem-em-vh-vw","status":"publish","type":"post","link":"https:\/\/pixadoro.com\/en\/how-and-when-to-use-px-rem-em-vh-vw\/","title":{"rendered":"How and when to use PX, REM, EM, %, VH, VW"},"content":{"rendered":"\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Contents<\/h2><nav><ul><li class=\"\"><a href=\"#px-%D0%BF%D0%B8%D0%BA%D1%81%D0%B5%D0%BB%D0%B8\">PX (Pixels)<\/a><\/li><li class=\"\"><a href=\"#%D0%BF%D1%80%D0%BE%D1%86%D0%B5%D0%BD%D1%82\">% (Percentage)<\/a><\/li><li class=\"\"><a href=\"#vh-%D0%B8-vw-viewport-height-%D0%B8-viewport-width\">VH and VW (Viewport Height and Viewport Width)<\/a><\/li><li class=\"\"><a href=\"#rem-root-em\">REM (Root EM)<\/a><\/li><li class=\"\"><a href=\"#em-%D0%BE%D1%82%D0%BD%D0%BE%D1%81%D0%B8%D1%82%D0%B5%D0%BB%D0%BD%D0%BE-%D1%81%D0%BF%D1%80%D1%8F%D0%BC%D0%BE-%D1%80%D0%BE%D0%B4%D0%B8%D1%82%D0%B5%D0%BB%D1%8F\">EM (Relative to parent)<\/a><\/li><li class=\"\"><a href=\"#media-queries\">Media Queries<\/a><\/li><li class=\"\"><a href=\"#%D0%BA%D0%B0%D0%BA-%D0%B4%D0%B0-%D0%BF%D1%80%D0%B8%D0%BB%D0%B0%D0%B3%D0%B0%D0%BC%D0%B5-%D0%B2%D1%81%D0%B8%D1%87%D0%BA%D0%BE-%D1%82%D0%BE%D0%B2%D0%B0-%D0%B2%D1%8A%D0%B2-word-press\">How to apply all this in WordPress<\/a><\/li><li class=\"\"><a href=\"#%D0%B2-%D0%B7%D0%B0%D0%BA%D0%BB%D1%8E%D1%87%D0%B5%D0%BD%D0%B8%D0%B5\">In conclusion<\/a><\/li><\/ul><\/nav><\/div>\n\n<p class=\"wp-block-paragraph\">When we build or customize websites with WordPress, we often have to define element sizes, spacing and proportions. These decisions are based on the CSS units of measure, namely <strong>PX, REM, EM, %, VH and VW<\/strong>, plus <strong>Media Queries<\/strong> that allow different styles at different screen widths. <\/p>\n\n<p class=\"wp-block-paragraph\">Below, we&#8217;ll take a look at each unit in depth &#8211; when and how it&#8217;s best used, where it can get in your way, and what trivia lies behind it. We&#8217;ll also add some practical tips for Media Queries to help you achieve more control over the responsive design of your WordPress site. <\/p>\n\n<h2 class=\"wp-block-heading\" id=\"px-&#x43F;&#x438;&#x43A;&#x441;&#x435;&#x43B;&#x438;\">PX (Pixels)<\/h2>\n\n<h3 class=\"wp-block-heading\" id=\"&#x43A;&#x430;&#x43A;&#x432;&#x43E;-&#x43F;&#x440;&#x435;&#x434;&#x441;&#x442;&#x430;&#x432;&#x43B;&#x44F;&#x432;&#x430;-px\">What is the PX?<\/h3>\n\n<p class=\"wp-block-paragraph\"><strong>PX<\/strong> (pixel) is one of the most familiar and commonly used units in web design. From a CSS perspective, <code>1px<\/code> is considered a &#8220;reference&#8221; pixel and is not always equal to one physical pixel on the screen. For example, in high pixel density devices (such as Retina displays), a single CSS pixel may correspond to multiple hardware pixels. However, for practical website design, PX is considered a stable, &#8220;absolute&#8221; unit.   <\/p>\n\n<h3 class=\"wp-block-heading\" id=\"&#x43A;&#x43E;&#x433;&#x430;-&#x438;-&#x437;&#x430;&#x449;&#x43E;-&#x434;&#x430;-&#x438;&#x437;&#x43F;&#x43E;&#x43B;&#x437;&#x432;&#x430;&#x43C;&#x435;-px\">When and why to use PX?<\/h3>\n\n<ol class=\"wp-block-list\">\n<li><strong>Precise control:<\/strong> if you want an element (icon, button, container) to have an accurate and consistent size on any device, pixels are a good choice.<\/li>\n\n\n\n<li><strong>Details:<\/strong> Suitable for icons, borders (border-radius), shadows (box-shadow), or any decorative elements where precision is important.<\/li>\n\n\n\n<li><strong>Fixed design:<\/strong> column widths, maximum image sizes, fixed tab heights.<\/li>\n<\/ol>\n\n<h3 class=\"wp-block-heading\" id=\"&#x43B;&#x44E;&#x431;&#x43E;&#x43F;&#x438;&#x442;&#x435;&#x43D;-&#x444;&#x430;&#x43A;&#x442;\">A curious fact<\/h3>\n\n<p class=\"wp-block-paragraph\">The word &#8220;pixel&#8221; comes from the abbreviation of &#8220;picture element&#8221;. In the context of CSS, however, a pixel is an &#8220;abstraction&#8221;, meaning that it does not necessarily correspond to the actual size of the dots on the screen. Because of this, your site will look similar even on devices with different resolutions, as long as you set sizes in PX consistently.  <\/p>\n\n<h3 class=\"wp-block-heading\" id=\"&#x43F;&#x440;&#x438;&#x43C;&#x435;&#x440;&#x435;&#x43D;-&#x43A;&#x43E;&#x434;\">Sample code<\/h3>\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css line-numbers\"><code>.header {\n  width: 1200px;\n  margin: 0 auto;\n}\n.icon {\n  width: 24px;\n  height: 24px;\n  border-radius: 4px;\n}<\/code><\/code><\/pre>\n\n<p class=\"wp-block-paragraph\">In this case the .header will always be 1200px and the icon will remain 24x24px on all screens.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"&#x43F;&#x440;&#x43E;&#x446;&#x435;&#x43D;&#x442;\">% (Percentage)<\/h2>\n\n<h3 class=\"wp-block-heading\" id=\"&#x43A;&#x430;&#x43A;&#x432;&#x43E;-&#x43F;&#x440;&#x435;&#x434;&#x441;&#x442;&#x430;&#x432;&#x43B;&#x44F;&#x432;&#x430;\">What is %?<\/h3>\n\n<p class=\"wp-block-paragraph\">The percentage (<code>%<\/code>) is a relative unit that calculates the size of an element relative to its parent. For example, <code>width: 50%<\/code>; means that the element will be half the width of the container it is in. <\/p>\n\n<h3 class=\"wp-block-heading\" id=\"&#x43A;&#x43E;&#x433;&#x430;-&#x438;-&#x437;&#x430;&#x449;&#x43E;-&#x434;&#x430;-&#x438;&#x437;&#x43F;&#x43E;&#x43B;&#x437;&#x432;&#x430;&#x43C;&#x435;\">When and why to use %?<\/h3>\n\n<ol class=\"wp-block-list\">\n<li><strong>Responsive:<\/strong> The element automatically scales down or up along with its parent, which helps make responsive design easier.<\/li>\n\n\n\n<li><strong>Padding and Margin:<\/strong> When using <code>%<\/code> for inside and outside spacing, these values will &#8220;move&#8221; proportionally as the parent changes size.<\/li>\n\n\n\n<li><strong>Fluid Layouts:<\/strong> Percentages are an ideal choice when you want columns or blocks that dynamically stack and resize to different screen widths.<\/li>\n<\/ol>\n\n<h3 class=\"wp-block-heading\" id=\"&#x43B;&#x44E;&#x431;&#x43E;&#x43F;&#x438;&#x442;&#x435;&#x43D;-&#x444;&#x430;&#x43A;&#x442;-1\">A curious fact<\/h3>\n\n<p class=\"wp-block-paragraph\">One of the first fluid designs on the web was based almost entirely on percentage widths. This allowed content to be &#8220;squeezed&#8221; and &#8220;stretched&#8221; according to available space, without a horizontal scrollbar. <\/p>\n\n<h3 class=\"wp-block-heading\" id=\"&#x43F;&#x440;&#x438;&#x43C;&#x435;&#x440;&#x435;&#x43D;-&#x43A;&#x43E;&#x434;-2\">Sample code<\/h3>\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css line-numbers\"><code>.container {\n  width: 80%;\n  margin: 0 auto;\n  background-color: #f5f5f5;\n}\n.inner-section {\n  padding: 5%;\n}<\/code><\/code><\/pre>\n\n<p class=\"wp-block-paragraph\">Here the <strong>.container<\/strong> takes up 80% of the parent&#8217;s space (or the body itself if no other container is available), and the <strong>.inner-section<\/strong> has padding proportional to its own width.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"vh-&#x438;-vw-viewport-height-&#x438;-viewport-width\">VH and VW (Viewport Height and Viewport Width)<\/h2>\n\n<h3 class=\"wp-block-heading\" id=\"&#x43A;&#x430;&#x43A;&#x432;&#x43E;-&#x43F;&#x440;&#x435;&#x434;&#x441;&#x442;&#x430;&#x432;&#x43B;&#x44F;&#x432;&#x430;&#x442;-vh-&#x438;-vw\">What are VH and VW?<\/h3>\n\n<ul class=\"wp-block-list\">\n<li><strong>VH (Viewport Height)<\/strong>: <code>1vh<\/code> is equal to 1% of the visible height of the window (browser viewport).<\/li>\n\n\n\n<li><strong>VW (Viewport Width)<\/strong>: <code>1vw<\/code> is equal to 1% of the visible width of the window.<\/li>\n<\/ul>\n\n<h3 class=\"wp-block-heading\" id=\"&#x43A;&#x43E;&#x433;&#x430;-&#x438;-&#x437;&#x430;&#x449;&#x43E;-&#x434;&#x430;-&#x433;&#x438;-&#x438;&#x437;&#x43F;&#x43E;&#x43B;&#x437;&#x432;&#x430;&#x43C;&#x435;\">When and why to use them?<\/h3>\n\n<ol class=\"wp-block-list\">\n<li><strong>Full screen layout:<\/strong> if you want a tab to occupy the full height of the screen, set <code>height: 100vh;<\/code>. Often used for &#8220;hero&#8221; sections or home banners. <\/li>\n\n\n\n<li><strong>Animations and dynamic layouts:<\/strong> when you resize the window, VH and VW automatically adjust, which can be fun for interactive designs.<\/li>\n\n\n\n<li><strong>Caution:<\/strong> some mobile browsers (especially iOS Safari) have a specific behavior when displaying\/hiding the address bar that can change the value of <code>vh<\/code>.<\/li>\n<\/ol>\n\n<h3 class=\"wp-block-heading\" id=\"&#x43B;&#x44E;&#x431;&#x43E;&#x43F;&#x438;&#x442;&#x435;&#x43D;-&#x444;&#x430;&#x43A;&#x442;-3\">A curious fact<\/h3>\n\n<p class=\"wp-block-paragraph\">Due to the different behavior of mobile browsers, &#8220;100vh&#8221; sometimes does not correspond to 100% of the actual visible screen. This is the reason why many web designers use <strong>JS<\/strong> hacks or a combination with CSS <code>calc()<\/code> for more precise control. <\/p>\n\n<h3 class=\"wp-block-heading\" id=\"&#x43F;&#x440;&#x438;&#x43C;&#x435;&#x440;&#x435;&#x43D;-&#x43A;&#x43E;&#x434;-4\">Sample code<\/h3>\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css line-numbers\">.full-screen-section {\n  height: 100vh;\n  width: 100vw;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: #222;\n  color: #fff;\n}<\/code><\/pre>\n\n<p class=\"wp-block-paragraph\">Here the section occupies the entire visible area, both in height and width.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"rem-root-em\">REM (Root EM)<\/h2>\n\n<h3 class=\"wp-block-heading\" id=\"&#x43A;&#x430;&#x43A;&#x432;&#x43E;-&#x43F;&#x440;&#x435;&#x434;&#x441;&#x442;&#x430;&#x432;&#x43B;&#x44F;&#x432;&#x430;-rem\">What is REM?<\/h3>\n\n<p class=\"wp-block-paragraph\"><strong>REM<\/strong> is a relative unit that is based on the font size of the <strong>root<\/strong> element (usually HTML). By default, most browsers have <code>font-size: 16px<\/code> for HTML. <\/p>\n\n<h3 class=\"wp-block-heading\" id=\"&#x43A;&#x43E;&#x433;&#x430;-&#x438;-&#x437;&#x430;&#x449;&#x43E;-&#x434;&#x430;-&#x438;&#x437;&#x43F;&#x43E;&#x43B;&#x437;&#x432;&#x430;&#x43C;&#x435;-rem\">When and why to use REM?<\/h3>\n\n<ol class=\"wp-block-list\">\n<li><strong>Perfect for fonts:<\/strong> with accessibility-oriented design, REM allows the user to change the base font size from their browser settings, and the site adapts automatically.<\/li>\n\n\n\n<li><strong>Less math headaches:<\/strong> <code>2rem<\/code> = 32px (if the base is 16px), <code>1.25rem<\/code> = 20px, etc. Easy to calculate.<\/li>\n\n\n\n<li><strong>Flexibility:<\/strong> if the user prefers a larger font (e.g. 18px instead of 16px), all elements set in REM will be automatically and proportionally enlarged.<\/li>\n<\/ol>\n\n<h3 class=\"wp-block-heading\" id=\"&#x43B;&#x44E;&#x431;&#x43E;&#x43F;&#x438;&#x442;&#x435;&#x43D;-&#x444;&#x430;&#x43A;&#x442;-5\">A curious fact<\/h3>\n\n<p class=\"wp-block-paragraph\">REM was introduced to solve the font size inheritance problem in EM. So instead of being considered against the parent each time, REM always &#8220;looks&#8221; at the document root (HTML), giving greater predictability. <\/p>\n\n<h3 class=\"wp-block-heading\" id=\"&#x43F;&#x440;&#x438;&#x43C;&#x435;&#x440;&#x435;&#x43D;-&#x43A;&#x43E;&#x434;-6\">Sample code<\/h3>\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css line-numbers\">html {\n  font-size: 16px;\n}\nh1 {\n  font-size: 2rem; \/* 32px \u043f\u0440\u0438 \u0431\u0430\u0437\u043e\u0432 \u0440\u0430\u0437\u043c\u0435\u0440 16px *\/\n}\np {\n  font-size: 1rem; \/* 16px \u043f\u0440\u0438 \u0431\u0430\u0437\u043e\u0432 \u0440\u0430\u0437\u043c\u0435\u0440 16px *\/\n}\n<\/code><\/pre>\n\n<p class=\"wp-block-paragraph\">If the user sets their browser to a higher DPI, these values will automatically scale up (or down).<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"em-&#x43E;&#x442;&#x43D;&#x43E;&#x441;&#x438;&#x442;&#x435;&#x43B;&#x43D;&#x43E;-&#x441;&#x43F;&#x440;&#x44F;&#x43C;&#x43E;-&#x440;&#x43E;&#x434;&#x438;&#x442;&#x435;&#x43B;&#x44F;\">EM (Relative to parent)<\/h2>\n\n<h3 class=\"wp-block-heading\" id=\"&#x43A;&#x430;&#x43A;&#x432;&#x43E;-&#x43F;&#x440;&#x435;&#x434;&#x441;&#x442;&#x430;&#x432;&#x43B;&#x44F;&#x432;&#x430;-em\">What is EM?<\/h3>\n\n<p class=\"wp-block-paragraph\"><strong>EM<\/strong> is a relative unit that is based on the font size of the <strong>parent element<\/strong> (not the root, like REM). For example, if the parent has <code>font-size: 20px<\/code>, then <code>1em<\/code> = 20px. <\/p>\n\n<h3 class=\"wp-block-heading\" id=\"&#x43A;&#x43E;&#x433;&#x430;-&#x438;-&#x437;&#x430;&#x449;&#x43E;-&#x434;&#x430;-&#x438;&#x437;&#x43F;&#x43E;&#x43B;&#x437;&#x432;&#x430;&#x43C;&#x435;-em\">When and why to use EM?<\/h3>\n\n<ol class=\"wp-block-list\">\n<li><strong>Line-height:<\/strong> With <code>line-height: 1.5em;<\/code> you automatically get 150% of the current font size. If the font changes to a larger or smaller font, the line-height is adjusted proportionally. <\/li>\n\n\n\n<li><strong>Padding of buttons:<\/strong> If the button has <code>font-size: 1.2rem<\/code>, and you set <code>padding: 0.5em 1em;<\/code>, the spacing will increase and decrease with the text in the button.<\/li>\n\n\n\n<li><strong>Nested Items:<\/strong> It can get confusing if you have many nested containers, each with a different <code>font-size<\/code>. Then calculating the final value of <code>em<\/code> becomes more difficult. <\/li>\n<\/ol>\n\n<h3 class=\"wp-block-heading\" id=\"&#x43B;&#x44E;&#x431;&#x43E;&#x43F;&#x438;&#x442;&#x435;&#x43D;-&#x444;&#x430;&#x43A;&#x442;-7\">A curious fact<\/h3>\n\n<p class=\"wp-block-paragraph\">Historically, <code>em<\/code> comes from typography, where 1 em was roughly equal to the width of the letter &#8220;M&#8221; in a given font. To this day, it retains the idea of &#8220;ratio to font&#8221;, although it is no longer literally associated with a specific letter. <\/p>\n\n<h3 class=\"wp-block-heading\" id=\"&#x43F;&#x440;&#x438;&#x43C;&#x435;&#x440;&#x435;&#x43D;-&#x43A;&#x43E;&#x434;-8\">Sample code<\/h3>\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css line-numbers\">.button {\n  font-size: 1rem; \/* 16px *\/\n  padding: 0.5em 1em; \n}\n.text-block {\n  font-size: 1.125rem; \/* 18px *\/\n  line-height: 1.5em;  \/* 27px *\/\n}<\/code><\/pre>\n\n<p class=\"wp-block-paragraph\">Instead of thinking in pixels, you can set a value that multiplies against the current font.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"media-queries\">Media Queries<\/h2>\n\n<h3 class=\"wp-block-heading\" id=\"&#x43A;&#x430;&#x43A;&#x432;&#x43E;-&#x43F;&#x440;&#x435;&#x434;&#x441;&#x442;&#x430;&#x432;&#x43B;&#x44F;&#x432;&#x430;&#x442;-media-queries\">What are Media Queries?<\/h3>\n\n<p class=\"wp-block-paragraph\"><strong>Media Queries<\/strong> are a mechanism in CSS that allows you to apply different styles depending on the characteristics of the device or browser window (width, height, resolution, orientation, etc.). They are most commonly used to create <strong>responsive designs<\/strong>. <\/p>\n\n<h3 class=\"wp-block-heading\" id=\"&#x43A;&#x430;&#x43A;-&#x438;-&#x437;&#x430;&#x449;&#x43E;-&#x434;&#x430;-&#x433;&#x438;-&#x438;&#x437;&#x43F;&#x43E;&#x43B;&#x437;&#x432;&#x430;&#x43C;&#x435;\">How and why to use them?<\/h3>\n\n<ol class=\"wp-block-list\">\n<li><strong>Adaptive design:<\/strong> you can rearrange or change the style of elements when the window is below or above a certain width.<\/li>\n\n\n\n<li><strong>Mobile optimization:<\/strong> It&#8217;s common to see Media Query enabled at <code>max-width: 768px<\/code>, for example, to style the design for a tablet or phone.<\/li>\n\n\n\n<li><strong>Joint use with units:<\/strong> PXs are often used to set breakpoints:<\/li>\n<\/ol>\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css line-numbers\">@media (max-width: 768px) {\n  .container {\n    width: 100%;\n    margin: 0;\n  }\n}<\/code><\/pre>\n\n<p class=\"wp-block-paragraph\">But you can also use em or rem, for example:<\/p>\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css line-numbers\">@media (max-width: 48em) {\n  \/* 48 * 16px = 768px \u043f\u0440\u0438 \u0431\u0430\u0437\u043e\u0432 \u0440\u0430\u0437\u043c\u0435\u0440 16px *\/\n}<\/code><\/pre>\n\n<h3 class=\"wp-block-heading\" id=\"&#x43B;&#x44E;&#x431;&#x43E;&#x43F;&#x438;&#x442;&#x435;&#x43D;-&#x444;&#x430;&#x43A;&#x442;-9\">A curious fact<\/h3>\n\n<p class=\"wp-block-paragraph\">Using <code>em<\/code> or <code>rem<\/code> in Media Queries allows your design to respond not only to window size, but also to <strong>user font preferences<\/strong>. If the user has increased the base font, the breakpoints will adapt accordingly, which can improve accessibility. <\/p>\n\n<h2 class=\"wp-block-heading\" id=\"&#x43A;&#x430;&#x43A;-&#x434;&#x430;-&#x43F;&#x440;&#x438;&#x43B;&#x430;&#x433;&#x430;&#x43C;&#x435;-&#x432;&#x441;&#x438;&#x447;&#x43A;&#x43E;-&#x442;&#x43E;&#x432;&#x430;-&#x432;&#x44A;&#x432;-word-press\">How to apply all this in WordPress<\/h2>\n\n<ol class=\"wp-block-list\">\n<li><strong>Child Theme:<\/strong> When you want to change the styles of your main WordPress theme, it is always recommended to use a <strong>child theme<\/strong> to avoid losing changes when updating the main theme.<\/li>\n\n\n\n<li><strong>Additional CSS:<\/strong> In <strong>Appearance &gt; Customize &gt; Additional CSS<\/strong>, you can add new code using all the units and Media Queries you&#8217;ve looked at without risking modifying the theme&#8217;s system files.<\/li>\n\n\n\n<li><strong>CSS plugins:<\/strong> plugins like <strong>CSS Hero<\/strong> or <strong>Yellow Pencil<\/strong> offer visual editors that let you select (px, %, em, rem, etc.) without writing CSS manually. They also make it easy to apply Media Queries for a more customized approach. <\/li>\n\n\n\n<li><strong>Work with Page Builders (Elementor, Divi, Avada, etc.):<\/strong>\n<ul class=\"wp-block-list\">\n<li>In <strong>Elementor<\/strong> you can specify dimensions (px, %, em, rem, vh and vw) directly in the UI controls of the widgets. You can also add custom CSS in the Advanced settings section of an individual element. <\/li>\n\n\n\n<li><strong>Divi<\/strong> has built-in customizability settings where you can change styles (including units of measure) for different breakpoints.<\/li>\n\n\n\n<li><strong>Avada<\/strong> and other popular page builders also offer an interface for selecting the unit of measure. This way you don&#8217;t have to write CSS manually, but if you want more control, you can always add custom code and use Media Queries for more specific adjustments. <\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Gutenberg (Block Editor):<\/strong> In newer versions of WordPress you can add CSS classes to each block and then style them in Additional CSS or in your child theme files. This way you have full control over each element. <\/li>\n\n\n\n<li><strong>Plugins for Responsive Design:<\/strong> there are also specific plugins for responsive design that make it easier to implement Media Queries, including templates for different breakpoints.<\/li>\n<\/ol>\n\n<p class=\"wp-block-paragraph\">The choice of method depends on your personal preference and skill level in writing code. If you want visual control &#8211; use Page Builders. If you prefer to manage every detail &#8211; add CSS manually in child theme files or in Additional CSS.  <\/p>\n\n<h3 class=\"wp-block-heading\" id=\"&#x438;&#x437;&#x43F;&#x43E;&#x43B;&#x437;&#x432;&#x430;&#x43D;&#x435;-&#x43D;&#x430;-calc-&#x438;-&#x442;&#x438;&#x43F;&#x43E;&#x433;&#x440;&#x430;&#x444;&#x441;&#x43A;&#x438;-&#x441;&#x43A;&#x430;&#x43B;&#x438;\">Using calc() and typographic scales<\/h3>\n\n<p class=\"wp-block-paragraph\">The CSS function <code>calc()<\/code> allows you to combine different units of measure and set calculations directly in declarations. For example, if you want to mix a fixed value (px) with an adaptive value (% or vw), you can use:<\/p>\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css line-numbers\"><code>.example {\n  font-size: calc(1rem + 2vw);\n}<span style=\"background-color: rgb(40, 44, 52); font-size: 1rem;\"><\/span><\/code><\/code><\/pre>\n\n<p class=\"wp-block-paragraph\">This will make the text slightly larger on wider screens, but keep a minimum base of 1rem. This provides more precise control over layouts as you can find a &#8216;happy medium&#8217; between different approaches.<\/p>\n\n<p class=\"wp-block-paragraph\">When talking about typographic scales, <strong>Major Third<\/strong> (1.25), <strong>Minor Third<\/strong> (1.20), <strong>Perfect Fourth<\/strong> (1.333) and other values are often used to build a harmonious hierarchy between headings, subheadings and paragraphs. With <code>calc()<\/code> you can experiment with different multipliers. For example:<\/p>\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css line-numbers\"><code>h1 {\n  font-size: calc(1rem * 1.333); \/* Perfect Fourth (\u043e\u043a\u043e\u043b\u043e 21.3px \u043f\u0440\u0438 16px \u0431\u0430\u0437\u0430) *\/\n}\nh2 {\n  font-size: calc(1rem * 1.25);  \/* Major Third (20px \u043f\u0440\u0438 16px \u0431\u0430\u0437\u0430) *\/\n}\nh3 {\n  font-size: calc(1rem * 1.2);   \/* Minor Third (19.2px \u043f\u0440\u0438 16px \u0431\u0430\u0437\u0430) *\/\n}<span style=\"background-color: rgb(40, 44, 52); font-size: 1rem;\"><\/span><\/code><\/code><\/pre>\n\n<p class=\"wp-block-paragraph\">This approach allows you to create a more precise, balanced and consistent typographic layout that visually supports the page content and makes it easier to read.<\/p>\n\n<h3 class=\"wp-block-heading\" id=\"&#x438;&#x437;&#x43F;&#x43E;&#x43B;&#x437;&#x432;&#x430;&#x43D;&#x435;-&#x43D;&#x430;-font-size-clamp-&#x437;&#x430;-&#x43E;&#x442;&#x437;&#x438;&#x432;&#x447;&#x438;&#x432;-&#x434;&#x438;&#x437;&#x430;&#x439;&#x43D;-&#x43D;&#x430;-&#x448;&#x440;&#x438;&#x444;&#x442;&#x43E;&#x432;&#x435;&#x442;&#x435;\">Using font-size: clamp() for responsive font design<\/h3>\n\n<p class=\"wp-block-paragraph\">The function  <strong><code>clamp()<\/code><\/strong>  in CSS allows you to set a minimum, preferred (including dynamic) and maximum value of a parameter (most often a font). With its help, you can define &#8220;boundaries&#8221; in which an element resizes smoothly when the window width changes.<\/p>\n\n<pre class=\"wp-block-code\"><code lang=\"css\" class=\"language-css line-numbers\"><code>.responsive-text {\n  font-size: clamp(1rem, 4vw, 2rem);\n}<span style=\"background-color: rgb(40, 44, 52); font-size: 1rem;\"><\/span><\/code><\/code><\/pre>\n\n<ul class=\"wp-block-list\">\n<li><strong>Minimum value (1rem):<\/strong> the font will not be smaller than 1rem, even on very narrow screens.<\/li>\n\n\n\n<li><strong>Preferred value (4vw):<\/strong> Intermediate growth is based on window width (4% of viewport width).<\/li>\n\n\n\n<li><strong>Maximum value (2rem):<\/strong> the font will not exceed 2rem, which prevents excessive bloat on large screens.<\/li>\n<\/ul>\n\n<p class=\"wp-block-paragraph\">Thus  <strong><code>clamp()<\/code><\/strong>  balances between accessibility (readability) and flexible design without the need to write separate Media Queries for each breakpoint. This technique is becoming increasingly popular for creating smooth, customizable typographic layouts, especially when combining different units of measure (px, rem, vw, etc.) and you want to retain control over the final result on different devices.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"&#x432;-&#x437;&#x430;&#x43A;&#x43B;&#x44E;&#x447;&#x435;&#x43D;&#x438;&#x435;\">In conclusion<\/h2>\n\n<p class=\"wp-block-paragraph\">Choosing the right CSS unit (PX, REM, EM, %, VH, VW) and the appropriate Media Queries is key to the optimal look, readability and responsiveness of your WordPress site. Here is a brief summary:<\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>PX<\/strong>: Ideal for static items where you want a 100% identical look.<\/li>\n\n\n\n<li><strong>%<\/strong>: Excellent for fluid layouts and dynamic sizes that depend on the parent container.<\/li>\n\n\n\n<li><strong>VH\/VW<\/strong>: Based on window height and width; ideal for fullscreen sections and creative designs.<\/li>\n\n\n\n<li><strong>REM<\/strong>: Great for fonts and accessibility; always based on size in root (usually 16px).<\/li>\n\n\n\n<li><strong>EM<\/strong>: Powerful at line-height and buttons, but can be &#8220;tricky&#8221; in deep nested elements.<\/li>\n\n\n\n<li><strong>Media Queries<\/strong>: allow you to adapt the design to different widths and devices, ensuring convenience for users on any screen.<\/li>\n<\/ul>\n\n<p class=\"wp-block-paragraph\">When you combine them wisely, you&#8217;ll achieve a professional, responsive, and affordable WordPress design. Experiment boldly and remember that true power comes from understanding the logic behind each unit and Media Query &#8211; that&#8217;s how you&#8217;ll deliver a seamless user experience on every device.<\/p>\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-pixadoro wp-block-embed-pixadoro\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"SIvPO0N7W4\"><a href=\"https:\/\/pixadoro.com\/en\/what-is-webp-and-how-to-speed-up-wordpress-by-reducing-photo-size-by-up-to-35\/\">\u041a\u0430\u043a\u0432\u043e \u0435 WebP \u0438 \u043a\u0430\u043a \u0434\u0430 \u0443\u0441\u043a\u043e\u0440\u0438\u043c WordPress \u043a\u0430\u0442\u043e \u043d\u0430\u043c\u0430\u043b\u0438\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043d\u0430 \u0441\u043d\u0438\u043c\u043a\u0438\u0442\u0435 \u0441 \u0434\u043e 35%<\/a><\/blockquote><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; visibility: hidden;\" title=\"&#8220;\u041a\u0430\u043a\u0432\u043e \u0435 WebP \u0438 \u043a\u0430\u043a \u0434\u0430 \u0443\u0441\u043a\u043e\u0440\u0438\u043c WordPress \u043a\u0430\u0442\u043e \u043d\u0430\u043c\u0430\u043b\u0438\u043c \u0440\u0430\u0437\u043c\u0435\u0440\u0430 \u043d\u0430 \u0441\u043d\u0438\u043c\u043a\u0438\u0442\u0435 \u0441 \u0434\u043e 35%&#8221; &#8212; Pixadoro\" src=\"https:\/\/pixadoro.com\/en\/what-is-webp-and-how-to-speed-up-wordpress-by-reducing-photo-size-by-up-to-35\/embed\/#?secret=K0B9tzAKNS#?secret=SIvPO0N7W4\" data-secret=\"SIvPO0N7W4\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n<figure class=\"wp-block-embed is-type-wp-embed is-provider-pixadoro wp-block-embed-pixadoro\"><div class=\"wp-block-embed__wrapper\">\n<blockquote class=\"wp-embedded-content\" data-secret=\"Q0twcQRxae\"><a href=\"https:\/\/pixadoro.com\/en\/core-web-vitals-important-metrics-for-every-website\/\">Core Web Vitals &#8211; \u0432\u0430\u0436\u043d\u0438 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0438 \u0437\u0430 \u0432\u0441\u0435\u043a\u0438 \u0441\u0430\u0439\u0442<\/a><\/blockquote><iframe class=\"wp-embedded-content\" sandbox=\"allow-scripts\" security=\"restricted\" style=\"position: absolute; visibility: hidden;\" title=\"&#8220;Core Web Vitals &#8211; \u0432\u0430\u0436\u043d\u0438 \u043f\u043e\u043a\u0430\u0437\u0430\u0442\u0435\u043b\u0438 \u0437\u0430 \u0432\u0441\u0435\u043a\u0438 \u0441\u0430\u0439\u0442&#8221; &#8212; Pixadoro\" src=\"https:\/\/pixadoro.com\/en\/core-web-vitals-important-metrics-for-every-website\/embed\/#?secret=Zyl00TRMf6#?secret=Q0twcQRxae\" data-secret=\"Q0twcQRxae\" width=\"600\" height=\"338\" frameborder=\"0\" marginwidth=\"0\" marginheight=\"0\" scrolling=\"no\"><\/iframe>\n<\/div><\/figure>\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>When we build or customize websites with WordPress, we often have to define element sizes, spacing and proportions. These decisions are based on the CSS units of measure, namely PX, REM, EM, %, VH and VW, plus Media Queries that allow different styles at different screen widths. Below, we&#8217;ll take a look at each unit [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":7302,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[43],"tags":[],"class_list":["post-7605","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-en"],"_links":{"self":[{"href":"https:\/\/pixadoro.com\/en\/wp-json\/wp\/v2\/posts\/7605","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pixadoro.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pixadoro.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pixadoro.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pixadoro.com\/en\/wp-json\/wp\/v2\/comments?post=7605"}],"version-history":[{"count":3,"href":"https:\/\/pixadoro.com\/en\/wp-json\/wp\/v2\/posts\/7605\/revisions"}],"predecessor-version":[{"id":8126,"href":"https:\/\/pixadoro.com\/en\/wp-json\/wp\/v2\/posts\/7605\/revisions\/8126"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pixadoro.com\/en\/wp-json\/wp\/v2\/media\/7302"}],"wp:attachment":[{"href":"https:\/\/pixadoro.com\/en\/wp-json\/wp\/v2\/media?parent=7605"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pixadoro.com\/en\/wp-json\/wp\/v2\/categories?post=7605"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pixadoro.com\/en\/wp-json\/wp\/v2\/tags?post=7605"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}