{"id":14638,"date":"2019-06-29T19:08:24","date_gmt":"2019-06-29T17:08:24","guid":{"rendered":"https:\/\/marabelia.com\/?p=14638"},"modified":"2025-06-19T12:46:54","modified_gmt":"2025-06-19T10:46:54","slug":"css-font-size-responsive","status":"publish","type":"post","link":"https:\/\/marabelia.com\/en\/css-font-size-responsive\/","title":{"rendered":"CSS: Font-size responsive"},"content":{"rendered":"
[vc_row][vc_column][vc_column_text]\n

How to Create a Fully Responsive CSS Style?<\/h2>\n

Keep this demo example in mind:<\/h3>\n
\n
\n

.style-x { font-size: calc(1em + 1vw) }<\/code><\/h3>\n<\/div>\n<\/div>\n[\/vc_column_text][vc_column_text]\n

<\/h3>\n

This CSS application is magical<\/h3>\n

By applying these measurement units for proportionality, you will get sizes that respond to the device width and look good on all screens.<\/h3>\n[\/vc_column_text][vc_column_text css=”.vc_custom_1561832731757{padding-top: 6% !important;}”]\"\"<\/em><\/strong>[\/vc_column_text][vc_column_text css=”.vc_custom_1749817382023{padding-top: 6% !important;}”]\n

<\/h2>\n

Why are em<\/em> and vw<\/em> magical units?<\/h2>\n

em<\/code> and vw<\/code> can be used in any CSS property that we need to make responsive.<\/strong> In particular, we should use them to define all the elements\/styles that we want to make adaptable such as margin<\/em> and padding<\/em>, and they will also be very useful for proportionality in height<\/em> and width<\/em> of background images and container boxes with style.<\/p>\n

Next, we will get to know these units well and how to apply them correctly:<\/p>\n[\/vc_column_text][vc_column_text css=”.vc_custom_1750057924571{padding-top: 6% !important;}”]\n

font-size: 12px<\/em><\/del> Enough with pixels already! Let\u2019s be responsive!<\/span><\/h2>\n

Let’s start with responsive<\/em> units of measurement for font-size, margin, padding, etc.<\/em><\/span><\/h3>\n

Pixel (px) units, while a good starting point for working in CSS, are not recommended in a responsive environment (adapting to different screen sizes and devices).<\/p>\n

To work in a responsive environment, we need to use scalable or adaptive proportions (%<\/strong><\/em> and em<\/strong><\/em>) and ideally also apply the new CSS3 viewport units (vh<\/strong><\/em> and vw<\/strong><\/em>), which scale the element according to the screen display properties.<\/p>\n

Let\u2019s take a detailed look at all the CSS scaling properties for elements\u2014fixed proportions, scalable proportions, and proportions relative to the viewport size<\/em>\u2014and how to apply them in our CSS.<\/strong><\/p>\n[\/vc_column_text][vc_column_text css=”.vc_custom_1750057997607{padding-top: 6% !important;}”]\n

<\/h2>\n

1. Fixed Proportions<\/h2>\n

 <\/p>\n


\nPixels (px)<\/span>: <\/strong>Pixels are fixed-size units used for screen media (i.e., for reading on a computer screen).
\n<\/span>
\nA pixel equals one point on the computer screen (the smallest division of your screen\u2019s resolution).<\/span>
\nMany web designers use pixel units in web documents to create a pixel-perfect representation of their site as it appears in the browser.<\/span>
\nOne issue with the pixel unit is that it cannot scale up for visually impaired readers or down to fit mobile devices.<\/span><\/p>\n

 <\/p>\n


\nPoints (pt):<\/strong><\/span> Points are traditionally used in print media (anything printed on paper, etc.).
\n<\/span>
\nOne point equals 1\/72 of an inch.<\/span>
\nPoints are very similar to pixels, as they are also fixed-size units and cannot scale in size.<\/span><\/p>\n[\/vc_column_text][vc_column_text css=”.vc_custom_1750058053297{padding-top: 6% !important;}”]\n

<\/h2>\n

2. Scalable or Adaptive Proportions<\/h2>\n

 <\/p>\n


\nPercentage (%)<\/strong><\/span>: The percentage unit is very similar to the “em” unit, except for some fundamental differences.
\n<\/span>
\nFirst, the current font size is equal to 100% (i.e., 10 points = 100%).<\/span>
\nWhen using the percentage unit, your text remains fully scalable for mobile devices and accessibility.<\/span><\/strong><\/p>\n

 <\/p>\n


\n“Ems” (em):<\/strong><\/span> “em” is a scalable unit used in web document media.
\n<\/span>
\nOne em equals the current font size; for example, if the document\u2019s font size is 16px<\/em>, then 1em<\/em> equals 16px<\/em>.<\/span>
\nems<\/em> are scalable by nature, so 2em<\/em> would equal 32px<\/em>. The em<\/em> unit always depends on its parent element. For instance, if the body element has a font size of 16px<\/em> and a child element has a font size of 1.3em<\/em>, that text will be displayed 30% larger than the body\u2019s text (20.8px<\/em>).<\/span><\/p>\n

 <\/p>\n

One very important thing about the em<\/code> unit is that it always provides values relative to the element\u2019s font-size<\/code>. Therefore, we should apply em<\/code> to properties that need to maintain proportionality with respect to the font-size<\/code> of a specific style.<\/h4>\n[\/vc_column_text][vc_column_text css=”.vc_custom_1750058082005{margin-top: 5% !important;margin-bottom: 5% !important;padding-top: 5% !important;padding-right: 5% !important;padding-bottom: 5% !important;padding-left: 5% !important;background-color: rgba(238,238,34,0.06) !important;*background-color: rgb(238,238,34) !important;border-radius: 35px !important;}”]\n

<\/h4>\n

In other words, we must always keep in mind that properties defined using em<\/code> change according to the font-size<\/code> of the element we are working with.<\/strong><\/h4>\n[\/vc_column_text][vc_column_text css=”.vc_custom_1750058153286{padding-top: 6% !important;}”]\n

Rem (rem)<\/strong><\/span>: The rem<\/em> unit is very similar to em<\/em> (as we just saw), with the only difference being that rem<\/code><\/strong>
\n*is not scalable<\/strong><\/span>\u2014this means it does not depend on the parent element’s size, but rather on the root element of the document, the HTML element. Rem<\/em> is a root-based em<\/em>.<\/p>\n

This means that if the HTML element has a font size of 16px (which is the default), then 1rem equals 16px. And if we want to apply a size based on rem<\/em> to any element on the page, it won\u2019t matter what font size that element has, because 1rem will always equal 16 pixels unless the root element is modified.<\/p>\n

That\u2019s why we\u2019re seeing more and more examples using both em<\/code><\/strong> and rem<\/code><\/strong> simultaneously\u2014even within the same property:<\/p>\n[\/vc_column_text][vc_column_text css=”.vc_custom_1750058193113{margin-top: 5% !important;margin-bottom: 5% !important;padding-top: 5% !important;padding-right: 5% !important;padding-bottom: 5% !important;padding-left: 5% !important;background-color: rgba(238,238,34,0.06) !important;*background-color: rgb(238,238,34) !important;border-radius: 35px !important;}”]\n

<\/h4>\n
    \n
  1. \n

    Use em<\/code> for properties that change with the element\u2019s font-size<\/code><\/strong><\/h4>\n<\/li>\n
  2. \n

    Use rem<\/code> for everything else<\/strong><\/h4>\n<\/li>\n<\/ol>\n

     <\/p>\n


    \n
    \n
    \nTry testing online with a practical example using em<\/em> and rem<\/em> units
    \n<\/a>
    \n<\/span>
    \n<\/span>[\/vc_column_text][vc_column_text css=”.vc_custom_1750058237495{padding-top: 6% !important;}”]\n

    <\/h2>\n

    3. Proportions Relative to the Viewport Size<\/h2>\n

     <\/p>\n

    Viewport units (vh and vw)<\/strong><\/span>:
    \nvh<\/strong><\/em> and vw<\/strong><\/em> are
    \nlength units relative to the viewport<\/strong> (also known as the browser window or graphical screen).<\/p>\n

    With this new CSS3 integration, you can define sizes<\/strong> for
    \nfont-size<\/em> (as well as padding, margin, and element proportions like images)
    \nthat adjust to the width or height of the viewport.<\/strong>
    \n1vh<\/code><\/em><\/strong>
    \n(1 Viewport Height)<\/em> refers to one hundredth of the viewport height, and
    \n1vw<\/code><\/strong><\/em>
    \n(1 Viewport Width)<\/em> refers to one hundredth of the viewport width.<\/p>\n

    Therefore:<\/p>\n

    100vh<\/code><\/strong> = 100% of the screen height<\/p>\n

    100vw<\/code><\/strong> = 100% of the screen width[\/vc_column_text][vc_column_text css=”.vc_custom_1750058328901{margin-top: 5% !important;padding-top: 5% !important;padding-right: 5% !important;padding-bottom: 5% !important;padding-left: 5% !important;background-color: rgba(238,238,34,0.06) !important;*background-color: rgb(238,238,34) !important;border-radius: 35px !important;}”]\n

    In summary, the vw<\/code> value indicates the proportionality of a scalable style such as font-size<\/code> or any other property like padding<\/code> or height<\/code> relative to the screen on which it will be displayed.<\/h4>\n[\/vc_column_text][vc_column_text css=”.vc_custom_1750058369837{padding-top: 6% !important;}”]These units are very useful for:<\/p>\n
      \n
    • Generating large text on big screens and small text on small screens.<\/span><\/li>\n
    • Setting the size of a background image, container frame, or a text box.<\/li>\n<\/ul>\n

      We can test these proportional units and their applications with these two Codepen examples:<\/p>\n

      Example 1 for text:<\/strong><\/em><\/p>\n[codepen_embed height=”265″ theme_id=”0″ slug_hash=”rkhgo” default_tab=”css,result” user=”timseverien”]See the Pen <a href=’https:\/\/codepen.io\/timseverien\/pen\/rkhgo\/’>Viewport units<\/a> by Tim Severien (<a href=’https:\/\/codepen.io\/timseverien’>@timseverien<\/a>) on <a href=’https:\/\/codepen.io’>CodePen<\/a>.[\/codepen_embed]\n

       <\/p>\n

      Example 2 for images:<\/strong><\/em><\/p>\n[codepen_embed height=”265″ theme_id=”0″ slug_hash=”mezEyG” default_tab=”html,result” user=”edwinpgm”]See the Pen <a href=’https:\/\/codepen.io\/edwinpgm\/pen\/mezEyG\/’>Background Size Cover CSS<\/a> by Edwin Gonzales Melquiades (<a href=’https:\/\/codepen.io\/edwinpgm’>@edwinpgm<\/a>) on <a href=’https:\/\/codepen.io’>CodePen<\/a>.[\/codepen_embed][\/vc_column_text][vc_column_text css=”.vc_custom_1750058417719{padding-top: 6% !important;}”]\n

      <\/h2>\n

      4. Proportions Relative to Another Proportion<\/h2>\n

       <\/p>\n

      There are two additional measurement units not yet mentioned: vmin<\/code> and vmax<\/code>, which are linked to the minimum<\/em> and maximum<\/em> of the viewport’s width and height, depending on which is smaller or larger. These units are especially useful for generating square text boxes like:<\/p>\n

      \n

      .box { \u00a0\u00a0\u00a0\u00a0height: 100vmin;
      \nwidth: 100vmin;}<\/code><\/p>\n

      This would cover the full width regardless of the height (it would overflow vertically \u2013 off-screen \u2013 if necessary)<\/p>\n

      .box {\u00a0\u00a0\u00a0\u00a0height: 100vmax;
      \nwidth: 100vmax;}<\/code><\/p>\n<\/div>\n

      This would cover the full height regardless of the screen width (it would overflow horizontally \u2013 off-screen \u2013 if necessary)<\/p>\n

      *I’ve left out a more detailed explanation because its use is more occasional and only applies to very specific cases.<\/em>[\/vc_column_text][vc_column_text css=”.vc_custom_1750058457577{margin-top: 5% !important;margin-bottom: 5% !important;padding-top: 5% !important;padding-right: 5% !important;padding-bottom: 5% !important;padding-left: 5% !important;background-color: rgba(238,238,34,0.06) !important;*background-color: rgb(238,238,34) !important;border-radius: 35px !important;}”]\n

      Conclusions and Practical Example<\/h1>\n

      Understanding everything above, we will see that by creating a style-x<\/em> with the following attributes:<\/p>\n

      .style-x {<\/span>
      \nfont-size: calc(1em + 1vw);<\/span>
      \nline-height: 1em;<\/span>
      \npadding: 1em;<\/span>
      \nmargin: 1em;<\/span>}<\/span>
      \n<\/code><\/p>\n

       <\/p>\n

        \n
      • If we replace the value [1] with the desired proportion (for example, 0.8em<\/em> for a smaller size; or 1.5em<\/em> for a larger size), we can generate a fully controlled responsive text style for responsive versions.<\/li>\n
      • If we want to scale the size according to the width of the viewing device, we will replace the [1] value of vw<\/em> with a higher or lower number, for example 0.5vw<\/em> or 1.8vw<\/em>.<\/li>\n
      • We can also replace the vw<\/em> value with [vh]<\/em> if the reference is the height of the viewing device.<\/li>\n
      • We will replace em<\/em> with rem<\/em> in those variables where we do not want to apply the em<\/em> proportionality of the font-size<\/em>.<\/li>\n<\/ul>\n

        With this, we now have ALL the necessary knowledge to create responsive styles without limits and with their variables fully controlled.<\/p>\n

         <\/p>\n

        If you liked the article, please comment or share. Thank you! \ud83d\ude42<\/strong><\/p>\n[\/vc_column_text][\/vc_column][\/vc_row]\n<\/div>","protected":false},"excerpt":{"rendered":"[vc_row][vc_column][vc_column_text] How to Create a Fully Responsive CSS Style? Keep this demo example in mind: .style-x { font-size: calc(1em + 1vw) } [\/vc_column_text][vc_column_text] This CSS application is magical By applying these measurement units for proportionality, you will get sizes that respond to the device width and look good on all screens. [\/vc_column_text][vc_column_text css=”.vc_custom_1561832731757{padding-top: 6% !important;}”][\/vc_column_text][vc_column_text […]\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[96,89,98],"tags":[],"class_list":["post-14638","post","type-post","status-publish","format-standard","hentry","category-seo","category-web-optimization","category-wordpress-2"],"yoast_head":"\nCSS: Font-size responsive • Marabelia | Agencia Digital en Valencia<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/marabelia.com\/en\/css-font-size-responsive\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS: Font-size responsive • Marabelia | Agencia Digital en Valencia\" \/>\n<meta property=\"og:description\" content=\"[vc_row][vc_column][vc_column_text] How to Create a Fully Responsive CSS Style? Keep this demo example in mind: .style-x { font-size: calc(1em + 1vw) } [\/vc_column_text][vc_column_text] This CSS application is magical By applying these measurement units for proportionality, you will get sizes that respond to the device width and look good on all screens. [\/vc_column_text][vc_column_text css=”.vc_custom_1561832731757{padding-top: 6% !important;}”][\/vc_column_text][vc_column_text [...]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/marabelia.com\/en\/css-font-size-responsive\/\" \/>\n<meta property=\"og:site_name\" content=\"Marabelia | Agencia Digital en Valencia\" \/>\n<meta property=\"article:published_time\" content=\"2019-06-29T17:08:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-19T10:46:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/marabelia.com\/wp-content\/uploads\/2019\/06\/vw-resize.gif\" \/>\n<meta name=\"author\" content=\"admin-mbl\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin-mbl\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/marabelia.com\\\/en\\\/css-font-size-responsive\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/marabelia.com\\\/en\\\/css-font-size-responsive\\\/\"},\"author\":{\"name\":\"admin-mbl\",\"@id\":\"https:\\\/\\\/marabelia.com\\\/#\\\/schema\\\/person\\\/2fe20801a852ce3df5a1a0260364e90c\"},\"headline\":\"CSS: Font-size responsive\",\"datePublished\":\"2019-06-29T17:08:24+00:00\",\"dateModified\":\"2025-06-19T10:46:54+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/marabelia.com\\\/en\\\/css-font-size-responsive\\\/\"},\"wordCount\":1520,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/marabelia.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/marabelia.com\\\/en\\\/css-font-size-responsive\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/marabelia.com\\\/wp-content\\\/uploads\\\/2019\\\/06\\\/vw-resize.gif\",\"articleSection\":[\"SEO\",\"Web optimization\",\"Wordpress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/marabelia.com\\\/en\\\/css-font-size-responsive\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/marabelia.com\\\/en\\\/css-font-size-responsive\\\/\",\"url\":\"https:\\\/\\\/marabelia.com\\\/en\\\/css-font-size-responsive\\\/\",\"name\":\"CSS: Font-size responsive • Marabelia | Agencia Digital en Valencia\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/marabelia.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/marabelia.com\\\/en\\\/css-font-size-responsive\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/marabelia.com\\\/en\\\/css-font-size-responsive\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/marabelia.com\\\/wp-content\\\/uploads\\\/2019\\\/06\\\/vw-resize.gif\",\"datePublished\":\"2019-06-29T17:08:24+00:00\",\"dateModified\":\"2025-06-19T10:46:54+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/marabelia.com\\\/en\\\/css-font-size-responsive\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/marabelia.com\\\/en\\\/css-font-size-responsive\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/marabelia.com\\\/en\\\/css-font-size-responsive\\\/#primaryimage\",\"url\":\"https:\\\/\\\/marabelia.com\\\/wp-content\\\/uploads\\\/2019\\\/06\\\/vw-resize.gif\",\"contentUrl\":\"https:\\\/\\\/marabelia.com\\\/wp-content\\\/uploads\\\/2019\\\/06\\\/vw-resize.gif\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/marabelia.com\\\/en\\\/css-font-size-responsive\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/marabelia.com\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS: Font-size responsive\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/marabelia.com\\\/#website\",\"url\":\"https:\\\/\\\/marabelia.com\\\/\",\"name\":\"MARABELIA. Dise\u00f1o web Valencia. Marketing Digital.\",\"description\":\"Dise\u00f1o web, dise\u00f1o gr\u00e1fico, marketing online y redes sociales.\",\"publisher\":{\"@id\":\"https:\\\/\\\/marabelia.com\\\/#organization\"},\"alternateName\":\"MARABELIA. Dise\u00f1o Web Valencia.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/marabelia.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/marabelia.com\\\/#organization\",\"name\":\"MARABELIA . Dise\u00f1o web Valencia. Marketing Digital.\",\"url\":\"https:\\\/\\\/marabelia.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/marabelia.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/marabelia.com\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/Anagrama-Marabelia.png\",\"contentUrl\":\"https:\\\/\\\/marabelia.com\\\/wp-content\\\/uploads\\\/2025\\\/12\\\/Anagrama-Marabelia.png\",\"width\":1080,\"height\":1080,\"caption\":\"MARABELIA . Dise\u00f1o web Valencia. Marketing Digital.\"},\"image\":{\"@id\":\"https:\\\/\\\/marabelia.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/marabelia.com\\\/#\\\/schema\\\/person\\\/2fe20801a852ce3df5a1a0260364e90c\",\"name\":\"admin-mbl\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/87b0e960b549e14d44b3d54f5f2ed80a37ea4558d15db3d525f1de972501f8b8?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/87b0e960b549e14d44b3d54f5f2ed80a37ea4558d15db3d525f1de972501f8b8?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/87b0e960b549e14d44b3d54f5f2ed80a37ea4558d15db3d525f1de972501f8b8?s=96&d=mm&r=g\",\"caption\":\"admin-mbl\"},\"sameAs\":[\"https:\\\/\\\/marabelia.com\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"CSS: Font-size responsive • Marabelia | Agencia Digital en Valencia","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/marabelia.com\/en\/css-font-size-responsive\/","og_locale":"en_US","og_type":"article","og_title":"CSS: Font-size responsive • Marabelia | Agencia Digital en Valencia","og_description":"[vc_row][vc_column][vc_column_text] How to Create a Fully Responsive CSS Style? Keep this demo example in mind: .style-x { font-size: calc(1em + 1vw) } [\/vc_column_text][vc_column_text] This CSS application is magical By applying these measurement units for proportionality, you will get sizes that respond to the device width and look good on all screens. [\/vc_column_text][vc_column_text css=”.vc_custom_1561832731757{padding-top: 6% !important;}”][\/vc_column_text][vc_column_text [...]","og_url":"https:\/\/marabelia.com\/en\/css-font-size-responsive\/","og_site_name":"Marabelia | Agencia Digital en Valencia","article_published_time":"2019-06-29T17:08:24+00:00","article_modified_time":"2025-06-19T10:46:54+00:00","og_image":[{"url":"https:\/\/marabelia.com\/wp-content\/uploads\/2019\/06\/vw-resize.gif","type":"","width":"","height":""}],"author":"admin-mbl","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin-mbl","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/marabelia.com\/en\/css-font-size-responsive\/#article","isPartOf":{"@id":"https:\/\/marabelia.com\/en\/css-font-size-responsive\/"},"author":{"name":"admin-mbl","@id":"https:\/\/marabelia.com\/#\/schema\/person\/2fe20801a852ce3df5a1a0260364e90c"},"headline":"CSS: Font-size responsive","datePublished":"2019-06-29T17:08:24+00:00","dateModified":"2025-06-19T10:46:54+00:00","mainEntityOfPage":{"@id":"https:\/\/marabelia.com\/en\/css-font-size-responsive\/"},"wordCount":1520,"commentCount":0,"publisher":{"@id":"https:\/\/marabelia.com\/#organization"},"image":{"@id":"https:\/\/marabelia.com\/en\/css-font-size-responsive\/#primaryimage"},"thumbnailUrl":"https:\/\/marabelia.com\/wp-content\/uploads\/2019\/06\/vw-resize.gif","articleSection":["SEO","Web optimization","Wordpress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/marabelia.com\/en\/css-font-size-responsive\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/marabelia.com\/en\/css-font-size-responsive\/","url":"https:\/\/marabelia.com\/en\/css-font-size-responsive\/","name":"CSS: Font-size responsive • Marabelia | Agencia Digital en Valencia","isPartOf":{"@id":"https:\/\/marabelia.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/marabelia.com\/en\/css-font-size-responsive\/#primaryimage"},"image":{"@id":"https:\/\/marabelia.com\/en\/css-font-size-responsive\/#primaryimage"},"thumbnailUrl":"https:\/\/marabelia.com\/wp-content\/uploads\/2019\/06\/vw-resize.gif","datePublished":"2019-06-29T17:08:24+00:00","dateModified":"2025-06-19T10:46:54+00:00","breadcrumb":{"@id":"https:\/\/marabelia.com\/en\/css-font-size-responsive\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/marabelia.com\/en\/css-font-size-responsive\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/marabelia.com\/en\/css-font-size-responsive\/#primaryimage","url":"https:\/\/marabelia.com\/wp-content\/uploads\/2019\/06\/vw-resize.gif","contentUrl":"https:\/\/marabelia.com\/wp-content\/uploads\/2019\/06\/vw-resize.gif"},{"@type":"BreadcrumbList","@id":"https:\/\/marabelia.com\/en\/css-font-size-responsive\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/marabelia.com\/en\/"},{"@type":"ListItem","position":2,"name":"CSS: Font-size responsive"}]},{"@type":"WebSite","@id":"https:\/\/marabelia.com\/#website","url":"https:\/\/marabelia.com\/","name":"MARABELIA. Dise\u00f1o web Valencia. Marketing Digital.","description":"Dise\u00f1o web, dise\u00f1o gr\u00e1fico, marketing online y redes sociales.","publisher":{"@id":"https:\/\/marabelia.com\/#organization"},"alternateName":"MARABELIA. Dise\u00f1o Web Valencia.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/marabelia.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/marabelia.com\/#organization","name":"MARABELIA . Dise\u00f1o web Valencia. Marketing Digital.","url":"https:\/\/marabelia.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/marabelia.com\/#\/schema\/logo\/image\/","url":"https:\/\/marabelia.com\/wp-content\/uploads\/2025\/12\/Anagrama-Marabelia.png","contentUrl":"https:\/\/marabelia.com\/wp-content\/uploads\/2025\/12\/Anagrama-Marabelia.png","width":1080,"height":1080,"caption":"MARABELIA . Dise\u00f1o web Valencia. Marketing Digital."},"image":{"@id":"https:\/\/marabelia.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/marabelia.com\/#\/schema\/person\/2fe20801a852ce3df5a1a0260364e90c","name":"admin-mbl","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/87b0e960b549e14d44b3d54f5f2ed80a37ea4558d15db3d525f1de972501f8b8?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/87b0e960b549e14d44b3d54f5f2ed80a37ea4558d15db3d525f1de972501f8b8?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/87b0e960b549e14d44b3d54f5f2ed80a37ea4558d15db3d525f1de972501f8b8?s=96&d=mm&r=g","caption":"admin-mbl"},"sameAs":["https:\/\/marabelia.com"]}]}},"_links":{"self":[{"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/posts\/14638","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/comments?post=14638"}],"version-history":[{"count":2,"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/posts\/14638\/revisions"}],"predecessor-version":[{"id":14640,"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/posts\/14638\/revisions\/14640"}],"wp:attachment":[{"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/media?parent=14638"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/categories?post=14638"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/marabelia.com\/en\/wp-json\/wp\/v2\/tags?post=14638"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}