{"id":42186620,"url":"https://github.com/paceaux/typography-baseline.scss","last_synced_at":"2026-01-26T22:27:45.933Z","repository":{"id":57384153,"uuid":"358289446","full_name":"paceaux/typography-baseline.scss","owner":"paceaux","description":" A good start to your CSS typography that covers all the semantic nooks and crannies ","archived":false,"fork":false,"pushed_at":"2023-02-17T23:03:44.000Z","size":69,"stargazers_count":4,"open_issues_count":4,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-23T10:00:08.785Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/paceaux.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-04-15T14:30:58.000Z","updated_at":"2024-10-24T20:39:43.000Z","dependencies_parsed_at":"2022-09-14T00:52:45.655Z","dependency_job_id":null,"html_url":"https://github.com/paceaux/typography-baseline.scss","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/paceaux/typography-baseline.scss","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paceaux%2Ftypography-baseline.scss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paceaux%2Ftypography-baseline.scss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paceaux%2Ftypography-baseline.scss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paceaux%2Ftypography-baseline.scss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/paceaux","download_url":"https://codeload.github.com/paceaux/typography-baseline.scss/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/paceaux%2Ftypography-baseline.scss/sbom","scorecard":{"id":717325,"data":{"date":"2025-08-11","repo":{"name":"github.com/paceaux/typography-baseline.scss","commit":"c80d2e0316de55c898b639a4d2c8f10504052e35"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3,"checks":[{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Code-Review","score":0,"reason":"Found 0/30 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE.md:0","Info: FSF or OSI recognized license: MIT License: LICENSE.md:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}}]},"last_synced_at":"2025-08-22T10:06:11.789Z","repository_id":57384153,"created_at":"2025-08-22T10:06:11.789Z","updated_at":"2025-08-22T10:06:11.789Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28789738,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-26T21:49:50.245Z","status":"ssl_error","status_checked_at":"2026-01-26T21:48:29.455Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-01-26T22:27:45.752Z","updated_at":"2026-01-26T22:27:45.910Z","avatar_url":"https://github.com/paceaux.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Typography-baseline.scss\n\u003e A good start to your SCSS typography that covers all the semantic nooks and crannies\n\n[![License][license-image]][license-url] [![Downloads][downloads-image]][downloads-url]\n\n**NPM**\n```\nnpm install --save typography-baseline.scss\n```\n\nOr, if you wanted the [CSS Version](https://github.com/paceaux/typography-baseline)\n\n```\nnpm install --save typography-baseline.css\n```\n\n## What are some SCSS specific features?\n### Sassified Variables\nA core feature of the typography baseline is that it used CSS variables (AKA CSS custom properties). This has all of the same variable names, but in SCSS/SASS form. \n\n```\n$colorNeutralDarker: rgb(55,55,55);\n$colorNeutralDark: rgb(110,110,110);\n$colorNeutral: rgb(165,165,165);\n$colorNeutralLight: rgb(192.5,192.5,192.5);\n$colorNeutralLighter: rgb(220,220,220);\n$colorCool: rgb(110,165,220);\n$colorCoolDarker: rgb(110,165,193);\n```\n### The Typography Baseline broken into sections that can be turned off:\n\nThe baseline contains the following sections:\n\n* `document` : `:root` and `html`\n* `headings` : All them `h` \n* `lists`  : `ul`, `ol`, and the too cool `dl`\n* `blocks` : Your `hr`, `p`, and the `blockquote`\n* `contentFlow` : `em` through `u`, all the way through `mark` and `strike`, too. \n* `code` : `code`, `kbd`, and our pals `var`, `samp`, and `data`\n* `ruby` : Destination unknown, `ruby`, `rtc` even some `bdo`\n* `links` : All them `a` and pseudo class shenanigans\n* `table` : `table`, `caption`, and some `th` and `td`\n\n### Ability to turn off custom properties\nIf you don't want CSS Variables, that's fine. \n\n```\n@include typographyBaseline($exclude: cssVariables);\n```\n\n### Ability to output only certain sections\nYou can give either a specific section, or a list of sections. \n\n**This will turn off CSS variables:**\n\n```\n@include typographyBaseline($include: (document, headings, lists, blocks))\n```\n\nBut you can turn on specific sections _with_ CSS variables by adding it to the list of arguments:\n\n```\n@include typographyBaseline($include: (document, headings, lists, cssVariables))\n```\n\n## Mid-Readme shoutout:\nThis is modelled on the [scss port of Normalize](https://github.com/JohnAlbin/normalize-scss). Big thanks to John Albin for his work on that because that gave this project a safe, well-tested foundation to start with.  \n\n## What does the typography-baseline do?\n### It gives you a good start\nBefore you start the layout of a web site or web application, and before you dive into applying to brand, you need something to which you should apply your brand. This is that thing. \n\nThe easiest place to start in a design is with the typography. This makes it easy to do that. \n\n### It covers all your semantic markup\nDriven by the [W3C spec](https://www.w3.org/TR/html5/) this addresses almost every semantic element that will wrap text and makes sure that everything looks like _something_. \n\nThe \u003csamp\u003etest.html\u003c/samp\u003e file  uses each and every element according to its semantic definition, too. So you have a miniature guide to semantics built in.\n\nThis saves you from a scare down the road when someone wants to output the `\u003ckbd\u003e` element, use `\u003cdfn\u003e`, or try some other obscure element. \n\n### Gives you a \"no-design\" design\nFor those times where you need just a bit more than a [Normalize](http://necolas.github.io/normalize.css/), but way less than [Bootstrap](https://getbootstrap.com/), this gets you there. \n\nThis is a fairly unopinionated approach to making sure that the text has a decent font family, decent spacing, and decent visual appeal. \n\n## Browser Support\n* Firefox\n* Chrome\n* Edge\n* IE10*\n* Safari\n* Opera\n\n \u003e*IE10 doesn't support CSS Variables, but nothing will break in IE10 if that's the case. \n\n## Usage\n\n## Usage\nWhile this is relatively unopinionated, there are a few \"opinions\" to consider:\n\n* [`em` for for `font-size`](https://css-tricks.com/rems-ems/)\n* [a unitless `line-height`](https://meyerweb.com/eric/thoughts/2006/02/08/unitless-line-heights/)\n* `rem` for left/right spacing\n* [text-spacing based on the golden ratio ](https://pearsonified.com/golden-ratio-typography-intro/)(.618 / 1.618)\n\n### Fitting it into a CSS architecture\nThis would come after a reset / [normalize](https://necolas.github.io/normalize.css/) and before you set baseline styles for forms or tables. If you're a fan of [ITCSS](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/), this is in the Elements layer.\n\nIf you were to load this into a [CSS Layer](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer), you would want it to come very early so that you could over ride it. \n\nWherever you place it, place it _early_ in the cascade so that other things can use and/or  re-declare the variables. \n\n#### Using it in a project\n1. Add the baseline\n    - import into your project with NPM  `@import typography-baseline.css`\n    - \u003ckbd\u003ecopy\u003c/kbd\u003e + \u003ckbd\u003epaste\u003c/kbd\u003e this project's `baseline.css`\n2. Add your own `typography.css` file that comes after the baseline, but before you style anything else.\n3. Add something like `html {}` or `body {}`.\n4. Modify the variables _in those rulesets_.\n5. Then add your own element styles. \n\n**Don't modify the typography-baseline directly. Modify the variables it sets with new rulesets.**\n\n### Modifying without Swearing or Heavy Drinking\nOne of the really annoying things about other CSS frameworks (cough cough \u003csmall\u003eBootstrap\u003c/small\u003e) is that you mostly have to write new CSS to overwrite the existing styles. Often that means raising specificity, which is really stinking annoying. This is designed to avoid that by using [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)\n\n\nThe typography baseline sets all of the CSS variables on the `:root`. As CSS variables are subject to the cascade, you can override _any_ variable at any time by changing its value \u0026mdash; on the same selector *or* a more specific one.\n\nYou can import this into your current CSS setup, and overwrite all the variables by setting new ones on the `html` element. \n\nSo if you want the `--baseLinkColor` to be different, you can write the following in your own stylesheet:\n\n```\nhtml {\n    --baseLinkColor: #c0ffee\n}\n```\n\n**No raising specificity. Just changing a variable.**\n\nIf you want to theme a special area of the site, or even a particular widget, it's just:\n\n```\n.theme {\n    --baseLinkColor: #c0ffee\n}\n```\n\n\n#### Color Palette\nColors are derivatives of a base value of 55. All of the neutral colors are multipliers of rgb(55,55,55). Even the non-neutral colors are close-ish to that. \n\n```\n    --colorNeutralDarker: rgb(55,55,55);                  /* base       */\n    --colorNeutralDark: rgb(110,110,110);                 /* base * 2:  */\n    --colorNeutral: rgb(165,165,165);                     /* base * 3:  */\n    --colorNeutralLight: rgb(192.5,192.5,192.5);          /* base * 3.5 */\n    --colorNeutralLighter: rgb(220,220,220);              /* base * 4:  */\n```\nColor-naming convention follows a pattern established [here](https://codepen.io/paceaux/pen/XdxQza). A big huge and heavy thanks to Sarah Braumiller for suggesting that convention years ago. \n\n[The great big idea](https://blog.frankmtaylor.com/2021/10/21/a-small-guide-for-naming-stuff-in-front-end-code/#css-pre-processor-naming-scss-sass-less-stylus) is that these color name tells you a meaningful aspect of the value, not the value itself. That way it feels safer changing it. \n\n#### Colors\nAll of the color variables are abstractions from the color palette. This is so you can change these colors without having to touch your neutral palette. \n\n```\n    --baseTextColor: var(--colorNeutralDarker);\n    --baseEditorialTextColor: var(--colorNeutralDark);\n    --baseLinkColor: var(--colorCool);\n    --baseLinkColorHover: var(--colorCoolDarker);\n    --baseInlineBorderColor: var(--colorNeutralLight);\n```\n\n#### Line Heights\nThe `--baseLineHeight` is applied to body copy, and the `--smallLineHeight` is used on titles:\n\n```    \n    --baseLineHeight: 1.618;\n    --smallLineHeight: 1.2;\n```\n\n#### Text Sizes\nYou have a minimum of 6 text sizes in two categories: `--\u003cn\u003eTextSize` and `--\u003cn\u003eTitleSize`. You have a \"base\" and then superlatives or diminutives to describe the deviation from that base. e.g.:\n\n\n```\n    --biggestTextSize:  1.3em;\n    --biggerTextSize: 1.2em;\n    --bigTextSize: 1.1em;\n    --baseTextSize: 1em; /*What all ordinary body copy will be*/\n    --smallTextSize: .8em;\n    --smallerTextSize: .75em;\n    --smallestTextSize: .618em;\n```\n\nFor _titles_ you have only _six_ sizes, instead of seven. That's because each title size corresponds to an `\u003ch/\u003e` element. \n\nYou may also notice that title sizes overlap with base text sizes. This is intentional! You have the flexibility to have your smaller headings be the same as larger text, or to create new title sizes for your headings that won't overlap with the text. \n\n\n```\n    --biggestTitleSize: 2.617924em; /* (16 x 1.618) x 1.618 */\n    --bigTitleSize: 1.618em;\n    --baseTitleSize: 1.5em;\n    --smallTitleSize: var(--biggestTextSize);\n    --smallerTitleSize: var(--biggerTextSize);\n    --smallestTitleSize: var(--bigTextSize);\n```\n\nYou may notice that all of the font-sizes are in `em`. This is _intentional_ so that your headlines can scale easily relative to the font-size of their containers. That means **you should be careful about how many times you change `font-size`**. \n\nIf you think you'll be changing `font-size` _a lot_, you may want to set these in `rem` instead, to avoid FOUC (Flash Of Unstyled Content). \n\n#### Spacing\nSpacing is done with the golden ratio (.618 / 1.618)\n`rem` is used for horizontal spacing so that text remains aligned, regardless of size. `em` is used for vertical spacing so that bigger text gets more room to breathe. \nYou have two spacings to start with. \n\n```\n    --bigSpacingHorizontal: 1.618rem;\n    --baseSpacingHorizontal: .618rem;\n\n    --bigSpacingVertical: 1.618em;\n    --baseSpacingVertical: .618em;\n```\n\n#### Font Modifications\n\n##### Font families\nYou have three font families to choose from. `--baseFontFamily` is applied to the html element. \n\n```\n    --baseFontFamily: Georgia, 'Times New Roman', serif;\n    --titleFontFamily: Helvetica, Arial, sans-serif;\n    --codeFontFamily: monospace;\n```\n\n##### Font Weights\nYou have three font weights to choose from.\n\n```\n    --lightestFontWeight: 100;\n    --baseFontWeight: 400;\n    --heaviestFontWeight: 700;\n```\n\n While the browser technically has nine font-weights, you're only able to add another four (for a total of seven) by following the pattern of adding \"er\" or \"est\". If you *really* need nine font-weights, consider naming the ones at the heavy end `--ultraHeavy` and `--ultraHeaviest`. \n \n *Just make sure you've added those typefaces!*\n\n ```\n    --lightFontWeight: 300;\n    --lighterFontWeight: 200;\n    --heavyFontWeight: 500;\n    --heavierFontWeight: 600\n ```\n\nIf you add more font-weights, remember that [the browser will synthesize the font weights unless proper font-families with those weights are provided](https://w3c.github.io/csswg-drafts/css-fonts-4/#missing-weights)\u0026mdash; unless you are using a [variable font ](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#variable_fonts). **Add more font-weights carefully**. \n\n##### Font Styles\nYou have three font styles to use. These are called `fontVoice` because it's important for you to imagine how a person might read the text _out loud_. If you think someone might enunciate or pronounce it differently, that's \"italic\" (what you might use for `\u003cem\u003e` or `\u003ci\u003e`). The browser will actually look for an italic font. \n\nIf you just want to show slanted text, that's \"oblique\". The browser is just going to angle the font. \n\n```\n    --shiftedFontVoice: oblique 15deg;\n    --baseFontVoice: normal;\n    --alternateFontVoice: italic;\n```\n\n#### Quote Styles\nOne of the very few strong opinions in this baseline is the look and feel of a blockquote. However, you can set the  quotes that come before and after the `\u003cblockquote\u003e` and `\u003cq\u003e` elements. This is useful for internationalization; you have one place to make sure all quote symbols are updated!\n\n```\n    --baseTextQuotes: \"\\201C\"\"\\201D\"\"\\2018\"\"\\2019\"; \n```\n\n`\u003cblockquote\u003e` and `\u003csamp\u003e` both share a thick left \"quote border\":\n\n```\n    --baseQuoteBorder: 10px solid var(--colorNeutralLighter);\n    --smallQuoteBorder: 5px solid var(--colorNeutralLight);\n```\n\n## Conventions and Standards\n\n### Style guide\nThe CSS follows the guidelines established [here](https://gist.github.com/paceaux/f31e278613ab29b74a412a7eb5046422).\n\n### Naming Conventions\nCSS Variable names follow a convention established [here](https://blog.frankmtaylor.com/2021/10/21/a-small-guide-for-naming-stuff-in-front-end-code/).\n\n\n[license-image]: http://img.shields.io/npm/l/typography-baseline.scss.svg\n[license-url]: LICENSE\n[downloads-image]: http://img.shields.io/npm/dm/typography-baseline.scss.svg\n[downloads-url]: http://npm-stat.com/charts.html?package=typography-baseline.scss\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpaceaux%2Ftypography-baseline.scss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpaceaux%2Ftypography-baseline.scss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpaceaux%2Ftypography-baseline.scss/lists"}