CSS font-size

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content="CSS font-size, property, larger text, smaller text, referencing styles in Javascript, DOM Reference, Document Object Model Reference"> <meta name="Description" content="CSS font-size - CSS property for specifying the size of your font."> <link rel="canonical" href="https://www.quackit.com/css/properties/css_font-size.cfm"> <title>CSS font-size</title> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link rel="shortcut icon" href="/pix/favicon96.png"> <link rel="apple-touch-icon" href="/pix/apple-touch-icon.png"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet"> <link href="/common/css/master.45.min.css" rel="stylesheet"> <script async src="https://cdn.fuseplatform.net/publift/tags/2/3499/fuse.js"></script>  <script async src="https://www.googletagmanager.com/gtag/js?id=G-Q3H025ZKLN"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-Q3H025ZKLN'); </script> </head> <body> <header class="site-header"> <div class="site-header-base"> <div class="site-logo"> <a title="Quackit Homepage" target="_top" href="/"><img src="/pix/quackit_logo_watermark.png" width="87" height="33" alt="Quackit Logo"></a> </div> <button id="site-nav-toggler" class="site-nav-toggler" aria-expanded="false" aria-controls="site-nav"> <span class="sr-only">Toggle navigation</span> ☰ </button> </div> <nav id="site-nav" class="site-nav"> <div class="site-links"> <ul> <li><a href="/"><i class="fa fa-home"></i> <span class="sr-only">Home</span></a></li> <li><a href="/html/">HTML</a></li> <li><a href="/css/">CSS</a></li> <li><a href="/scripting/">Scripting</a></li> <li><a href="/database/">Database</a></li> </ul> </div> <div class="site-search-top"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:98x0fk-bbgi"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="20" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> </div> </nav> </header> <div class="main"> <article class="content"> <h1 class="page-title">CSS font-size</h1> <div class="ad ad-top">  <div data-fuse="23059883623"></div> </div> <script src="/common/js/codemirror/lib/codemirror.js"></script> <script src="/common/js/codemirror/mode/css/css.js"></script> <div class="code-only"> <textarea id="example1" autocomplete="off" spellcheck="false"><!doctype html>
<title>Example</title>
<style>
p { 
 color: hotpink; 
 font-size: 1.5em;
 }
.lg { font-size: 150%; }
.sm { font-size: 70%; }
</style>
<p>Auctor augue mauris augue <span class="lg">neque gravida</span> in fermentum. Euismod elementum nisi quis eleifend. <span class="sm">Nec ultrices dui sapien eget mi proin sed libero</span>. Praesent semper feugiat nibh sed. </p></textarea> <p> <a class="btn btn-default" href="/html/html_editors/scratchpad/?example=/css/properties/css_font-size" target="_blank" title="Full-page editor. Opens this example in the full-page editor."><i class="fa fa-pencil-square-o"></i> View Output</i></a> </p> </div> <script> var exampleCode1 = CodeMirror.fromTextArea(document.getElementById("example1"), { mode: "text/css", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <p class="lead">The CSS <code>font-size</code> property is used for specifying the size of a font.</p> <p>You can specify the font size as an absolute size, relative size, length, or percentage. See below.</p> <p>Also see the <a href="/css/properties/css_font-size-adjust.cfm"><code>font-size-adjust</code></a> property to ensure that any fallback fonts are rendered at an appropriate size.</p> <h2>Syntax</h2> <script src="/common/js/codemirror/mode/text/css/text/css.js"></script> <div class="code-only"> <textarea id="example2" autocomplete="off" spellcheck="false">font-size: <absolute-size> | <relative-size> | <length> | <percentage></textarea> </div> <script> var exampleCode2 = CodeMirror.fromTextArea(document.getElementById("example2"), { mode: "text/css", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h2>Possible Values</h2> <dl> <dt><dfn><var class="css-data-type">absolute-size</var></dfn></dt> <dd><p>This allows you to specify an absolute font size using a keyword. The absolute keywords available are: </p> <ul> <li><code>xx-small</code></li> <li><code>x-small</code></li> <li><code>small</code></li> <li><code>medium</code></li> <li><code>large</code></li> <li><code>x-large</code></li> <li><code>xx-large</code></li> </ul> <aside class="info"> <p>These absolute keywords refer to an entry in a table of font sizes computed and kept by the user agent. When you use an absolute keyword, the user agent looks up the table and calculates the font size accordingly. </p> </aside> </dd> <dt><dfn><var class="css-data-type">relative-size</var></dfn></dt> <dd><p>This allows you to specify a relative font size using a keyword. The relative keywords are:</p> <ul> <li><code>larger</code></li> <li><code>smaller</code></li> </ul> <aside class="info"> <p>These relative keywords move the font size through the list of absolute font sizes above. For example, if the parent element has <code>medium</code>, a value of <code>smaller</code> against the current element will make its font size <code>small</code>. If the parent's font size doesn't match an absolute keyword, the user agent will compute it either by picking a size between absolute keyword values, or rounding it off to the nearest one. If the size is outside the range of absolute keyword values, the user agent will extrapolate the size accordingly. </p> </aside> </dd> <dt><dfn><a href="/css/data_types/css_length_data_type.cfm"><var class="css-data-type">length</var></a></dfn></dt> <dd>Specifies an absolute font size using a valid <a href="/css/data_types/css_length_data_type.cfm"><var class="css-data-type">length</var></a> value (for example, <code>18px</code>, <code>1.5em</code>, <code>14pt</code>, etc). This value is independent of the user agent's font table. Negative lengths are illegal.</dd> <dt><a href="/css/data_types/css_length_data_type.cfm"><var class="css-data-type">percentage</var></a></dt> <dd>Using a <a href="/css/data_types/css_percentage_data_type.cfm"><var class="css-data-type">percentage</var></a> value specifies an absolute font size relative to the parent element's font size.</dd> </dl> <p>In addition, all CSS properties also accept the following CSS-wide keyword values as the sole component of their property value: </p> <dl> <dt><code>initial</code></dt> <dd>Represents the value specified as the property's initial value.</dd> <dt><code>inherit</code></dt> <dd>Represents the computed value of the property on the element's parent.</dd> <dt><code>unset</code></dt> <dd>This value acts as either <code>inherit</code> or <code>initial</code>, depending on whether the property is inherited or not. In other words, it sets all properties to their parent value if they are inheritable or to their initial value if not inheritable.</dd> </dl> <h2>General Information</h2> <div class="specifications"> <dl> <dt>Initial Value</dt> <dd><code>medium</code></dd> <dt>Applies To</dt> <dd>All elements</dd> <dt>Inherited?</dt> <dd>Yes (the computed value)</dd> <dt>Media</dt> <dd>Visual</dd> <dt>Animatable</dt> <dd>Yes (<a href="/html/html_editors/scratchpad/?example=/css/css3/animations/animatable_properties/css_font-size" target="_blank">see example</a>)</dd> </dl> </div> <h2>Example Code</h2> <div class="code-only"> <textarea id="example3" autocomplete="off" spellcheck="false">h1 { 
 font-size: 24px; 
 }
p { 
 font-size: 1em; 
 }
blockquote { 
 font-size: 120%; 
 }
nav { 
 font-size: smaller; 
 }</textarea> </div> <script> var exampleCode3 = CodeMirror.fromTextArea(document.getElementById("example3"), { mode: "text/css", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <h2>Absolute-Size Reference</h2> <p>Here's a rough guide as to mappings between CSS absolute sizes and HTML heading and absolute font sizes.</p> <p>Note that the actual value may vary, depending on the value of <a href="/css/properties/css_font-size-adjust.cfm"><code>font-size-adjust</code></a>, and the unavailability of certain font sizes.</p> <table class="table"> <thead> <tr> <th>CSS absolute-size values <th>xx-small <th>x-small <th>small <th>medium <th>large <th>x-large <th>xx-large <th> </tr> </thead> <tbody> <tr> <th>scaling factor <td>3/5 <td>3/4 <td>8/9 <td>1 <td>6/5 <td>3/2 <td>2/1 <td>3/1 </tr> <tr> <th>HTML headings <td>h6 <td> <td>h5 <td>h4 <td>h3 <td>h2 <td>h1 <td> </tr> <tr> <th>HTML font sizes <td>1 <td> <td>2 <td>3 <td>4 <td>5 <td>6 <td>7 </tr> </tbody> </table> <h2>Limitations of the <code>font-size</code> Property</h2> <p>Different fonts have different x-heights. So one font may look bigger at a given size than another font. This is fine if you're only dealing with one font. But on the web, we usually deal with a list of fonts — starting with our first choice font, then one or more "fallback" fonts, in case the user doesn't have our preferred font.</p> <p>This is typically done with code that looks something like this:</p> <div class="code-only"> <textarea id="example4" autocomplete="off" spellcheck="false">font-size: 18px;
font-family: Optima, IrisUPC, sans-serif;</textarea> </div> <script> var exampleCode4 = CodeMirror.fromTextArea(document.getElementById("example4"), { mode: "text/css", tabMode: "indent", styleActiveLine: false, lineNumbers: false, lineWrapping: true, theme: "q-dark" }); </script> <p>The assumption is that, as developers, we will have the first choice font (Optima) installed on our computer. So when we test the font size in the website, we will be testing with the first choice font.</p> <p>But what about users who are unable to use our first choice font? They will get the second choice (if it's available), or the third choice if neither of those are available, and so on.</p> <p>In many cases, the second or third choice fonts will be rendered at a different x-height than the first choice font. What this means is that your second choice font may look bigger or smaller than intended. In some cases this might not be a problem, but in other cases you might find that the fallback font is rendered much too small or much to large — to the point where the text becomes illegible. This can prove to be quite frustrating, as it can be difficult finding suitable fallback fonts. </p> <p>Fortunately, CSS provides a way to deal with this problem.</p> <p>CSS includes the <a href="/css/properties/css_font-size-adjust.cfm"><code>font-size-adjust</code></a> property for dealing with this precise problem. Basically, it allows you to specify that all fallback fonts use the same aspect ratio as the preferred font. When you do this, the fallback font is rendered at a very similar size to the preferred font. Be sure to check it out. </p> <h2>Official Specifications</h2> <ul> <li><a href="https://www.w3.org/TR/css-fonts-3/#font-size-prop">CSS Fonts Module Level 3</a> (W3C Candidate Recommendation 3 October 2013)</li> <li><a href="https://www.w3.org/TR/REC-CSS21/fonts.html#font-size-props">CSS Level 2.1</a> (W3C Recommendation 07 June 2011)</li> <li><a href="https://www.w3.org/TR/CSS1/#font-size">CSS Level 1</a> (W3C Recommendation 17 Dec 1996)</li> </ul> </article> <div class="sidebar"> <nav> <ul> <li> <h3><a href="/css/properties/">CSS Properties</a></h3> <ul> <li><a href="/css/css3/properties/css_animation.cfm">animation</a></li> <li><a href="/css/properties/css_background.cfm">background</a></li> <li><a href="/css/css3/properties/css_bleed.cfm">bleed</a></li> <li><a href="/css/css3/properties/css_border-radius.cfm">border-radius</a></li> <li><a href="/css/properties/css_border.cfm">border</a></li> <li><a href="/css/css3/properties/css_box-shadow.cfm">box-shadow</a></li> <li><a href="/css/css3/properties/css_box-sizing.cfm">box-sizing</a></li> <li><a href="/css/properties/css_clear.cfm">clear</a></li> <li><a href="/css/properties/css_clip.cfm">clip</a></li> <li><a href="/css/properties/css_color.cfm">color</a></li> <li><a href="/css/css3/properties/css_columns.cfm">columns</a></li> <li><a href="/css/properties/css_content.cfm">content</a></li> <li><a href="/css/properties/css_counter-increment.cfm">counter-increment</a></li> <li><a href="/css/properties/css_cue.cfm">cue</a></li> <li><a href="/css/properties/css_cursor.cfm">cursor</a></li> <li><a href="/css/properties/css_display.cfm">display</a></li> <li><a href="/css/css3/properties/css_filter.cfm">filter</a></li> <li><a href="/css/css3/properties/css_flex.cfm">flex</a></li> <li><a href="/css/properties/css_float.cfm">float</a></li> <li><a href="/css/properties/css_font-family.cfm">font-family</a></li> <li><a href="/css/properties/css_font-size.cfm">font-size</a></li> <li><a href="/css/properties/css_font.cfm">font</a></li> <li><a href="/css/properties/css_height.cfm">height</a></li> <li><a href="/css/properties/css_left.cfm">left</a></li> <li><a href="/css/properties/css_list-style.cfm">list-style</a></li> <li><a href="/css/properties/css_margin.cfm">margin</a></li> <li><a href="/css/css3/properties/css_mix-blend-mode.cfm">mix-blend-mode</a></li> <li><a href="/css/css3/properties/css_opacity.cfm">opacity</a></li> <li><a href="/css/properties/css_outline.cfm">outline</a></li> <li><a href="/css/css3/properties/css_overflow.cfm">overflow</a></li> <li><a href="/css/properties/css_padding.cfm">padding</a></li> <li><a href="/css/properties/css_page.cfm">page</a></li> <li><a href="/css/properties/css_pause.cfm">pause</a></li> <li><a href="/css/css3/properties/css_perspective.cfm">perspective</a></li> <li><a href="/css/properties/css_position.cfm">position</a></li> <li><a href="/css/css3/properties/css_rest.cfm">rest</a></li> <li><a href="/css/properties/css_right.cfm">right</a></li> <li><a href="/css/properties/css_text-align.cfm">text-align</a></li> <li><a href="/css/css3/properties/css_text-decoration.cfm">text-decoration</a></li> <li><a href="/css/properties/css_text-shadow.cfm">text-shadow</a></li> <li><a href="/css/properties/css_top.cfm">top</a></li> <li><a href="/css/css3/properties/css_transform.cfm">transform</a></li> <li><a href="/css/css3/properties/css_transition.cfm">transition</a></li> <li><a href="/css/properties/css_vertical-align.cfm">vertical-align</a></li> <li><a href="/css/properties/css_visibility.cfm">visibility</a></li> <li><a href="/css/properties/css_width.cfm">width</a></li> <li><a href="/css/css3/properties/css_word-wrap.cfm">word-wrap</a></li> <li><a href="/css/properties/css_z-index.cfm">z-index</a></li> <li><a href="/css/properties/">All Properties <i class="fa fa-long-arrow-right" aria-hidden="true"></i></a></li> </ul> </li> <li> <h3><a href="/css/reference/">CSS Reference</a></h3> <ul> <li><a href="/css/examples/" title="Copy & paste code examples.">CSS Examples</a></li> <li><a href="/css/properties/" title="All CSS properties listed alphabetically.">CSS Properties</a></li> <li><a href="/css/functions/" title="All CSS functions listed alphabetically.">CSS Functions</a></li> <li><a href="/css/data_types/" title="">CSS Data Types</a></li> <li><a href="/css/at-rules/" title="">CSS @-Rules</a></li> <li><a href="/css/selectors/" title="All CSS selectors.">CSS Selectors</a></li> <li><a href="/css/css3/animations/animatable_properties/" title="Properties that support CSS animations.">CSS Animatable Properties</a></li> <li><a href="/css/color/" title="Full CSS color reference, includes color picker, charts, generators, and more.">CSS Color</a></li> <li><a href="/css/css_color_codes.cfm" title="">CSS Color Codes</a></li> <li><a href="/css/tutorial/" title="">CSS Tutorial</a></li> <li><a href="/css/flexbox/tutorial/" title="">Flexbox Tutorial</a></li> <li><a href="/css/grid/tutorial/" title="">Grid Tutorial</a></li> <li><a href="/css/css_media_types.cfm" title="Use CSS to apply a separate style depending on the media type that is displaying your web page">CSS Media Types</a></li> <li><a href="/css/css_media_features.cfm" title="Use CSS to apply a separate style depending on the media features available in the output device">CSS Media Features</a></li> <li><a href="/bootstrap/tutorial/" title="Bootstrap is a free and open-source framework for creating websites and web applications.">Bootstrap Tutorial</a></li> <li><a href="/sass/tutorial/" title="Sass is a CSS preprocessor to help create maintainable style sheets.">Sass Tutorial</a></li> </ul> </li> </ul> </nav> <div class="ad ad-left">  <div data-fuse="23059511712"></div> </div> </div> <div class="ads"> <div class="ad ad-right">  <div data-fuse="23059883626"></div> </div> </div> </div> <div class="searchbox-bottom"> <form action="/search/" id="cse-search-box-bottom" class="site-search"> <div> <input type="hidden" name="cx" value="partner-pub-6331358926293806:npmuvy-i8kk"> <input type="hidden" name="cof" value="FORID:10"> <input type="hidden" name="ie" value="ISO-8859-1"> <input type="text" name="q" size="30" class="site-search-input"> <button type="submit" name="sa" class="site-search-button"><i class="fa fa-search"></i></button> </div> </form> <script src="//cse.google.com/cse/brand?form=cse-search-box-bottom&lang=en"></script> </div> <footer> <p class="about"><a href="/"><i class="fa fa-home"></i> Home</a> | <a href="/about.cfm" rel="nofollow">About</a> | <a href="/contact.cfm" rel="nofollow">Contact</a> | <a href="/terms_of_use.cfm" rel="nofollow">Terms of Use</a> | <a href="/privacy_policy.cfm" rel="nofollow">Privacy Policy</a></p> <p>© Copyright 2000 - 2025 Quackit.com  </p> </footer> <script src="/common/js/spectrum/spectrum.js"></script> <script src="/common/js/lightbox2-master/dist/js/lightbox.min.js" charset="utf-8"></script> <script> $(document).ready(function(){ $( "#site-nav-toggler" ).click(function() { $( "#site-nav" ).toggle( "slow" ); }); }); </script> <script> $(function(){var a=window.location.href;$(".sidebar nav a").each(function(){a==this.href&&$(this).closest("li").addClass("selected")})}); </script> </body> </html>

CINXE.COM

CSS font-size