Skip to content

Commit 7133943

Browse files
committed
Index page updates
1 parent 5ce6eef commit 7133943

2 files changed

Lines changed: 99 additions & 41 deletions

File tree

index.html

Lines changed: 89 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,15 @@
33
<head>
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
6-
<title>EasyType Neuro-inclusive fonts for calmer, clearer reading</title>
6+
<title>EasyType - Neuro-inclusive fonts for calmer, clearer reading</title>
77
<meta name="description" content="EasyType is a neuro-inclusive type family designed to make reading easier for everyone, especially people with ADHD, dyslexia, or sensory processing differences.">
88
<meta name="author" content="Andrzej Marczewski">
9-
<meta property="og:title" content="EasyType Fonts for Calmer Reading">
9+
<meta property="og:title" content="EasyType - Fonts for Calmer Reading">
1010
<meta property="og:description" content="Built with evidence from neuroscience and cognitive psychology, EasyType helps readers focus and reduce visual stress.">
1111
<meta property="og:url" content="https://www.marczewski.me.uk/easytype">
1212
<meta property="og:image" content="assets/web-app-manifest-512x512.png">
1313
<meta name="twitter:card" content="summary_large_image">
14-
<meta name="twitter:title" content="EasyType Neuro-inclusive fonts for calmer, clearer reading">
14+
<meta name="twitter:title" content="EasyType - Neuro-inclusive fonts for calmer, clearer reading">
1515
<meta name="twitter:description" content="EasyType is a neuro-inclusive type family designed to make reading easier for everyone.">
1616
<meta name="twitter:image" content="assets/web-app-manifest-512x512.png">
1717
<link rel="apple-touch-icon" sizes="180x180" href="assets/apple-touch-icon.png">
@@ -32,85 +32,143 @@
3232
--brand-dark: #0F5257;
3333
--radius: 14px;
3434
--shadow: 0 8px 24px rgba(0,0,0,.06);
35+
--gap: clamp(1rem, 2vw, 1.5rem);
36+
}
37+
* {
38+
box-sizing: border-box;
3539
}
3640
body {
3741
margin: 0;
3842
background: var(--bg);
3943
color: var(--text);
4044
font-family: 'EasyType Sans', system-ui, -apple-system, sans-serif;
4145
line-height: 1.6;
46+
font-size: 16px;
4247
}
4348
header {
4449
text-align: center;
45-
padding: 2.5rem 1rem 1.5rem;
46-
background: linear-gradient(120deg,#f4ffff,#ffffff);
50+
padding: 2rem 1.25rem 1.75rem;
51+
background: linear-gradient(135deg,#f4ffff,#ffffff);
4752
border-bottom: 1px solid #e8e8e8;
4853
}
49-
header img { width: 180px; height: auto; }
54+
header img {
55+
width: min(160px, 50vw);
56+
height: auto;
57+
}
5058
header h1 {
51-
margin: .5rem 0 0;
52-
font-size: 2rem;
59+
margin: .65rem 0 0;
60+
font-size: clamp(1.9rem, 6vw, 2.5rem);
5361
font-weight: 700;
5462
color: var(--brand-dark);
5563
}
5664
header p.intro {
5765
max-width: 60ch;
58-
margin: .75rem auto 1.25rem;
66+
margin: .9rem auto 1.5rem;
5967
color: var(--muted);
60-
font-size: 1.05rem;
68+
font-size: 1rem;
69+
padding: 0 .5rem;
6170
}
6271
.cta {
72+
display: inline-flex;
73+
justify-content: center;
74+
align-items: center;
75+
min-height: 44px;
6376
background: var(--brand);
6477
color: white;
6578
text-decoration: none;
66-
padding: .7rem 1.4rem;
79+
padding: .65rem 1.4rem;
6780
border-radius: var(--radius);
6881
font-weight: 600;
6982
box-shadow: 0 4px 12px rgba(0,0,0,.1);
7083
}
71-
.wrap { max-width: 1100px; margin: 0 auto; padding: 1.5rem; }
84+
.wrap {
85+
max-width: 1100px;
86+
margin: 0 auto;
87+
padding: 1.5rem 1.25rem 2.5rem;
88+
}
7289
.grid {
7390
display: grid;
74-
grid-template-columns: repeat(auto-fit,minmax(320px,1fr));
75-
gap: 1.5rem;
76-
margin: 2rem 0;
91+
grid-template-columns: 1fr;
92+
gap: var(--gap);
93+
margin: 1.75rem 0;
7794
}
7895
.card {
7996
background: var(--card);
8097
border-radius: var(--radius);
8198
box-shadow: var(--shadow);
82-
padding: 1.25rem 1.5rem;
99+
padding: 1.2rem 1.35rem;
83100
}
84101
.tag {
85102
display:inline-block;
86-
font-size:.75rem;
103+
font-size:.78rem;
87104
background:#eaf8f8;
88105
color:var(--brand-dark);
89106
border-radius:999px;
90-
padding:4px 10px;
91-
margin-bottom:8px;
107+
padding:4px 12px;
108+
margin-bottom:10px;
92109
font-weight:600;
93110
}
94-
h2 { font-size:1.2rem; margin:.4rem 0 .6rem; color:var(--brand-dark);}
111+
h2 {
112+
font-size:1.15rem;
113+
margin:.35rem 0 .55rem;
114+
color:var(--brand-dark);
115+
}
95116
.sample { margin: .75rem 0; }
96117
.small { font-size:.9rem; color:var(--muted); }
97-
ul { margin:.6rem 0 .6rem 1.2rem; line-height:1.6; }
118+
ul { margin:.6rem 0 .6rem 1.1rem; line-height:1.6; }
119+
code {
120+
display:block;
121+
padding:.5rem .75rem;
122+
background:#f4f4f4;
123+
border-radius:var(--radius);
124+
font-size:.9rem;
125+
overflow-wrap:anywhere;
126+
}
98127
footer {
99128
text-align:center;
100129
font-size:.85rem;
101130
color:var(--muted);
102131
margin:3rem 0 1rem;
132+
padding: 0 1rem;
103133
}
104134
footer a { color:var(--brand-dark); text-decoration:none; }
105135
footer a:hover { text-decoration:underline; }
136+
137+
@media (min-width: 600px) {
138+
header {
139+
padding: 2.75rem 2rem 2.25rem;
140+
}
141+
header p.intro {
142+
font-size: 1.05rem;
143+
}
144+
.card {
145+
padding: 1.35rem 1.6rem;
146+
}
147+
}
148+
149+
@media (min-width: 900px) {
150+
header {
151+
padding: 3rem 2.5rem 2.5rem;
152+
}
153+
.grid {
154+
grid-template-columns: repeat(auto-fit,minmax(320px,1fr));
155+
margin: 2.5rem 0;
156+
}
157+
.wrap {
158+
padding: 2rem 1.75rem 3rem;
159+
}
160+
h2 {
161+
font-size: 1.25rem;
162+
}
163+
}
106164
</style>
107165
</head>
108166

109167
<body>
110168
<header>
111169
<img src="assets/icon.png" alt="EasyType logo">
112170
<h1>EasyType</h1>
113-
<p class="intro">A neuro-inclusive type family designed through the lens of cognitive science helping minds stay steady, words stay clear, and reading feel calm.</p>
171+
<p class="intro">A neuro-inclusive type family designed through the lens of cognitive science - helping minds stay steady, words stay clear, and reading feel calm.</p>
114172
<a class="cta" href="#download">Download the fonts</a>
115173
</header>
116174

@@ -127,7 +185,7 @@ <h2>Balanced default</h2>
127185
<div class="tag">EasyType Focus</div>
128186
<h2>For attention and rhythm</h2>
129187
<p class="sample">Spacing and entry anchors guide the eye from word to word, improving reading flow for those with attention variability.</p>
130-
<p class="small">Slightly wider spacing reduces crowding and supports smoother saccades ideal for focus or study modes.</p>
188+
<p class="small">Slightly wider spacing reduces crowding and supports smoother saccades - ideal for focus or study modes.</p>
131189
</article>
132190

133191
<article class="card" data-family="EasyType Dyslexic">
@@ -145,16 +203,16 @@ <h2>Why it was built</h2>
145203
<ul>
146204
<li><strong>Entry anchoring</strong> gives the eye a consistent “starting point” for each word, aiding fixation and reducing scanning fatigue.</li>
147205
<li><strong>Raised x-height</strong> and <strong>increased openness</strong> improve letter recognition and reduce misreads, supported by studies on dyslexic perception of type.</li>
148-
<li><strong>Adaptive spacing</strong> slightly wider letter and word spacing mitigates crowding and supports working-memory pacing.</li>
206+
<li><strong>Adaptive spacing</strong> - slightly wider letter and word spacing - mitigates crowding and supports working-memory pacing.</li>
149207
</ul>
150-
<p>EasyType blends these principles into three variants Sans, Focus, and Dyslexic so designers, educators, and readers can select what feels most comfortable.</p>
208+
<p>EasyType blends these principles into three variants - Sans, Focus, and Dyslexic - so designers, educators, and readers can select what feels most comfortable.</p>
151209
</section>
152210

153211
<section class="grid">
154212
<article class="card" id="download">
155213
<div class="tag">Get EasyType</div>
156214
<h2>Download or embed</h2>
157-
<p>All weights and styles are available under the <a href="https://scripts.sil.org/OFL">SIL Open Font License 1.1</a>. You can use, modify, and redistribute them freely.</p>
215+
<p>All weights and styles are available under the <a href="https://scripts.sil.org/OFL">SIL Open Font Licence 1.1</a>. You can use, modify, and redistribute them freely.</p>
158216
<p><strong>Web embed:</strong></p>
159217
<p><code>&lt;link rel="stylesheet" href="https://daverage.github.io/EasyType/css/easytype.css?v=1.0.0"&gt;</code></p>
160218
<p><strong>Desktop install:</strong> grab the full family as <a href="https://www.marczewski.me.uk/easytype/easytypesans.zip">easytypesans.zip</a> for macOS or Windows.</p>
@@ -164,17 +222,17 @@ <h2>Download or embed</h2>
164222
<div class="tag">Evidence base</div>
165223
<h2>Research that informed EasyType</h2>
166224
<ul>
167-
<li>Pelli D.G., Tillman K.A. (2008) <em>The uncrowded window of object recognition</em>, Nature Neuroscience 11(10).</li>
168-
<li>Rayner K. (1998) <em>Eye movements in reading and information processing</em>, Psychological Bulletin 124(3).</li>
169-
<li>Spinelli D. et al. (2002) <em>Crowding effects on word recognition in dyslexia</em>, Cortex 38(2).</li>
170-
<li>Le Loi J., Whitney C. (2016) <em>Optimal inter-letter spacing for reading</em>, Vision Research 121.</li>
225+
<li>Pelli D.G., Tillman K.A. (2008) - <em>The uncrowded window of object recognition</em>, Nature Neuroscience 11(10).</li>
226+
<li>Rayner K. (1998) - <em>Eye movements in reading and information processing</em>, Psychological Bulletin 124(3).</li>
227+
<li>Spinelli D. et al. (2002) - <em>Crowding effects on word recognition in dyslexia</em>, Cortex 38(2).</li>
228+
<li>Le Loi J., Whitney C. (2016) - <em>Optimal inter-letter spacing for reading</em>, Vision Research 121.</li>
171229
</ul>
172230
<p class="small">EasyType doesn’t “treat” dyslexia or ADHD. It applies evidence-based typographic principles to create calmer, clearer reading experiences for all.</p>
173231
</article>
174232
</section>
175233

176234
<footer>
177-
<p>© 2025 Andrzej Marczewski EasyType Fonts. Licensed under SIL Open Font License 1.1.</p>
235+
<p>© 2025 Andrzej Marczewski - EasyType Fonts. Licenced under SIL Open Font Licence 1.1.</p>
178236
<p><a href="https://github.com/daverage/EasyType">View on GitHub</a></p>
179237
</footer>
180238
</main>

readme.md

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
Here’s a full **README.md** ready for your EasyType GitHub repo.
2-
It explains what the project is, how it’s built, and how it connects to the research written in a human, clear, professional tone.
2+
It explains what the project is, how it’s built, and how it connects to the research - written in a human, clear, professional tone.
33

44
---
55

@@ -8,7 +8,7 @@ It explains what the project is, how it’s built, and how it connects to the re
88

99
**Neuro-inclusive typefaces for calmer, clearer reading.**
1010
EasyType is an open font family designed for readers with ADHD, dyslexia, and other attention-related differences.
11-
Built on typographic and neuroscience research, it blends subtle optical anchoring, balanced spacing, and improved rhythm to make text feel easier to read without sacrificing design quality.
11+
Built on typographic and neuroscience research, it blends subtle optical anchoring, balanced spacing, and improved rhythm to make text feel easier to read - without sacrificing design quality.
1212

1313
I live with both ADHD and dyslexia, and EasyType started as a personal experiment to make long reading sessions less tiring. Every decision in this project is shaped by that need for calmer, more efficient reading.
1414

@@ -31,7 +31,7 @@ Each family includes:
3131

3232
## 🧠 Why EasyType was built
3333

34-
Traditional fonts are designed for visual uniformity not for how the eye and brain process language.
34+
Traditional fonts are designed for visual uniformity - not for how the eye and brain process language.
3535
Research in cognitive science and perceptual psychology shows that subtle cues can reduce eye strain, improve word recognition, and enhance rhythm during reading.
3636

3737
As someone managing ADHD and dyslexia, I felt the lack of those cues daily, so the design brief was simple: build a type family that helps my own eyes stay anchored and focused first, then open-source it for everyone else who needs the same support.
@@ -58,7 +58,7 @@ EasyType draws on findings from visual cognition and reading science:
5858
- Spinelli, D. et al. (2002). *Crowding effects on word recognition in dyslexia.* *Cortex, 38*(2).
5959
- Le Loi, J. & Whitney, C. (2016). *Optimal inter-letter spacing for reading.* *Vision Research, 121.*
6060

61-
> EasyType is not a treatment for ADHD or dyslexia it’s a research-informed design approach that helps reduce reading effort and improve comfort.
61+
> EasyType is not a treatment for ADHD or dyslexia - it’s a research-informed design approach that helps reduce reading effort and improve comfort.
6262
6363
---
6464

@@ -148,22 +148,22 @@ https://www.marczewski.me.uk/easytype/easytypesans.zip
148148
```bash
149149
export WOFF2_BIN=/usr/local/bin/woff2_compress
150150
```
151-
* All processing is deterministic re-running the script will yield identical results.
151+
* All processing is deterministic - re-running the script will yield identical results.
152152

153153
---
154154

155155
## 🔬 Accessibility and Design Philosophy
156156

157157
* Designed to support **attention anchoring**, **saccadic rhythm**, and **crowding reduction**.
158158
* Every modification was validated visually and numerically for readability without disrupting typographic proportion.
159-
* The design goal: *clarity without caricature* fonts that work for everyone but especially help those who need calmer visual flow.
159+
* The design goal: *clarity without caricature* - fonts that work for everyone but especially help those who need calmer visual flow.
160160
* This is the toolkit I wanted for myself as a reader with ADHD and dyslexia, so every refinement is judged by whether it genuinely makes my own reading more efficient.
161161

162162
---
163163

164-
## 📄 License
164+
## 📄 Licence
165165

166-
**SIL Open Font License 1.1**
166+
**SIL Open Font Licence 1.1**
167167

168168
You may freely:
169169

@@ -172,7 +172,7 @@ You may freely:
172172
* Embed them in software or websites
173173

174174
Attribution is appreciated:
175-
**© 2025 Andrzej Marczewski EasyType Fonts**
175+
**© 2025 Andrzej Marczewski - EasyType Fonts**
176176

177177
---
178178

@@ -184,4 +184,4 @@ Attribution is appreciated:
184184

185185
---
186186

187-
*“Good design doesn’t demand focus it invites it.”*
187+
*“Good design doesn’t demand focus - it invites it.”*

0 commit comments

Comments
 (0)