/* Created on : 03.03.2016, 09:26:50 Author : Aladim, Michael Schopp W3C - rem unir: >> http://www.w3.org/TR/css3-values/#font-relative-lengths t2n: Responsive Webdesign: Worauf es beim Einsatz reaktionsfähiger Typografie ankommt: http://t3n.de/magazin/responsive-webdesign-reaktionsfahige-typografie-230315/2/ A list apart - More Meaningful Typography: http://alistapart.com/article/more-meaningful-typography PX to EM conversion made simple: http://pxtoem.com/ Typografische Tonleiter 6 7 8 9 10 11 12 14 16 18 21 24 36 48 60 72 | +1pt | +2pt | +3pt | +12pt | Smartphone (Heading): 16pt, 18pt (+2), 21pt (+3), 24pt (+3) Tablets (Heading): 18pt, 21pt (+3), 24pt (+3), 36pt (+12) Desktops (Heading): 21pt, 24pt (+3), 36pt (+12), 48pt (+12), 60pt (+12) "Der Prozentwert im bezieht sich dabei auf die voreingestellte Standardschriftgröße des Browsers, die in der Regel „16px“ beträgt." body ist also das "Root" Element, html ist hier in dem css Framework das eigetnliche Root-Element, darum wird es hier noch einmal neu in Zeile 50 neu gesetzt [ html { font-size: 16px; font-size: 100%;}] body {font-size: 16px; font-size: 100%;} h1 {font-size: 60px; font-size: 3.750rem;} h2 {font-size: 48px; font-size: 3.000rem;} h3 {font-size: 36px; font-size: 2.250rem;} h4 {font-size: 24px; font-size: 1.500rem;} h5 {font-size: 21px; font-size: 1.313rem;} h6 {font-size: 18px; font-size: 1.125rem;} p {font-size: 14px; font-size: 0.875rem;} body {font-size: 16px; font-size: 100%;} h1 {font-size: 48px; font-size: 3.000rem;} h2 {font-size: 36px; font-size: 2.250rem;} h3 {font-size: 24px; font-size: 1.500rem;} h4 {font-size: 21px; font-size: 1.313rem;} h5 {font-size: 18px; font-size: 1.125rem;} h6 {font-size: 16px; font-size: 1.000rem;} p {font-size: 12px; font-size: 0.750rem;} Wenn body {font-size: 87.5%:} gesetzt ist dann ist die {font-size: 14px} [ 16px / 100 * 87.5 = 14px] Desktop = {font-size: 87.5%:} = 14px Create Root Typograpy: font-family: Georgia, Times, "Times New Roman", serif; */ html { font-size: 16px; font-size: 100%; font-family: sans-serif; } .thumbnail-sidebar-text { font-weight: bold; } /* Small devices (smarphones, 320px and up) container width: 330px minus padding -30px; 28% */ /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ @media only screen and (min-device-width : 320px) { body {font-size: 16px; font-size: 100%;} h1 {font-size: 36px; font-size: 2.250rem;} h2 {font-size: 24px; font-size: 1.500rem;} h3 {font-size: 21px; font-size: 1.313rem;} h4 {font-size: 18px; font-size: 1.125rem;} h5 {font-size: 16px; font-size: 1.000rem;} h6 {font-size: 14px; font-size: 0.875rem;} p, li, span, table {font-size: 11px; font-size: 0.688rem;} .first-heading-text span {font-size: 5px; font-size: 0.313rem; letter-spacing: 1px; word-spacing: 1px;} .headingAvalex h2 {font-size: 21px; font-size: 1.313rem;} .second-heading-text h2 {font-size: 18px; font-size: 1.125rem;} .second-heading-text h4 {font-size: 12px; font-size: 0.750rem;} .second-heading-text h6 {font-size: 8px; font-size: 0.500rem;} .breadcrumb, .navbar-nav > li > a, .dropdown-menu > li > a, .btn, .thumbnail-sidebar-text {font-size: 11px; font-size: 0.688rem;} .label-tt-news-singel-view, .tt-news-lable {font-size: 9px; font-size: 0.563rem;} .csc-textpic-caption{font-size: 10px; font-size: 0.625rem;} .ttnews-url-singel-view a, .ttnews-url-goto-archive a, .news-single-rightbox, .news-single-imgcaption, .news-latest-date, .news-latest-morelink, .news-latest-category, .news-list-category, .news-list-author, .news-list-imgcaption, .news-list-date, .news-list-browse, .news-amenu-container, .news-catmenu {font-size: 11px; font-size: 0.688rem;} } /* Small devices (smarphones, 360px and up) container width: 360px minus padding 30px; 30% */ /* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ @media only screen and (min-device-width : 360px) { body {font-size: 16px; font-size: 100%;} h1 {font-size: 36px; font-size: 2.250rem;} h2 {font-size: 24px; font-size: 1.500rem;} h3 {font-size: 21px; font-size: 1.313rem;} h4 {font-size: 18px; font-size: 1.125rem;} h5 {font-size: 16px; font-size: 1.000rem;} h6 {font-size: 14px; font-size: 0.875rem;} p, li, span, table {font-size: 11px; font-size: 0.688rem;} .first-heading-text span {font-size: 6px; font-size: 0.375rem; letter-spacing: 1px; word-spacing: 1px;} .headingAvalex h2 {font-size: 21px; font-size: 1.313rem;} .second-heading-text h2 {font-size: 18px; font-size: 1.125rem;} .second-heading-text h4 {font-size: 12px; font-size: 0.750rem;} .second-heading-text h6 {font-size: 8px; font-size: 0.500rem;} .breadcrumb, .navbar-nav > li > a, .dropdown-menu > li > a, .btn, .thumbnail-sidebar-text {font-size: 11px; font-size: 0.688rem;} .label-tt-news-singel-view, .tt-news-lable {font-size: 9px; font-size: 0.563rem;} .csc-textpic-caption{font-size: 10px; font-size: 0.625rem;} .ttnews-url-singel-view a, .ttnews-url-goto-archive a, .news-single-rightbox, .news-single-imgcaption, .news-latest-date, .news-latest-morelink, .news-latest-category, .news-list-category, .news-list-author, .news-list-imgcaption, .news-list-date, .news-list-browse, .news-amenu-container, .news-catmenu {font-size: 11px; font-size: 0.688rem;} } /* Vertical view of small devices (smarphones, 480px and up) container width: 450px minus padding -30px; 41% */ /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ @media only screen and (min-device-width : 480px) { body {font-size: 16px; font-size: 100%;} h1 {font-size: 36px; font-size: 2.250rem;} h2 {font-size: 24px; font-size: 1.500rem;} h3 {font-size: 21px; font-size: 1.313rem;} h4 {font-size: 18px; font-size: 1.125rem;} h5 {font-size: 16px; font-size: 1.000rem;} h6 {font-size: 14px; font-size: 0.875rem;} p, li, span, table {font-size: 11px; font-size: 0.688rem;} .first-heading-text span {font-size: 6px; font-size: 0.375rem; letter-spacing: 1px; word-spacing: 1px;} .headingAvalex h2 {font-size: 21px; font-size: 1.313rem;} .second-heading-text h2 {font-size: 18px; font-size: 1.125rem;} .second-heading-text h4 {font-size: 12px; font-size: 0.750rem;} .second-heading-text h6 {font-size: 8px; font-size: 0.500rem;} .breadcrumb, .navbar-nav > li > a, .dropdown-menu > li > a, .btn, .thumbnail-sidebar-text {font-size: 11px; font-size: 0.688rem;} .label-tt-news-singel-view, .tt-news-lable {font-size: 9px; font-size: 0.563rem;} .csc-textpic-caption{font-size: 10px; font-size: 0.625rem;} .ttnews-url-singel-view a, .ttnews-url-goto-archive a, .news-single-rightbox, .news-single-imgcaption, .news-latest-date, .news-latest-morelink, .news-latest-category, .news-list-category, .news-list-author, .news-list-imgcaption, .news-list-date, .news-list-browse, .news-amenu-container, .news-catmenu {font-size: 11px; font-size: 0.688rem;} } /* Vertical view of small devices (smarphones, 640px and up) container width: 610px minus padding -30px; 55% */ /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ @media only screen and (min-device-width : 640px) { body {font-size: 16px; font-size: 100%;} h1 {font-size: 48px; font-size: 3.000rem;} h2 {font-size: 36px; font-size: 2.250rem;} h3 {font-size: 24px; font-size: 1.500rem;} h4 {font-size: 21px; font-size: 1.313rem;} h5 {font-size: 18px; font-size: 1.125rem;} h6 {font-size: 16px; font-size: 1.000rem;} p, li {font-size: 12px; font-size: 0.750rem;} table {font-size: 12px; font-size: 0.750rem;} .first-heading-text span {font-size: 8px; font-size: 0.500rem; letter-spacing: 4px; word-spacing: 2px;} .headingAvalex h2 {font-size: 24px; font-size: 1.500rem;} .second-heading-text h2 {font-size: 36px; font-size: 2.250rem;} .second-heading-text h4 {font-size: 21px; font-size: 1.313rem;} .second-heading-text h6 {font-size: 16px; font-size: 1.000rem;} .breadcrumb, .navbar-nav > li > a, .dropdown-menu > li > a, .btn, .thumbnail-sidebar-text {font-size: 12px; font-size: 0.750rem;} .label-tt-news-singel-view, .tt-news-lable {font-size: 10px; font-size: 0.625rem;} .csc-textpic-caption{font-size: 11px; font-size: 0.688rem;} .ttnews-url-singel-view a, .ttnews-url-goto-archive a, .news-single-rightbox, .news-single-imgcaption, .news-latest-date, .news-latest-morelink, .news-latest-category, .news-list-category, .news-list-author, .news-list-imgcaption, .news-list-date, .news-list-browse, .news-amenu-container, .news-catmenu {font-size: 12px; font-size: 0.750rem;} } /* Small devices (tablets and smarphones, 768px and up) container width: 750px padding -30px; 64% */ /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ @media only screen and (min-device-width : 768px) { body {font-size: 16px; font-size: 100%;} h1 {font-size: 48px; font-size: 3.000rem;} h2 {font-size: 36px; font-size: 2.250rem;} h3 {font-size: 24px; font-size: 1.500rem;} h4 {font-size: 21px; font-size: 1.313rem;} h5 {font-size: 18px; font-size: 1.125rem;} h6 {font-size: 16px; font-size: 1.000rem;} p, li, span, table {font-size: 12px; font-size: 0.750rem;} .first-heading-text span {font-size: 8px; font-size: 0.500rem; letter-spacing: 4px; word-spacing: 2px;} .headingAvalex h2 {font-size: 24px; font-size: 1.500rem;} .second-heading-text h2 {font-size: 36px; font-size: 2.250rem;} .second-heading-text h4 {font-size: 21px; font-size: 1.313rem;} .second-heading-text h6 {font-size: 16px; font-size: 1.000rem;} .breadcrumb, .navbar-nav > li > a, .dropdown-menu > li > a, .btn, .thumbnail-sidebar-text {font-size: 12px; font-size: 0.750rem;} .label-tt-news-singel-view, .tt-news-lable {font-size: 10px; font-size: 0.625rem;} .csc-textpic-caption{font-size: 11px; font-size: 0.688rem;} .ttnews-url-singel-view a, .ttnews-url-goto-archive a , .news-single-rightbox, .news-single-imgcaption, .news-latest-date, .news-latest-morelink, .news-latest-category, .news-list-category, .news-list-author, .news-list-imgcaption, .news-list-date, .news-list-browse, .news-amenu-container, .news-catmenu {font-size: 12px; font-size: 0.750rem;} } /* Medium devices (desktops, 992px and up) container width: 970px minus padding 30px; 83% */ /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ @media only screen and (min-device-width : 992px) { body {font-size: 16px; font-size: 100%;} h1 {font-size: 60px; font-size: 3.750rem;} h2 {font-size: 48px; font-size: 3.000rem;} h3 {font-size: 36px; font-size: 2.250rem;} h4 {font-size: 24px; font-size: 1.500rem;} h5 {font-size: 21px; font-size: 1.313rem;} h6 {font-size: 18px; font-size: 1.125rem;} p, li, span, table {font-size: 14px; font-size: 0.875rem;} .first-heading-text span {font-size: 10px; font-size: 0.625rem; letter-spacing: 6px; word-spacing: 3px;} .headingAvalex h2 {font-size: 36px; font-size: 2.250rem;} .second-heading-text h2 {font-size: 48px; font-size: 3.000rem;} .second-heading-text h4 {font-size: 24px; font-size: 1.500rem;} .second-heading-text h6 {font-size: 18px; font-size: 1.125rem;} .breadcrumb, .navbar-nav > li > a, .dropdown-menu > li > a, .btn, .thumbnail-sidebar-text {font-size: 14px; font-size: 0.875rem;} .label-tt-news-singel-view, .tt-news-lable {font-size: 11px; font-size: 0.688rem;} .csc-textpic-caption{font-size: 12px; font-size: 0.750rem;} .ttnews-url-singel-view a, .ttnews-url-goto-archive a, .news-single-rightbox, .news-single-imgcaption, .news-latest-date, .news-latest-morelink, .news-latest-category, .news-list-category, .news-list-author, .news-list-imgcaption, .news-list-date, .news-list-browse, .news-amenu-container, .news-catmenu {font-size: 14px; font-size: 0.875em;} } /* Large devices (large desktops, 1200px and up) container width: 1170px minus padding 30px; 100% */ /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */ @media only screen and (min-device-width : 1200px) { body {font-size: 16px; font-size: 100%;} h1 {font-size: 60px; font-size: 3.750rem;} h2 {font-size: 48px; font-size: 3.000rem;} h3 {font-size: 36px; font-size: 2.250rem;} h4 {font-size: 24px; font-size: 1.500rem;} h5 {font-size: 21px; font-size: 1.313rem;} h6 {font-size: 18px; font-size: 1.125rem;} p, li, span, table {font-size: 14px; font-size: 0.875rem;} .first-heading-text span {font-size: 10px; font-size: 0.625rem; letter-spacing: 6px; word-spacing: 3px;} .headingAvalex h2 {font-size: 36px; font-size: 2.250rem;} .second-heading-text h2 {font-size: 48px; font-size: 3.000rem;} .second-heading-text h4 {font-size: 24px; font-size: 1.500rem;} .second-heading-text h6 {font-size: 18px; font-size: 1.125rem;} .breadcrumb, .navbar-nav > li > a, .dropdown-menu > li > a, .btn, .thumbnail-sidebar-text {font-size: 14px; font-size: 0.875rem;} .label-tt-news-singel-view, .tt-news-lable {font-size: 11px; font-size: 0.688rem;} .csc-textpic-caption{font-size: 12px; font-size: 0.750rem;} .ttnews-url-singel-view a, .ttnews-url-goto-archive a, .news-single-rightbox, .news-single-imgcaption, .news-latest-date, .news-latest-morelink, .news-latest-category, .news-list-category, .news-list-author, .news-list-imgcaption, .news-list-date, .news-list-browse, .news-amenu-container, .news-catmenu {font-size: 14px; font-size: 0.875em;} }