{"id":22055,"date":"2013-06-17T10:25:01","date_gmt":"2013-06-17T17:25:01","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=22055"},"modified":"2022-05-31T07:16:02","modified_gmt":"2022-05-31T14:16:02","slug":"font-weight","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-weight\/","title":{"rendered":"font-weight"},"content":{"rendered":"\n<p>The <code>font-weight<\/code> property sets the weight, or thickness, of a font and is dependent either on available font faces within a font family or weights defined by the browser.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">span {\n  font-weight: bold;\n}<\/code><\/pre>\n\n\n\n<p>The <code>font-weight<\/code> property accepts either a keyword value or predefined numeric value. The available keywords are:<\/p>\n\n\n\n<ul><li><code>normal<\/code><\/li><li><code>bold<\/code><\/li><li><code>bolder<\/code><\/li><li><code>lighter<\/code><\/li><\/ul>\n\n\n\n<p>The available numeric values are:<\/p>\n\n\n\n<ul><li><code>100<\/code><\/li><li><code>200<\/code><\/li><li><code>300<\/code><\/li><li><code>400<\/code><\/li><li><code>500<\/code><\/li><li><code>600<\/code><\/li><li><code>700<\/code><\/li><li><code>800<\/code><\/li><li><code>900<\/code><\/li><\/ul>\n\n\n\n<p>The keyword value <code>normal<\/code> maps to the numeric value <code>400<\/code> and the value <code>bold<\/code> maps to <code>700<\/code>.<\/p>\n\n\n\n<p>In order to see any effect using values other than <code>400<\/code> or <code>700<\/code>, the font being used must have built-in faces that match those specified weights.<\/p>\n\n\n\n<p>If a font has a bold (&#8220;700&#8221;) or normal (&#8220;400&#8221;) version as part of the font family, the browser will use that. If those are not available, the browser will mimic its own bold or normal version of the font. It will not mimic the other unavailable weights. Fonts often use names like &#8220;Regular&#8221; and &#8220;Light&#8221; to identify any alternate font weights.<\/p>\n\n\n\n<p>The following demo demonstrates the use of the alternate weight values:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_DKmabd\" src=\"\/\/codepen.io\/anon\/embed\/DKmabd?height=450&amp;theme-id=1&amp;slug-hash=DKmabd&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed DKmabd\" title=\"CodePen Embed DKmabd\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>The above demo is using the free font <a href=\"http:\/\/www.google.com\/fonts\/specimen\/Open+Sans\" rel=\"noopener\">Open Sans<\/a>, embedded using the Google Web Fonts API. The font is loaded with all the available font weights and so, using the <code>font-weight<\/code> property, the different available weights are displayed as described by each paragraph&#8217;s text. The unavailable weights simply display the logically closest weight.<\/p>\n\n\n\n<p>Common fonts like Arial, Helvetica, Georgia, etc. do not have weights other than <code>400<\/code> and <code>700<\/code>. So the same demo displayed with one of those fonts would display only two weights in the nine paragraphs.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"using-bolder-and-lighter-keywords\">Using &#8220;bolder&#8221; and &#8220;lighter&#8221; keywords<\/h3>\n\n\n<p>The keyword values <code>bolder<\/code> and <code>lighter<\/code> are relative to the computed font weight of the parent element. The browser will look for the closest &#8220;bolder&#8221; or &#8220;lighter&#8221; weight, depending on what is available in the font family, otherwise it will simply choose &#8220;400&#8221; or &#8220;700&#8221;, depending on which makes the most sense.<\/p>\n\n\n\n<p>Child elements will not inherit the &#8220;bolder&#8221; and &#8220;lighter&#8221; keyword values, but instead will inherit the computed weight.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"related-properties\">Related Properties<\/h3>\n\n\n<ul><li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/f\/font\/\">font<\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-stretch\/\">font-stretch<\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-variant\/\">font-variant<\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-style\/\">font-style<\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/l\/line-height\/\">line-height<\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-size\/\">font-size<\/a><\/li><li><a href=\"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-family\/\">font-family<\/a><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"browser-support\">Browser support<\/h3>\n\n\n<script src=\"https:\/\/cdn.jsdelivr.net\/gh\/ireade\/caniuse-embed\/public\/caniuse-embed.min.js\"><\/script>\n<p class=\"ciu_embed\" data-feature=\"mdn-css__properties__font-weight\" data-periods=\"future_1,current,past_1,past_2\" data-accessible-colours=\"false\">\n\n\n<h3 class=\"wp-block-heading\" id=\"other-resources\">Other resources<\/h3>\n\n\n<ul><li><a href=\"http:\/\/www.w3.org\/TR\/css3-fonts\/#font-weight-prop\" rel=\"noopener\">font-weight on W3C<\/a><\/li><li><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/font-weight\" rel=\"noopener\">font-weight on MDN<\/a><\/li><\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The font-weight property sets the weight, or thickness, of a font and is dependent either on available font faces within a font family or weights defined by the browser. The font-weight property accepts either a keyword value or predefined numeric value. The available keywords are: normal bold bolder lighter The available numeric values are: 100 [&hellip;]<\/p>\n","protected":false},"author":7178,"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":261983,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-variant-numeric\/","url_meta":{"origin":22055,"position":0},"title":"font-variant-numeric","date":"October 31, 2017","format":false,"excerpt":"The font-variant-numeric property in CSS supports the OpenType font format by specifying which numeric glyphs to use on a class, including variations for fractions, ordinal markers and styled variations among others. A Little Context We tend to think of numbers as a static glyph. It prints and that's the way\u2026","rel":"","context":"In \"font-variant\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":318556,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-synthesis\/","url_meta":{"origin":22055,"position":1},"title":"font-synthesis","date":"August 5, 2020","format":false,"excerpt":"The font-systhesis property in CSS gives the browser instructions for how to handle font bolded and italicized character when the specified font-family doesn't include them. Let's take Lato from Google Fonts as an example. It says there are 10 different variations of the font. Each one of those font variations\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/lato-specimen.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":322037,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-kerning\/","url_meta":{"origin":22055,"position":2},"title":"font-kerning","date":"September 25, 2020","format":false,"excerpt":"The CSS font-kerning property defines the way specific pairs of letters are spaced. You see, fonts often contain information about how much breathing room a character has on its left and right edges. The proper term for the spacing is sidebearings. When two characters are placed next to each other,\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14053,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font\/","url_meta":{"origin":22055,"position":3},"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":322735,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-optical-sizing\/","url_meta":{"origin":22055,"position":4},"title":"font-optical-sizing","date":"October 7, 2020","format":false,"excerpt":"The font-optical-sizing CSS property allows the browser to adjust the outline of font glyphs to make them more legible at different sizes. For example, smaller text may get a thicker outline to increase its contrast. On the flip side, larger text may get something that's more \"delicate\" to quote the\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":22064,"url":"https:\/\/css-tricks.com\/almanac\/properties\/f\/font-family\/","url_meta":{"origin":22055,"position":5},"title":"font-family","date":"June 17, 2013","format":false,"excerpt":"The font-family property defines the font that is applied to the selected element. The font that is selected is not a single font face, but a \"family\", and thus may be dependent on other typographic property values to select the correct face within the family. body { font-family: Arial, Helvetica,\u2026","rel":"","context":"With 7 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/22055"}],"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\/7178"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=22055"}],"version-history":[{"count":6,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/22055\/revisions"}],"predecessor-version":[{"id":366138,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/22055\/revisions\/366138"}],"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=22055"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=22055"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}