diff --git a/css/lists.css b/css/lists.css index ad865fde..bc3f1d33 100644 --- a/css/lists.css +++ b/css/lists.css @@ -111,6 +111,7 @@ grid-area: h2; padding: .25rem .5rem; text-transform: uppercase; + font-family: var(--font-family); font-size: 1.5rem; color: var(--color-primary); border-radius: 1rem 1rem 0 0; diff --git a/css/main.css b/css/main.css index 7e7dd561..a0bb330f 100644 --- a/css/main.css +++ b/css/main.css @@ -1,7 +1,15 @@ +@font-face { + font-family: "Peritel"; + src: + url("/fonts/Peritel/Peritel-Regular.woff2") format("woff2"), + url("/fonts/Peritel/Peritel-Regular.otf") format("opentype"); +} + :root { color-scheme: light dark; --font-family: 'Atkinson Hyperlegible Next', sans-serif; + --font-family-headers: 'Peritel', 'Atkinson Hyperlegible Next', sans-serif; --font-family-code: 'Atkinson Hyperlegible Mono', monospace; --color-dark: #2e303e; @@ -95,11 +103,13 @@ main { h1, h2, h3, h4, h5, h6 { line-height: 1.25; color: var(--color-teal); + font-family: var(--font-family-headers); + letter-spacing: 0.1rem; } h1 { margin-top: 3rem; - font-size: 3.5rem; + font-size: 3.7rem; text-align: center; } @@ -109,23 +119,23 @@ h2, h3, h4, h5, h6 { h2 { margin-top: 2rem; - font-size: 2.2rem; + font-size: 2.35rem; } h3 { margin-top: 1.5rem; - font-size: 1.6rem; + font-size: 1.7rem; } @media (max-width: 650px) { - h1 { font-size: 2.8rem; } - h2 { font-size: 1.8rem; } - h3 { font-size: 1.35rem; } + h1 { font-size: 2.95rem; } + h2 { font-size: 1.9rem; } + h3 { font-size: 1.4rem; } } h4, h5, h6 { margin-top: 1rem; - font-size: 1.2rem; + font-size: 1.25rem; } /* Images */ diff --git a/eleventy.config.js b/eleventy.config.js index 736723de..e7bc8ed0 100644 --- a/eleventy.config.js +++ b/eleventy.config.js @@ -72,6 +72,7 @@ export default async function(eleventyConfig) { /* Passthrough */ eleventyConfig .addPassthroughCopy("favicon.ico") + .addPassthroughCopy("fonts") .addPassthroughCopy("robots.txt"); /* Plugins */ diff --git a/fonts/Peritel/LICENSE.md b/fonts/Peritel/LICENSE.md new file mode 100644 index 00000000..759ff09d --- /dev/null +++ b/fonts/Peritel/LICENSE.md @@ -0,0 +1,33 @@ +# End User License Agreement (EULA) + +This End User License Agreement is a legal agreement between the licensee (you), and the author of this font, Christopher Kirk-Nielsen. + +You are granted a perpetual, non-exclusive license to use the font with your purchase. + +## By downloading or purchasing this font, you agree to the following terms: + +**For use on a website** +Use on any website owned or under the licensee's control, no pageview limits. + +**For use in an app** +App embed allowed for 1 app. Another app = another license. + +**Distribution** +The font may not be redistributed. + +**Personal modification** +The font may be modified for personal use, but cannot be redistributed. + +**Do not use the font for hateful purposes** +The font is not allowed to be used in any material promoting hate speech of any kind, including but not limited to: racism, xenophobia, homophobia, sexism, or other types of discrimination. + +**Do not use the font with AI** +The font is not allowed to be used in, or in training of, AI/LLMs. + +**Use at your own risk** +Any usage of the fonts are at the licensee's own risk. + +For ebooks and other commercial use, or any other specific needs, email me to figure something out: chriskirknielsen+fonts[at]gmail.com + +Thank you very much for the support! +Christopher Kirk-Nielsen (https://chriskirknielsen.com/fonts/) diff --git a/fonts/Peritel/Peritel-Regular.otf b/fonts/Peritel/Peritel-Regular.otf new file mode 100644 index 00000000..290d0502 Binary files /dev/null and b/fonts/Peritel/Peritel-Regular.otf differ diff --git a/fonts/Peritel/Peritel-Regular.woff2 b/fonts/Peritel/Peritel-Regular.woff2 new file mode 100644 index 00000000..369b6bd3 Binary files /dev/null and b/fonts/Peritel/Peritel-Regular.woff2 differ diff --git a/src/pages/colophon.md b/src/pages/colophon.md index f282e4b6..2bd87bd6 100644 --- a/src/pages/colophon.md +++ b/src/pages/colophon.md @@ -6,7 +6,7 @@ This is v2 of my personal website, built with [{{ eleventy.generator }}](https:/ v1 of this site began in 2022 and was based on [Millennial](https://lenpaul.github.io/Millennial/), a minimalist Jekyll theme for running a blog or publication by Paul Le. -The fonts are [Atkinson Hyperlegible Next and Atkinson Hyperlegible Mono](https://brailleinstitute.org/freefont) for standard text and monospace respectively, specifically designed for low-vision readers to improve character recognition. Also they look neat :) +The header font is [Peritel by Christopher Kirk-Nielsen](https://chriskirknielsen.com/fonts/peritel/). I'm currently trying it on for size, so let me know if you like it - or hate it! The body fonts (and the all-caps headers on the post list pages) are [Atkinson Hyperlegible Next and Atkinson Hyperlegible Mono](https://brailleinstitute.org/freefont) for standard text and monospace respectively, specifically designed for low-vision readers to improve character recognition. Also they look neat :) The search bar is powered by [Pagefind](https://pagefind.app/). I was guided by [Robb Knight's walkthrough](https://rknight.me/blog/using-pagefind-with-eleventy-for-search/) when setting it up. diff --git a/src/pages/style.md b/src/pages/style.md index 09e2c9f0..3c3403eb 100644 --- a/src/pages/style.md +++ b/src/pages/style.md @@ -110,6 +110,8 @@ Code blocks can have syntax highlighting:

Hello, world

``` +### You can even write `headers in monospace` + ## Tables Tables in Markdown are kind of annoying to format. You use the pipe (`|`) character as well as dashes. diff --git a/src/posts/2026/2026-08-05-visual-site-builders-accessibility.md b/src/posts/2026/2026-08-05-visual-site-builders-accessibility.md index ddb335eb..49714c7b 100644 --- a/src/posts/2026/2026-08-05-visual-site-builders-accessibility.md +++ b/src/posts/2026/2026-08-05-visual-site-builders-accessibility.md @@ -71,6 +71,8 @@ Want to just see the final ranking? Pop down to the [summary](#summary). [Framer](https://framer.com) is a full-featured site designer with a built-in CMS. It offers generative AI features. +I have written [further thoughts on Framer accessibility](/framer-accessibility) as part of a more in-depth review. + | Factor | Notes | Score | |---|---|---| | Semantic HTML | Tags can be set per-element in the "Accessibility" section of the right-hand pane. Takes work, but is doable with care. | 2 |