{"id":14726,"date":"2020-08-21T19:42:42","date_gmt":"2020-08-22T02:42:42","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=14726"},"modified":"2023-12-01T03:58:39","modified_gmt":"2023-12-01T11:58:39","slug":"css-font-size","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/css-font-size\/","title":{"rendered":"CSS Font-Size: A Tutorial on Text Sizing in CSS"},"content":{"rendered":"\n<p><em>The CSS font-size property sets the font size of any text element on your page or website. The font-size property can be applied to any class, ID, or element that includes text content. The property accepts values in px, em, rem, vw, vh, and using keywords.<\/em><\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>Most developers use a combination of different font sizes to style a web page. For instance, a web developer may use a large font for headings, and a smaller font for body text and others. So many ask: how do you change the font size in CSS or HTML?<\/p>\n\n\n\n<p>The <a href=\"https:\/\/careerkarma.com\/blog\/what-is-css\/\">CSS<\/a> <code>font-size<\/code> property allows developers to set the font size in a paragraph or line of text on a web page.<\/p>\n\n\n\n<p>This tutorial discusses, with reference to examples, how to use the <code>font-size<\/code> property. Going through this guide allows you to be an expert at changing text sizes.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">CSS <code>font-Size<\/code><\/h2>\n\n\n\n<p>Appropriate font styling is an important part of web design. Unstyled text causes reading difficulty among visitors, which almost certainly results in an unpleasant website experience.<\/p>\n\n\n\n<p>There are many CSS styles for fonts that can be used to customize how text appears, like<a href=\"https:\/\/careerkarma.com\/blog\/css-font-weight\/\"> font-weight<\/a>,<a href=\"https:\/\/careerkarma.com\/blog\/css-font-family\/\"> font-family<\/a>,<a href=\"https:\/\/careerkarma.com\/blog\/css-text-decoration\/\"> text-decoration<\/a>, and<a href=\"https:\/\/careerkarma.com\/blog\/html-text-color\/\"> color<\/a>. Another important property is font-size, which controls the size of a font in a block of text.<\/p>\n\n\n\n<p>The syntax for the CSS <code>font-size<\/code> property is:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>font-size: sizeValue;<\/pre><\/div>\n\n\n\n<p><code>sizeValue<\/code> is the font size you want a block of text to use. There are a number of ways to specify the font size used by a block of text. The methods we are going to discuss in this article are:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>pixels<\/li><li>em<\/li><li>root em<\/li><li>viewport units<\/li><li>keywords<\/li><\/ul>\n\n\n\n<p>Let us explore an example of how to use each font size approach on a web page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Set Font Size Using Pixels<\/h3>\n\n\n\n<p>One of the most common ways to set the size of a font is to use pixels.<\/p>\n\n\n\n<p>Pixels are a good unit of measurement because they allow you to be precise. The pixel unit is largely unaffected by operating systems or web browsers. A pixel on one screen is a pixel on another. The pixel value you specify will roughly appear the same way across different browsers.<\/p>\n\n\n\n<p>However, using pixels to set the size of a font in a block of text does have one limitation: accessibility. Font sizes defined using pixels are not accessible because some browsers do not allow users to customize the font size. Visually impaired users, for example, may struggle to use a site that uses pixels to define font sizes.<\/p>\n\n\n\n<p>Let&#8217;s say we&#8217;re creating a website with a font size of <code>28px<\/code> for all <code>&lt;h1&gt;<\/code> elements and <code>12px<\/code> for all <code>&lt;p&gt;<\/code> elements. We could use the following code to accomplish this task:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>h1 { font-size: 28px; }\np ( font-size: 12px; }<\/pre><\/div>\n\n\n\n<p>In our code, we have used a <a href=\"https:\/\/careerkarma.com\/blog\/css-selectors\/\">CSS selector<\/a> set the font size of all <code>&lt;h1&gt;<\/code> elements to <code>28px<\/code> and all <code>&lt;p&gt;<\/code> elements to <code>12px<\/code>. The following snippet shows how these elements appear with our new font sizes: <\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;style&gt;\n  h1 { font-size: 28px; }\n  p { font-size: 12px; }\n&lt;\/style&gt;\n\n&lt;html&gt;\n  &lt;h1&gt;This is a heading.&lt;\/h1&gt;\n  &lt;p&gt;This is a paragraph of text.&lt;\/p&gt;\n&lt;\/html&gt;<\/pre><\/div>\n\n\n\n<p><em>Click the <img loading=\"lazy\" decoding=\"async\" width=\"24\" height=\"24\" class=\"wp-image-13930\" style=\"width: 24px;\" src=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png\" alt=\"Image of the &quot;Run Code&quot; Button, a triangle inside a circle\" srcset=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png 24w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584-20x20.png 20w\" sizes=\"auto, (max-width: 24px) 100vw, 24px\" \/> button in top-right corner of the window above to run the code.<\/em><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Set Font Size Using ems<\/h3>\n\n\n\n<p>Another common way of setting the size of a font in CSS is to use em sizes. The em unit of measurement refers to the font size of a parent element. If you set a font\u2019s size to <code>2em<\/code>, the font size will be twice that of the parent element.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">An Example of CSS Font Sizing with ems<\/h4>\n\n\n\n<p>For example, suppose you have a paragraph of text stored in a box. The font size of the box is <code>20px<\/code>. If you specified the font size of the paragraph of text to be <code>1em<\/code>, the font size of the paragraph would be <code>20px<\/code>. This is the same as the parent element&#8217;s font size.<\/p>\n\n\n\n<p>If you have not set a font size for a parent element, the browser will use the default value specified for that browser. This is usually <code>16px<\/code>. As a result, if you have not specified any font sizes, <code>1em<\/code> is by default <code>16px<\/code>, <code>2em<\/code> is by default <code>32px<\/code>.<\/p>\n\n\n\n<p>Suppose the font size of our web page is <code>16px<\/code>. We want all paragraphs of text to appear using that font size, which means we should use the value <code>1em<\/code>. Also, we want all of our headings to appear with a font size of <code>24px<\/code>, which is equal to <code>1.5em<\/code>. <\/p>\n\n\n\n<p>We could use the following code to accomplish this task:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>p { font-size: 1em; }\nh1 { font-size: 1.5em; }<\/pre><\/div>\n\n\n\n<p>In our code, the size of all paragraphs will be <code>16px<\/code> (<code>1em<\/code> = <code>16px<\/code> by default), and all <code>&lt;h1&gt;<\/code> elements will be <code>24px<\/code> (<code>1.5em<\/code> = <code>24px<\/code>). <\/p>\n\n\n\n<p>Here is how our text would appear on the web page:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;style&gt;\n  p { font-size: 1em; }\n  h1 { font-size: 1.5em; }\n&lt;\/style&gt;\n\n&lt;html&gt;\n  &lt;h1&gt;This is a heading.&lt;\/h1&gt;\n  &lt;p&gt;This is a paragraph of text.&lt;\/p&gt;\n&lt;\/html&gt;<\/pre><\/div>\n\n\n\n<p>In the above example, you can see the new styles for both our <code>&lt;h1&gt;<\/code> and <code>&lt;p&gt;<\/code> elements.<\/p>\n\n\n\n<p>You should note that if our <code>&lt;h1&gt;<\/code> appeared within a box which had another font size, the size of our <code>&lt;h1&gt;<\/code> would change. This is because em values inherit the font size of their parents.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Set Font Size Using Root em<\/h3>\n\n\n\n<p>Short for root em, <code>rem<\/code> is a new unit of measurement introduced in CSS3 that can be used to set font size. Values using <code>rem<\/code> are relative to the root <code>&lt;html&gt;<\/code> element, instead of the parent element.<\/p>\n\n\n\n<p><code>rem<\/code> values are useful because they allow you to specify a value relative to the entire document. This way, the size of your text won&#8217;t be affected if the parent element has a different em value.<\/p>\n\n\n\n<p>Suppose we have a web page with the default font size of <code>16px<\/code>. Like in our previous example, we want all <code>&lt;h1&gt;<\/code>s to appear in <code>24px<\/code> and all paragraphs to appear in <code>16px<\/code>. We could set these font sizes using the following code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;style&gt;\n  p { font-size: 1rem; }\n  h1 { font-size: 1.5rem; }\n&lt;\/style&gt;\n\n&lt;html&gt;\n  &lt;h1&gt;This is a heading.&lt;\/h1&gt;\n  &lt;p&gt;This is a paragraph of text.&lt;\/p&gt;\n&lt;\/html&gt;<\/pre><\/div>\n\n\n\n<p>Our code is almost the same as in our previous example. The only difference is that the unit of measurement we use is <code>rem<\/code> instead of <code>em<\/code>. In this example, our font sizes will still be <code>24px<\/code> and <code>16px<\/code> for the top-level headings and paragraphs, respectively. That&#8217;s because the default font size of our web page is <code>16px<\/code>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Set Font Size Using Keywords<\/h2>\n\n\n\n<p>There are two types of keywords you can use to set the size of a font in CSS.<\/p>\n\n\n\n<p>Absolute keywords are used to set a font size that remains the same, irrespective of changes to the web page. The keywords you can use to set an absolute font size are as follows:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><code>xx-small<\/code> (9px)<\/li><li><code>x-small<\/code> (10px)<\/li><li><code>small<\/code> (13px)<\/li><li><code>medium<\/code> (16px)<\/li><li><code>large<\/code> (18px)<\/li><li><code>x-large<\/code> (24px)<\/li><li><code>xx-large<\/code> (32px)<\/li><\/ul>\n\n\n\n<p>The values specified in parentheses are based on a browser whose default font size is <code>16px<\/code>.<\/p>\n\n\n\n<p>Relative keywords, on the other hand, set a font size that will change depending on the font sizing elsewhere on the web page. The relative keywords you can use are: smaller and larger. These keywords are useful because they allow you to change the size of your fonts as other font sizes on the page change.<\/p>\n\n\n\n<p>Suppose we wanted to set the size of all <code>&lt;h2&gt;<\/code> elements on a page to <code>24px<\/code> (x-large) and all <code>&lt;h3&gt;<\/code> elements to <code>18px<\/code> (large). We could do so using this code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;style&gt;\n  h2 { font-size: x-large; }\n  h3 { font-size: large; }\n&lt;\/style&gt;\n\n&lt;html&gt;\n  &lt;h2&gt;This is a heading.&lt;\/h2&gt;\n  &lt;p&gt;This is some paragraph text.&lt;\/p&gt;\n  &lt;h3&gt;This is a lower-level heading.&lt;\/h3&gt;\n  &lt;p&gt;This is some more paragraph text.&lt;\/p&gt;\n&lt;\/html&gt;<\/pre><\/div>\n\n\n\n<p><em>Click the&nbsp;<\/em><img loading=\"lazy\" decoding=\"async\" width=\"24\" height=\"24\" class=\"wp-image-13930\" style=\"width: 24px;\" src=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png\" alt=\"Image of the &quot;Run Code&quot; Button, a triangle inside a circle\" srcset=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png 24w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584-20x20.png 20w\" sizes=\"auto, (max-width: 24px) 100vw, 24px\" \/> <em>button in the code editor above to see the output of our HTML\/CSS code.<\/em><\/p>\n\n\n\n<p>The font sizes for our <code>&lt;h2&gt;<\/code> and <code>&lt;h3&gt;<\/code> tags are <code>24px<\/code> and <code>18px<\/code>, respectively. However, we did not specify these sizes using pixels. Instead, we used the default font size keywords offered by the browser.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Set Font Size Using Viewport Units<\/h2>\n\n\n\n<p>Viewport units are calculated as a percentage of the browser\u2019s viewport size. The two viewport units supported by CSS are: view height (<code>vh<\/code>) and view width (<code>vw<\/code>).<\/p>\n\n\n\n<p>Because viewport units are a percentage of the browser\u2019s viewport size, <code>1vh<\/code> is equal to 1% of the viewport height, for example. So, if you have a viewport 1000px wide, <code>1vh<\/code> equals 10px.<\/p>\n\n\n\n<p>Using viewport units is useful because the size of your fonts will change as you resize the browser window. This, in turn, allows you to deliver a more accessible user experience adaptive to different browser and device sizes.<\/p>\n\n\n\n<p>Suppose we wanted to create a site whose headers are 4% of the viewport\u2019s width and whose paragraphs are 1% of the viewport\u2019s width. We could do so using this code:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre>&lt;style&gt;\n  p { font-size: 1vw; }\n  h1 { font-size: 4vw; }\n&lt;\/style&gt;\n\n&lt;html&gt;\n  &lt;h1&gt;This is a heading.&lt;\/h1&gt;\n  &lt;p&gt;This is a paragraph of text.&lt;\/p&gt;\n&lt;\/html&gt;<\/pre><\/div>\n\n\n\n<p><em>Click the&nbsp; <\/em><img loading=\"lazy\" decoding=\"async\" width=\"24\" height=\"24\" class=\"wp-image-13930\" style=\"width: 24px;\" src=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png\" alt=\"Image of the &quot;Run Code&quot; Button, a triangle inside a circle\" srcset=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584.png 24w, https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/03\/iconfinder_play-circle-outline_326584-20x20.png 20w\" sizes=\"auto, (max-width: 24px) 100vw, 24px\" \/> <em>button in the code editor above to see the output of our HTML\/CSS code.<\/em><\/p>\n\n\n\n<p>If you resize the browser, the size of these headings will change.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>The font-size property is used in CSS (and therefore HTML) to change the size of fonts. It accepts a number of units of measurement in which font sizes can be displayed, including pixels, em, rem, keywords, and viewport units. It can be applied to <a href=\"https:\/\/careerkarma.com\/blog\/css-class-vs-id-2\/\">CSS classes and IDs<\/a>, as well as to elements themselves.<\/p>\n\n\n\n<p>This tutorial walked through the basics of CSS font size. Now you are ready to start using the font-size attribute like an expert.<\/p>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n","protected":false},"excerpt":{"rendered":"The CSS font-size property sets the font size of any text element on your page or website. The font-size property can be applied to any class, ID, or element that includes text content. The property accepts values in px, em, rem, vw, vh, and using keywords. Most developers use a combination of different font sizes&hellip;","protected":false},"author":240,"featured_media":15124,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17287],"tags":[],"class_list":{"0":"post-14726","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-css"},"acf":{"post_sub_title":"","sprint_id":"","query_class":"CSS","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>CSS Font-Size: A Tutorial on Text Sizing in CSS | Career Karma<\/title>\n<meta name=\"description\" content=\"The CSS font-size property allows developers to set the size of text on a web page. On Career Karma, learn how to use the font-size property.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/css-font-size\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS Font-Size: A Tutorial on Text Sizing in CSS\" \/>\n<meta property=\"og:description\" content=\"The CSS font-size property allows developers to set the size of text on a web page. On Career Karma, learn how to use the font-size property.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/css-font-size\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2020-08-22T02:42:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-01T11:58:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/css-font-size.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"675\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"James Gallagher\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"James Gallagher\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-font-size\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-font-size\\\/\"},\"author\":{\"name\":\"James Gallagher\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\"},\"headline\":\"CSS Font-Size: A Tutorial on Text Sizing in CSS\",\"datePublished\":\"2020-08-22T02:42:42+00:00\",\"dateModified\":\"2023-12-01T11:58:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-font-size\\\/\"},\"wordCount\":1407,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-font-size\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/css-font-size.jpg\",\"articleSection\":[\"CSS\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-font-size\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-font-size\\\/\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-font-size\\\/\",\"name\":\"CSS Font-Size: A Tutorial on Text Sizing in CSS | Career Karma\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-font-size\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-font-size\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/css-font-size.jpg\",\"datePublished\":\"2020-08-22T02:42:42+00:00\",\"dateModified\":\"2023-12-01T11:58:39+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\"},\"description\":\"The CSS font-size property allows developers to set the size of text on a web page. On Career Karma, learn how to use the font-size property.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-font-size\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-font-size\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-font-size\\\/#primaryimage\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/css-font-size.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/04\\\/css-font-size.jpg\",\"width\":1200,\"height\":675,\"caption\":\"CSS Font Size cover image, with text in different font sizes\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css-font-size\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/css\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"CSS Font-Size: A Tutorial on Text Sizing in CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/e79364792443fbff794a144c67ec8e94\",\"name\":\"James Gallagher\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/james-gallagher-150x150.jpg\",\"caption\":\"James Gallagher\"},\"description\":\"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/author\\\/jamesgallagher\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS Font-Size: A Tutorial on Text Sizing in CSS | Career Karma","description":"The CSS font-size property allows developers to set the size of text on a web page. On Career Karma, learn how to use the font-size property.","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:\/\/careerkarma.com\/blog\/css-font-size\/","og_locale":"en_US","og_type":"article","og_title":"CSS Font-Size: A Tutorial on Text Sizing in CSS","og_description":"The CSS font-size property allows developers to set the size of text on a web page. On Career Karma, learn how to use the font-size property.","og_url":"https:\/\/careerkarma.com\/blog\/css-font-size\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2020-08-22T02:42:42+00:00","article_modified_time":"2023-12-01T11:58:39+00:00","og_image":[{"width":1200,"height":675,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/css-font-size.jpg","type":"image\/jpeg"}],"author":"James Gallagher","twitter_card":"summary_large_image","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"James Gallagher","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/css-font-size\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/css-font-size\/"},"author":{"name":"James Gallagher","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"headline":"CSS Font-Size: A Tutorial on Text Sizing in CSS","datePublished":"2020-08-22T02:42:42+00:00","dateModified":"2023-12-01T11:58:39+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-font-size\/"},"wordCount":1407,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-font-size\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/css-font-size.jpg","articleSection":["CSS"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/css-font-size\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/careerkarma.com\/blog\/css-font-size\/","url":"https:\/\/careerkarma.com\/blog\/css-font-size\/","name":"CSS Font-Size: A Tutorial on Text Sizing in CSS | Career Karma","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/css-font-size\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/css-font-size\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/css-font-size.jpg","datePublished":"2020-08-22T02:42:42+00:00","dateModified":"2023-12-01T11:58:39+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94"},"description":"The CSS font-size property allows developers to set the size of text on a web page. On Career Karma, learn how to use the font-size property.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/css-font-size\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/css-font-size\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/css-font-size\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/css-font-size.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/04\/css-font-size.jpg","width":1200,"height":675,"caption":"CSS Font Size cover image, with text in different font sizes"},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/css-font-size\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS","item":"https:\/\/careerkarma.com\/blog\/css\/"},{"@type":"ListItem","position":3,"name":"CSS Font-Size: A Tutorial on Text Sizing in CSS"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/e79364792443fbff794a144c67ec8e94","name":"James Gallagher","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2020\/01\/james-gallagher-150x150.jpg","caption":"James Gallagher"},"description":"James Gallagher is a self-taught programmer and the technical content manager at Career Karma. He has experience in range of programming languages and extensive expertise in Python, HTML, CSS, and JavaScript. James has written hundreds of programming tutorials, and he frequently contributes to publications like Codecademy, Treehouse, Repl.it, Afrotech, and others.","url":"https:\/\/careerkarma.com\/blog\/author\/jamesgallagher\/"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/14726","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/240"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=14726"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/14726\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/15124"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=14726"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=14726"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=14726"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}