Created
October 25, 2020 23:31
-
-
Save ricealexander/44de81b07f41f5e05980ba88cf1993de to your computer and use it in GitHub Desktop.
Displays all font weight/size combinations to assist in finding optimal fonts to include
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| display: grid; | |
| grid-template-columns: repeat(9, 1fr); | |
| grid-column-gap: 1.5rem; | |
| } | |
| h3 { | |
| font-family: inherit; | |
| font-size: inherit; | |
| font-weight: inherit; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Font Combinations</title> | |
| <link rel="stylesheet" href="https://use.typekit.net/ajm6zgq.css"> | |
| <link rel="stylesheet" href="font-combinations.css"> | |
| <script src="font-combinations.js" defer> | |
| </head> | |
| <body> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const font = { | |
| name: 'Utopia Std', | |
| family: 'utopia-std', | |
| } | |
| const weights = [ | |
| 100, 200, 300, | |
| 400, 500, 600, | |
| 700, 800, 900, | |
| ] | |
| const sizes = [ | |
| 10, 11, 12, 13, 14, | |
| 15, 16, 17, 18, 19, | |
| 20, 21, 22, 23, 24, | |
| 25, 26, 27, 28, 29, | |
| 30, 31, 32, 33, 34, | |
| ] | |
| const documentTitle = document.querySelector('title') | |
| documentTitle.innerText = ( | |
| `Font Combinations` + | |
| ` | ${font.name} ${sizes[0]}-${sizes[sizes.length - 1]}px` + | |
| `; ${weights[0]}-${weights[weights.length - 1]}w` | |
| ) | |
| for (const size of sizes) { | |
| for (const weight of weights) { | |
| document.body.insertAdjacentHTML('beforeend', ` | |
| <section style=" | |
| font-family: '${font.family}'; | |
| font-size: ${size}px; | |
| font-weight: ${weight}" | |
| > | |
| <h3>${font.name} ${size}px ${weight}w</h3> | |
| <p>Jinxed wizards pluck ivy from the big quilt.</p> | |
| </section> | |
| `) | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment