{"id":85,"date":"2025-03-21T16:46:06","date_gmt":"2025-03-21T16:46:06","guid":{"rendered":"https:\/\/kingstatue.com\/?p=85"},"modified":"2025-03-21T16:46:06","modified_gmt":"2025-03-21T16:46:06","slug":"font-size-property","status":"publish","type":"post","link":"https:\/\/www.kingstatue.com\/?p=85","title":{"rendered":"CSS – Font size property"},"content":{"rendered":"\n

The font-size<\/code> property used to set the size of the text. Controlling text size is crucial in web design, but it is important not to manipulate font sizes to make paragraphs resemble headings or vice versa. Instead, always use the appropriate HTML tags, such as <h1><\/code> to <h6><\/code> for headings and <p><\/code> for paragraphs.<\/p>\n\n\n\n

The font-size<\/code> value can be either absolute or relative:<\/p>\n\n\n\n

Absolute Size:<\/strong><\/h3>\n\n\n\n
    \n
  • Specifies a fixed text size.<\/li>\n\n\n\n
  • Prevents users from adjusting text size in some browsers, which can negatively impact accessibility.<\/li>\n\n\n\n
  • Useful when the physical output size is predetermined.<\/li>\n<\/ul>\n\n\n\n

    Relative Size:<\/strong><\/h3>\n\n\n\n

    Allows users to modify text size in browsers, improving accessibility.<\/p>\n\n\n\n

    Adjusts the text size relative to surrounding elements.<\/p>\n\n\n\n

    If a font size is not specified, the default size for normal text is 16px (16px=1em).<\/p>\n\n\n\n

    You can set the font size of text by using pixel or em<\/p>\n\n\n\n

    You can full control of the text size by setting the text size with pixels you<\/p>\n\n\n\n

    h1\u00a0{
    \u00a0\u00a0font-size:\u00a020px;
    }<\/p>\n\n\n\n

    h2\u00a0{
    \u00a0\u00a0font-size:\u00a018px;
    }<\/p>\n\n\n\n

    p\u00a0{
    \u00a0\u00a0font-size:\u00a012px;
    }<\/p>\n\n\n\n

    Setting the text font size with em:<\/p>\n\n\n\n

    The CSS property font-size: 1.5em;<\/code> means that the text size will be 1.5 times the size of the parent element’s font size<\/strong>.<\/p>\n\n\n\n

    em<\/code> is a relative unit<\/strong>: It is based on the font size of the parent element. <\/p>\n\n\n\n

    Calculation<\/strong>:<\/p>\n\n\n\n

      \n
    • If the parent element has a font size of 16px<\/code> (default browser font size), then: 1.5em=1.5\u00d716px=24px<\/li>\n\n\n\n
    • If the parent element’s font size is 20px<\/code>, then: 1.5em=1.5\u00d720px=30px<\/li>\n<\/ul>\n\n\n\n

      .parent {
      font-size: 20px;
      }<\/p>\n\n\n\n

      .child {
      font-size: 1.5em; \/* This will be 30px (1.5 * 20px) *\/
      }<\/p>\n\n\n\n

      The default text font size is 16px. 1em is equal to the current font size. <\/p>\n\n\n\n

      So, the default font size is 1em 16px.<\/p>\n\n\n\n

      h1\u00a0{
      \u00a0 font-size:\u00a02em; \/* 2 x 16px=32px *\/
      }<\/p>\n\n\n\n

      h2\u00a0{
      \u00a0\u00a0font-size:\u00a01.5em;\u00a0\/* 1.5 x 16px=24px *\/
      }<\/p>\n\n\n\n

      p\u00a0{
      \u00a0 font-size:\u00a01em;\u00a0\/*1 x 16px=16px *\/
      }<\/p>\n\n\n\n

      Key Points:<\/h3>\n\n\n\n
        \n
      • 1em<\/code> means the same size as the parent.<\/li>\n\n\n\n
      • 1.5em<\/code> increases the size by 50%<\/strong>.<\/li>\n\n\n\n
      • 2em<\/code> doubles the size.<\/li>\n\n\n\n
      • 0.5em<\/code> reduces the size by half<\/strong>.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"

        The font-size property used to set the size of the text. Controlling text size is crucial in web design, but it is important not to manipulate font sizes to make…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-85","post","type-post","status-publish","format-standard","hentry","category-cascading-style-sheet"],"_links":{"self":[{"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=\/wp\/v2\/posts\/85","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=85"}],"version-history":[{"count":0,"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=\/wp\/v2\/posts\/85\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=85"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=85"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kingstatue.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=85"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}