1 line
4.6 KiB
JavaScript
1 line
4.6 KiB
JavaScript
"use strict";(self.webpackChunklogos_docs_template=self.webpackChunklogos_docs_template||[]).push([[5481],{47349:(e,t,n)=>{n.r(t),n.d(t,{assets:()=>d,contentTitle:()=>s,default:()=>c,frontMatter:()=>r,metadata:()=>l,toc:()=>p});var a=n(87462),o=(n(67294),n(3905)),i=n(72797);const r={title:"Web Environments",sidebar_position:1},s="Web Environments",l={unversionedId:"visual-language/typography/web-environment",id:"visual-language/typography/web-environment",title:"Web Environments",description:"In our web environments, we lean toward a concept inspired by the decentralized mental model. Instead of imposing a singular font choice, we rely on the default web fonts present on users' browsers and systems. Our strategy offers key advantages:",source:"@site/docs/visual-language/typography/web-environment.mdx",sourceDirName:"visual-language/typography",slug:"/visual-language/typography/web-environment",permalink:"/visual-language/typography/web-environment",draft:!1,tags:[],version:"current",sidebarPosition:1,frontMatter:{title:"Web Environments",sidebar_position:1},sidebar:"main",previous:{title:"Overview",permalink:"/visual-language/typography/overview"},next:{title:"Non-web environments",permalink:"/visual-language/typography/non-web-environment"}},d={},p=[{value:"Examples",id:"examples",level:2},{value:"LSD type stack",id:"lsd-type-stack",level:3}],m={toc:p};function c(e){let{components:t,...n}=e;return(0,o.kt)("wrapper",(0,a.Z)({},m,n,{components:t,mdxType:"MDXLayout"}),(0,o.kt)("h1",{id:"web-environments"},"Web Environments"),(0,o.kt)("p",null,"In our web environments, we lean toward a concept inspired by the decentralized mental model. Instead of imposing a singular font choice, we rely on the default web fonts present on users' browsers and systems. Our strategy offers key advantages:"),(0,o.kt)("ol",null,(0,o.kt)("li",{parentName:"ol"},(0,o.kt)("strong",{parentName:"li"},"Accessibility"),": We design in a way that works harmoniously with whatever default font a user's system provides. Our commitment is to ensure that our design retains its integrity and functionality regardless of the specific default font. By not making an overriding decision, we respect the inherent variability and trust that our content will be consistently presented and accessed."),(0,o.kt)("li",{parentName:"ol"},(0,o.kt)("strong",{parentName:"li"},"Optimization"),": Bypassing the need for additional font downloads ensures quicker page load times, crucial for those with limited internet bandwidth or in challenging network conditions.")),(0,o.kt)("p",null,"By specifying the font category (serif, sans-serif, or mono) in your CSS, the user's operating system is allowed to determine the best font choice. This approach also guarantees extensive language script support."),(0,o.kt)("pre",null,(0,o.kt)("code",{parentName:"pre"},"/**\n * System font stack for sans-serif fonts\n *\n * `-apple-system` ('San Francisco' font) \u2013 Support Safari 9+ macOS and iOS, Firefox macOS\n * `BlinkMacSystemFont` ('San Francisco' font) \u2013 Chrome 48+ macOS and iOS\n * `Segoe UI` \u2013 Windows Vista & newer\n * `Roboto` \u2013 Android 4.0+\n * `Lato` \u2013 Wikimedia Design choice, OFL licensed\n * `Helvetica, Arial, sans-serif` \u2013 (Generic) Web fallback\n * Note that standard `system-ui` value has resulted in unresolved side-effects in certain OS/language combinations as of now and is therefore not included.\n */\n\nfont-family: Serif\n")),(0,o.kt)("table",null,(0,o.kt)("thead",{parentName:"table"},(0,o.kt)("tr",{parentName:"thead"},(0,o.kt)("th",{parentName:"tr",align:null},"Font Type"),(0,o.kt)("th",{parentName:"tr",align:null},"Suggested Default Font Family"))),(0,o.kt)("tbody",{parentName:"table"},(0,o.kt)("tr",{parentName:"tbody"},(0,o.kt)("td",{parentName:"tr",align:null},"Mono"),(0,o.kt)("td",{parentName:"tr",align:null},"Consolas (Windows), Monaco (macOS), DejaVu Sans Mono (Linux)")),(0,o.kt)("tr",{parentName:"tbody"},(0,o.kt)("td",{parentName:"tr",align:null},"Serif"),(0,o.kt)("td",{parentName:"tr",align:null},"Georgia (Windows), Times New Roman (macOS), DejaVu Serif (Linux)")),(0,o.kt)("tr",{parentName:"tbody"},(0,o.kt)("td",{parentName:"tr",align:null},"Sans-Serif"),(0,o.kt)("td",{parentName:"tr",align:null},"Segoe UI (Windows), Helvetica (macOS), DejaVu Sans (Linux)")))),(0,o.kt)("h2",{id:"examples"},"Examples"),(0,o.kt)("h3",{id:"lsd-type-stack"},"LSD type stack"),(0,o.kt)(i.StorybookDemo,{name:"Typography",docId:"themeprovider--docs",storybookUrl:"https://main--63e4f71c39dc65c5c703c1e8.chromatic.com",storyId:"themeprovider--typography",globalTypes:{},componentProperties:[],globalControls:["themeFont"],mdxType:"StorybookDemo"}))}c.isMDXComponent=!0}}]); |