"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9564],{3905:function(e,t,n){n.d(t,{Zo:function(){return p},kt:function(){return m}});var i=n(7294);function r(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function o(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,i)}return n}function a(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?o(Object(n),!0).forEach((function(t){r(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function s(e,t){if(null==e)return{};var n,i,r=function(e,t){if(null==e)return{};var n,i,r={},o=Object.keys(e);for(i=0;i<o.length;i++)n=o[i],t.indexOf(n)>=0||(r[n]=e[n]);return r}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(i=0;i<o.length;i++)n=o[i],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}var l=i.createContext({}),c=function(e){var t=i.useContext(l),n=t;return e&&(n="function"==typeof e?e(t):a(a({},t),e)),n},p=function(e){var t=c(e.components);return i.createElement(l.Provider,{value:t},e.children)},f={inlineCode:"code",wrapper:function(e){var t=e.children;return i.createElement(i.Fragment,{},t)}},u=i.forwardRef((function(e,t){var n=e.components,r=e.mdxType,o=e.originalType,l=e.parentName,p=s(e,["components","mdxType","originalType","parentName"]),u=c(n),m=r,h=u["".concat(l,".").concat(m)]||u[m]||f[m]||o;return n?i.createElement(h,a(a({ref:t},p),{},{components:n})):i.createElement(h,a({ref:t},p))}));function m(e,t){var n=arguments,r=t&&t.mdxType;if("string"==typeof e||r){var o=n.length,a=new Array(o);a[0]=u;var s={};for(var l in t)hasOwnProperty.call(t,l)&&(s[l]=t[l]);s.originalType=e,s.mdxType="string"==typeof e?e:r,a[1]=s;for(var c=2;c<o;c++)a[c]=n[c];return i.createElement.apply(null,a)}return i.createElement.apply(null,n)}u.displayName="MDXCreateElement"},8092:function(e,t,n){n.r(t),n.d(t,{frontMatter:function(){return s},contentTitle:function(){return l},metadata:function(){return c},toc:function(){return p},default:function(){return u}});var i=n(7462),r=n(3366),o=(n(7294),n(3905)),a=["components"],s={title:"Typography",sidebar_position:3},l=void 0,c={unversionedId:"overview/typography",id:"overview/typography",isDocsHomePage:!1,title:"Typography",description:"Typefaces",source:"@site/docs/overview/typography.mdx",sourceDirName:"overview",slug:"/overview/typography",permalink:"/docs/overview/typography",editUrl:"https://github.com/amir2mi/flatifycss/tree/master/website/docs/overview/typography.mdx",tags:[],version:"current",sidebarPosition:3,frontMatter:{title:"Typography",sidebar_position:3},sidebar:"tutorialSidebar",previous:{title:"Colors",permalink:"/docs/overview/colors"},next:{title:"Responsive",permalink:"/docs/overview/responsive"}},p=[{value:"Typefaces",id:"typefaces",children:[],level:2},{value:"Configuring typography",id:"configuring-typography",children:[{value:"Font size",id:"font-size",children:[],level:3},{value:"Font family",id:"font-family",children:[],level:3},{value:"Font size",id:"font-size-1",children:[],level:3},{value:"Font weight",id:"font-weight",children:[],level:3},{value:"Line height",id:"line-height",children:[],level:3}],level:2}],f={toc:p};function u(e){var t=e.components,n=(0,r.Z)(e,a);return(0,o.kt)("wrapper",(0,i.Z)({},f,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h2",{id:"typefaces"},"Typefaces"),(0,o.kt)("p",null,"FlatifyCSS uses ",(0,o.kt)("a",{parentName:"p",href:"https://fonts.google.com/specimen/Nunito"},"Nunito")," typeface by Vernon Adams for its default typography. For code the default is ",(0,o.kt)("a",{parentName:"p",href:"https://fonts.google.com/specimen/Fira+Code"},"Fira Code"),".",(0,o.kt)("br",{parentName:"p"}),"\n","However these typefaces are not included in the FlatifyCSS package.\nYou can add them in your web page using the following code:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'<link rel="preconnect" href="https://fonts.googleapis.com" />\n<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />\n<link\n  href="https://fonts.googleapis.com/css2?family=Fira+Code&family=Nunito:wght@400;600;700&display=swap"\n  rel="stylesheet"\n/>\n')),(0,o.kt)("p",null,"or import it in your CSS file:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-css",metastring:'title="style.css"',title:'"style.css"'},'@import url("https://fonts.googleapis.com/css2?family=Fira+Code&family=Nunito:wght@400;600;700&display=swap");\n')),(0,o.kt)("h2",{id:"configuring-typography"},"Configuring typography"),(0,o.kt)("p",null,"Inside the ",(0,o.kt)("inlineCode",{parentName:"p"},"_config.scss")," there is a section for typography configuration."),(0,o.kt)("h3",{id:"font-size"},"Font size"),(0,o.kt)("p",null,"FlatifyCSS set the main font size as the ",(0,o.kt)("inlineCode",{parentName:"p"},":root")," property, but it depends on the screen size. So there are two variables to set minimum and maximum font sizes inside ",(0,o.kt)("inlineCode",{parentName:"p"},"_config.scss"),":"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-scss",metastring:'title="_config.scss"',title:'"_config.scss"'},"$MIN_FONT_SIZE: 14; // must be without unit\n$MAX_FONT_SIZE: 16; // must be without unit\n")),(0,o.kt)("p",null,"Based on this fluid font size you can use the ",(0,o.kt)("inlineCode",{parentName:"p"},"em")," unit to have the responsive font size and elements, also using ",(0,o.kt)("inlineCode",{parentName:"p"},"em")," as a unit for elements property gives you better control of the element size, you do not have to change every property to change the element size, just change the ",(0,o.kt)("inlineCode",{parentName:"p"},"font-size")," property for the element wrapper, this is how ",(0,o.kt)("a",{parentName:"p",href:"/docs/helpers/size-setters"},"size setter helper classes")," work."),(0,o.kt)("h3",{id:"font-family"},"Font family"),(0,o.kt)("p",null,"There are Sass variables to change the font family for different elements:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-scss",metastring:'title="_config.scss"',title:'"_config.scss"'},'$PRIMARY_FONT_FAMILY: "Nunito", sans-serif;\n$HEADING_FONT_FAMILY: $PRIMARY_FONT_FAMILY;\n$CODE_FONT_FAMILY: "Fira Code", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;\n')),(0,o.kt)("p",null,"you can also change them as CSS variables:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-css",metastring:'title="style.css"',title:'"style.css"'},'--flatify__primary-font-family: "Nunito", sans-serif;\n--flatify__heading-font-family: var(--flatify__primary-font-family);\n--flatify__code-font-family: "Fira Code", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;\n')),(0,o.kt)("h3",{id:"font-size-1"},"Font size"),(0,o.kt)("p",null,"There are ",(0,o.kt)("a",{parentName:"p",href:"/docs/helpers/size-setters"},"helper classes")," to change the size of elements, they change the font size based on their size, you can change them to your own sizes:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-scss",metastring:'title="_config.scss"',title:'"_config.scss"'},"$FONT_SIZE_LIST: (\n  xs: 0.75em,\n  sm: 0.9em,\n  md: 1em,\n  lg: 1.25em,\n  2x: 1.5em,\n  3x: 2.2em,\n  4x: 2.5em,\n  5x: 3.14em,\n);\n")),(0,o.kt)("h3",{id:"font-weight"},"Font weight"),(0,o.kt)("p",null,"You can change default font weights based on the typeface your are using:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-scss",metastring:'title="_config.scss"',title:'"_config.scss"'},"$MEDIUM_FONT_WEIGHT: 600;\n$BOLD_FONT_WEIGHT: 700;\n$EXTRA_BOLD_FONT_WEIGHT: 900;\n$HEADING_FONT_WEIGHT: bold;\n")),(0,o.kt)("p",null,"or change their CSS variables:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-css",metastring:'title="style.css"',title:'"style.css"'},"--flatify__medium-font-weight: 600;\n--flatify__bold-font-weight: 700;\n--flatify__extra-bold-font-weight: 900;\n--flatify__heading-font-weight: bold;\n")),(0,o.kt)("h3",{id:"line-height"},"Line height"),(0,o.kt)("p",null,"Based on the element line height will be different, you can default line heights with these variables:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-scss",metastring:'title="_config.scss"',title:'"_config.scss"'},"$BASE_LINE_HEIGHT: 1.5;\n$SMALL_LINE_HEIGHT: 1.2;\n$LARGE_LINE_HEIGHT: 1.8;\n")),(0,o.kt)("p",null,"or change their CSS variables:"),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre",className:"language-css",metastring:'title="style.css"',title:'"style.css"'},"--flatify__base-line-height: 1.5;\n--flatify__small-line-height: 1.2;\n--flatify__large-line-height: 1.8;\n")))}u.isMDXComponent=!0}}]);