{"id":21545,"date":"2013-05-06T08:21:57","date_gmt":"2013-05-06T15:21:57","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=21545"},"modified":"2015-05-20T12:16:23","modified_gmt":"2015-05-20T19:16:23","slug":"font-size","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-size\/","title":{"rendered":"font-size"},"content":{"rendered":"<p>The <code>font-size<\/code> property specifies the size, or height, of the font. <code>font-size<\/code> affects not only the font to which it is applied, but is also used to compute the value of em, rem, and ex length units.<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">p {\r\n  font-size: 20px;\r\n}<\/code><\/pre>\n<p><code>font-size<\/code> can accept keywords, length units, or percentages as values. It\u2019s important to note however that when it\u2019s declared as part of the <code><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/f\/font\">font<\/a><\/code> shorthand property, <code>font-size<\/code> is a mandatory value. If it is not included in the shorthand, the entire line is ignored.<\/p>\n<p><a href=\"https:\/\/css-tricks.com\/the-lengths-of-css\">Length values<\/a> (e.g. px, em, rem, ex, etc) which are applied to <code>font-size<\/code> cannot be negative.<\/p>\n<h3>Absolute keywords and values<\/h3>\n<pre rel=\"CSS\"><code class=\"language-css\">.element {\r\n  font-size: small;\r\n}<\/code><\/pre>\n<p>It accepts the following absolute keyword values:<\/p>\n<ul>\n<li><code>xx-small<\/code><\/li>\n<li><code>x-small<\/code><\/li>\n<li><code>small<\/code><\/li>\n<li><code>medium<\/code><\/li>\n<li><code>large<\/code><\/li>\n<li><code>x-large<\/code><\/li>\n<li><code>xx-large<\/code><\/li>\n<\/ul>\n<p>These absolute values are mapped to specific font sizes as computed by the browser. But you may also use two keyword values which are relative to the font size of the parent element.<\/p>\n<p>Other absolute values include <code>mm<\/code> (millimeters), <code>cm<\/code> (centimeters), <code>in<\/code> (inches), <code>pt<\/code> (points) and <code>pc<\/code> (picas). One point is equal to 1\/72 of an inch whilst one pica is equal to 12 points \u2014 these values are typically used for printed documents.<\/p>\n<h3>Relative keywords<\/h3>\n<pre><code class=\"css\">.element {\r\n  font-size: larger;\r\n}<\/code><\/pre>\n<ul>\n<li><code>larger<\/code><\/li>\n<li><code>smaller<\/code><\/li>\n<\/ul>\n<p>For example, if the parent element has a font size of <code>small<\/code>, a child element with a defined relative size of <code>larger<\/code> will make the font size equal to <code>medium<\/code> for the child element. <\/p>\n<h3>Percentage values<\/h3>\n<pre rel=\"CSS\"><code class=\"language-css\">.element {\r\n  font-size: 110%;\r\n}<\/code><\/pre>\n<p>Percentage values, such as setting a font-size of 110%, are also relative to the parent element\u2019s font size as shown in the demo below:<\/p>\n<p data-height=\"400\" style=\"height: 400px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"qdbELL\" data-default-tab=\"result\" data-user=\"css-tricks\" class='codepen'>See the Pen <a href=\"http:\/\/codepen.io\/team\/css-tricks\/pen\/qdbELL\/\" rel=\"noopener\">qdbELL<\/a> by CSS-Tricks (<a href=\"http:\/\/codepen.io\/css-tricks\" rel=\"noopener\">@css-tricks<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<h3>The em unit<\/h3>\n<pre rel=\"CSS\"><code class=\"language-css\">.element {\r\n  font-size: 2em;\r\n}<\/code><\/pre>\n<p>The em unit is a relative unit based on the computed value of the font size of the parent element. This means that child elements are always dependent on their parent to set their font-size. For example:<\/p>\n<pre><code class=\"html\">&lt;div class=\"container\"&gt;\r\n  &lt;h2&gt;This is a heading&lt;\/h2&gt;\r\n  &lt;p&gt;This is some text.&lt;\/p&gt;\r\n&lt;\/div&gt;<\/code><\/pre>\n<pre rel=\"CSS\"><code class=\"language-css\">.container {\r\n  font-size: 16px;\r\n}\r\n\r\np {\r\n  font-size: 1em;\r\n}\r\n\r\nh2 {\r\n  font-size: 2em;\r\n}<\/code><\/pre>\n<p>In the example above, the paragraph will have a font-size of 16px because 1 x 16 = 16px whereas the heading will be 32px because 2 x 16 = 32px. There are many advantages to scaling type up depending on the font-size of the parent element, namely we can wrap elements within a container and know that all of the children will always be relative to one another:<\/p>\n<p data-height=\"500\" style=\"height: 500px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"a4b0f03f3fccdb8534cc6a3df6cf97ec\" data-default-tab=\"result\" data-user=\"css-tricks\" class='codepen'>See the Pen <a href=\"http:\/\/codepen.io\/team\/css-tricks\/pen\/a4b0f03f3fccdb8534cc6a3df6cf97ec\/\" rel=\"noopener\">Figuring out how the em unit works<\/a> by CSS-Tricks (<a href=\"http:\/\/codepen.io\/css-tricks\" rel=\"noopener\">@css-tricks<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<h3>The rem unit<\/h3>\n<p>In the case of rem units, however, the font-size is dependent on the value of the root element (or the <code>html<\/code> element).<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">html {\r\n  font-size: 16px;\r\n}\r\n\r\np {\r\n  font-size: 1.5rem;\r\n}<\/code><\/pre>\n<p>In the above example, the rem unit is equal to 16px (because it is inherited from the <code>html<\/code>\/root element) and thus the font size for all paragraph elements will compute to 24px (1.5 x 16 = 24). Unlike em units, the paragraph will ignore the styling of all its parents besides the root.<\/p>\n<p>This unit is supported by the following browsers:<\/p>\n<table class=\"browser-support-table\">\n<thead>\n<tr>\n<th class=\"chrome\"><span>Chrome<\/span><\/th>\n<th class=\"safari\"><span>Safari<\/span><\/th>\n<th class=\"firefox\"><span>Firefox<\/span><\/th>\n<th class=\"opera\"><span>Opera<\/span><\/th>\n<th class=\"ie\"><span>IE<\/span><\/th>\n<th class=\"android\"><span>Android<\/span><\/th>\n<th class=\"iOS\"><span>iOS<\/span><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td class=\"yep\">Works<\/td>\n<td class=\"yep\">Works<\/td>\n<td class=\"yep\">Works<\/td>\n<td class=\"yep\">Works<\/td>\n<td class=\"yep\">10+<\/td>\n<td class=\"yep\">Works<\/td>\n<td class=\"yep\">Works<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>The ex unit<\/h3>\n<pre rel=\"CSS\"><code class=\"language-css\">.element {\r\n  font-size: 20ex;\r\n}<\/code><\/pre>\n<p>For ex units, 1ex would be equal to the computed height of the lowercase letter x of the root element. So in the example below the <code>html<\/code> element is set to <code>20px<\/code> and all the other font-sizes are determined by the x-height of that particular font. <\/p>\n<p data-height=\"500\" style=\"height: 500px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"b5828954f782d071b1ee58807fe4cd74\" data-default-tab=\"result\" data-user=\"css-tricks\" class='codepen'>See the Pen <a href=\"http:\/\/codepen.io\/team\/css-tricks\/pen\/b5828954f782d071b1ee58807fe4cd74\/\" rel=\"noopener\">Figuring out how the ex unit works<\/a> by CSS-Tricks (<a href=\"http:\/\/codepen.io\/css-tricks\" rel=\"noopener\">@css-tricks<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>Experiment with the demo above my replacing the <code>font-family<\/code> on the <code>html<\/code> element to see how the other font-sizes change. <\/p>\n<h3>Viewport units<\/h3>\n<pre rel=\"CSS\"><code class=\"language-css\">.element-one {\r\n  font-size: 100vh;\r\n}\r\n\r\n.element-two {\r\n  font-size: 100vw;\r\n}<\/code><\/pre>\n<p>Viewport units, such as <code>vw<\/code> and <code>vh<\/code>, set the font-size of an element relative to the dimensions of the viewport: <\/p>\n<ul>\n<li>1vw = 1% of viewport width<\/li>\n<li>1vh = 1% of viewport height<\/li>\n<\/ul>\n<p>So if we take the following example:<\/p>\n<pre rel=\"CSS\"><code class=\"language-css\">.element {\r\n  font-size: 100vh;\r\n}<\/code><\/pre>\n<p>Then this will state that the font-size of the element should always be 100% of the height of the viewport at all times (50vh would be 50%, 15vh would be 15% and so on). In the demo below try resizing the height of the example to watch the type stretch:<\/p>\n<p data-height=\"500\" style=\"height: 500px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"6e288ced34cef76986155f4a1278df6a\" data-default-tab=\"result\" data-user=\"css-tricks\" class='codepen'>See the Pen <a href=\"http:\/\/codepen.io\/team\/css-tricks\/pen\/6e288ced34cef76986155f4a1278df6a\/\" rel=\"noopener\">Sizing type with vh units<\/a> by CSS-Tricks (<a href=\"http:\/\/codepen.io\/css-tricks\" rel=\"noopener\">@css-tricks<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p><code>vw<\/code> units are different in that it sets the height of the letterforms by the width of the viewport, so in the demo below you\u2019ll need to resize the browser window horizontally to see these changes:<\/p>\n<p data-height=\"500\" style=\"height: 500px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"e967c32a64fe3927f14a2f9bc30b933a\" data-default-tab=\"result\" data-user=\"css-tricks\" class='codepen'>See the Pen <a href=\"http:\/\/codepen.io\/team\/css-tricks\/pen\/e967c32a64fe3927f14a2f9bc30b933a\/\" rel=\"noopener\">Sizing type with vw units<\/a> by CSS-Tricks (<a href=\"http:\/\/codepen.io\/css-tricks\" rel=\"noopener\">@css-tricks<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>These units are supported by the following browsers:<\/p>\n<table class=\"browser-support-table\">\n<thead>\n<tr>\n<th class=\"chrome\"><span>Chrome<\/span><\/th>\n<th class=\"safari\"><span>Safari<\/span><\/th>\n<th class=\"firefox\"><span>Firefox<\/span><\/th>\n<th class=\"opera\"><span>Opera<\/span><\/th>\n<th class=\"ie\"><span>IE<\/span><\/th>\n<th class=\"android\"><span>Android<\/span><\/th>\n<th class=\"iOS\"><span>iOS<\/span><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td class=\"yep\">31+<\/td>\n<td class=\"yep\">7+<\/td>\n<td class=\"yep\">31+<\/td>\n<td class=\"yep\">27+<\/td>\n<td class=\"yep\">9+<\/td>\n<td class=\"yep\">4.4+<\/td>\n<td class=\"yep\">7.1+<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>It\u2019s important to note there are two other viewport units: <code>vmin<\/code> and <code>vmax<\/code>. The first will find the values of <code>vh<\/code> and <code>vw<\/code> and set the font-size as the smallest of the two whilst <code>vmax<\/code> sets the font-size to the largest of these two values.<\/p>\n<h3>The ch unit<\/h3>\n<pre rel=\"CSS\"><code class=\"language-css\">.element {\r\n  font-size: 24ch;\r\n}<\/code><\/pre>\n<p>The <code>ch<\/code> unit is similar to the <code>ex<\/code> unit in that it will set the font-size of an element in relation to the width of the 0 (zero) glyph of the font:<\/p>\n<p data-height=\"500\" style=\"height: 500px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"96647ec509b649ef9b288c5202f3c3f5\" data-default-tab=\"result\" data-user=\"css-tricks\" class='codepen'>See the Pen <a href=\"http:\/\/codepen.io\/team\/css-tricks\/pen\/96647ec509b649ef9b288c5202f3c3f5\/\" rel=\"noopener\">Sizing type with ch units<\/a> by CSS-Tricks (<a href=\"http:\/\/codepen.io\/css-tricks\" rel=\"noopener\">@css-tricks<\/a>) on <a href=\"http:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>This unit is supported by:<\/p>\n<table class=\"browser-support-table\">\n<thead>\n<tr>\n<th class=\"chrome\"><span>Chrome<\/span><\/th>\n<th class=\"safari\"><span>Safari<\/span><\/th>\n<th class=\"firefox\"><span>Firefox<\/span><\/th>\n<th class=\"opera\"><span>Opera<\/span><\/th>\n<th class=\"ie\"><span>IE<\/span><\/th>\n<th class=\"android\"><span>Android<\/span><\/th>\n<th class=\"iOS\"><span>iOS<\/span><\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td class=\"yep\">27+<\/td>\n<td class=\"yep\">Works<\/td>\n<td class=\"yep\">10+<\/td>\n<td class=\"yep\">Works<\/td>\n<td class=\"yep\">9+<\/td>\n<td class=\"yep\">Works<\/td>\n<td class=\"yep\">Works<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>Related Properties<\/h3>\n<ul>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/f\/font\/\">font<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-family\/\">font-family<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-stretch\/\">font-stretch<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-style\/\">font-style<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-variant\/\">font-variant<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-weight\/\">font-weight<\/a><\/li>\n<\/ul>\n<h3>Other Resources<\/h3>\n<ul>\n<li><a href=\"http:\/\/www.w3.org\/TR\/css3-fonts\/#font-size-prop\" rel=\"noopener\">font-size on W3C<\/a><\/li>\n<li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/font-size\" rel=\"noopener\">font-size on MDN<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/rems-ems\/\">Font Size Idea: px at the Root, rem for Components, em for Text Elements<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/the-lengths-of-css\">The Lengths of CSS<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/why-ems\/\">Why Ems?<\/a><\/li>\n<li><a href=\"https:\/\/css-tricks.com\/viewport-sized-typography\/\">Viewport sized typography<\/a><\/li>\n<li><a href=\"http:\/\/madebymike.com.au\/writing\/precise-control-responsive-typography\/\" rel=\"noopener\">Precise control over responsive typography<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The font-size property specifies the size, or height, of the font. font-size affects not only the font to which it is applied, but is also used to compute the value of em, rem, and ex length units. p { font-size: 20px; } font-size can accept keywords, length units, or percentages as values. It\u2019s important to [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":13921,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"page-almanac-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":14053,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font\/","url_meta":{"origin":21545,"position":0},"title":"font","date":"September 5, 2011","format":false,"excerpt":"The font property in CSS is a shorthand property that combines all the following sub-properties in a single declaration. body { font: normal small-caps normal 16px\/1.4 Georgia; } \/* is the same as: body { font-family: Georgia; line-height: 1.4; font-weight: normal; font-stretch: normal; font-variant: small-caps; font-size: 16px; } *\/ There\u2026","rel":"","context":"With 5 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":16776,"url":"https:\/\/css-tricks.com\/snippets\/css\/less-mixin-for-rem-font-sizing\/","url_meta":{"origin":21545,"position":1},"title":"Mixins for Rem Font Sizing","date":"April 10, 2012","format":false,"excerpt":"The rem font-size unit is similar to em, only instead of cascading it's always relative to the root (html) element (more information). This has pretty good modern browser support, it's just IE 8 and down we need to provide px fallbacks for. Instead of repeating ourselves everywhere, we can use\u2026","rel":"","context":"With 67 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14063,"url":"https:\/\/css-tricks.com\/almanac\/properties\/l\/letter-spacing\/","url_meta":{"origin":21545,"position":2},"title":"letter-spacing","date":"March 12, 2013","format":false,"excerpt":"The letter-spacing property controls the amount of space between each letter in a given element or block of text. Values supported by letter-spacing include font-relative values (em, rem), absolute values (px) and the normal property, which resets to the font's default. Using font-relative values is recommended, so that the letter-spacing\u2026","rel":"","context":"With 18 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14065,"url":"https:\/\/css-tricks.com\/almanac\/properties\/l\/line-height\/","url_meta":{"origin":21545,"position":3},"title":"line-height","date":"September 5, 2011","format":false,"excerpt":"The line-height property defines the amount of space above and below inline elements. That is, elements that are set to display: inline or display: inline-block. This property is most often used to set the leading for lines of text. p { line-height: 1.35; } The line-height property can accept the\u2026","rel":"","context":"With 12 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":312405,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-decoration-thickness\/","url_meta":{"origin":21545,"position":4},"title":"text-decoration-thickness","date":"June 8, 2020","format":false,"excerpt":"The text-decoration-thickness property in CSS sets the stroke thickness of the decoration line that is used on text in an element. The text-decoration-line value needs to be either underline, line-through, or overline to reflect the thickness property. .text { text-decoration-line: underline; \u00a0 text-decoration-thickness: 2px; } Syntax text-decoration-thickness: auto | from-font\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":311020,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/text-underline-offset\/","url_meta":{"origin":21545,"position":5},"title":"text-underline-offset","date":"May 18, 2020","format":false,"excerpt":"The text-underline-offset property in CSS sets the distance of text underlines from their initial position. .element { \u00a0 text-underline-offset: 0.5em; } Once you apply an underline for an element using text-decoration with the value of underline, you can say how far that line should be from your text using the\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/21545"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=21545"}],"version-history":[{"count":13,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/21545\/revisions"}],"predecessor-version":[{"id":202639,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/21545\/revisions\/202639"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/13921"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=21545"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=21545"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}