Skip to content

Commit ea2518b

Browse files
daveragedaverage
committed
Style Updates
1 parent 7133943 commit ea2518b

9 files changed

Lines changed: 106 additions & 97 deletions

File tree

‎.DS_Store‎

2 KB
Binary file not shown.

‎css/easytype.css‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,88 +5,88 @@
55
*/
66

77
@font-face {
8-
font-family: 'EasyType Sans';
8+
font-family: 'EasyTypeSans';
99
src: url('../fonts/web/EasyTypeSans-Regular.woff2') format('woff2'),
1010
url('../fonts/ttf/EasyTypeSans-Regular.ttf') format('truetype');
1111
font-weight: 400;
1212
font-style: normal;
1313
}
1414
@font-face {
15-
font-family: 'EasyType Sans';
15+
font-family: 'EasyTypeSans';
1616
src: url('../fonts/web/EasyTypeSans-Italic.woff2') format('woff2'),
1717
url('../fonts/ttf/EasyTypeSans-Italic.ttf') format('truetype');
1818
font-weight: 400;
1919
font-style: italic;
2020
}
2121
@font-face {
22-
font-family: 'EasyType Sans';
22+
font-family: 'EasyTypeSans';
2323
src: url('../fonts/web/EasyTypeSans-Bold.woff2') format('woff2'),
2424
url('../fonts/ttf/EasyTypeSans-Bold.ttf') format('truetype');
2525
font-weight: 700;
2626
font-style: normal;
2727
}
2828
@font-face {
29-
font-family: 'EasyType Sans';
29+
font-family: 'EasyTypeSans';
3030
src: url('../fonts/web/EasyTypeSans-BoldItalic.woff2') format('woff2'),
3131
url('../fonts/ttf/EasyTypeSans-BoldItalic.ttf') format('truetype');
3232
font-weight: 700;
3333
font-style: italic;
3434
}
3535

36-
/* EasyType Focus */
36+
/* EasyTypeFocus */
3737
@font-face {
38-
font-family: 'EasyType Focus';
38+
font-family: 'EasyTypeFocus';
3939
src: url('../fonts/web/EasyTypeFocus-Regular.woff2') format('woff2'),
4040
url('../fonts/ttf/EasyTypeFocus-Regular.ttf') format('truetype');
4141
font-weight: 400;
4242
font-style: normal;
4343
}
4444
@font-face {
45-
font-family: 'EasyType Focus';
45+
font-family: 'EasyTypeFocus';
4646
src: url('../fonts/web/EasyTypeFocus-Italic.woff2') format('woff2'),
4747
url('../fonts/ttf/EasyTypeFocus-Italic.ttf') format('truetype');
4848
font-weight: 400;
4949
font-style: italic;
5050
}
5151
@font-face {
52-
font-family: 'EasyType Focus';
52+
font-family: 'EasyTypeFocus';
5353
src: url('../fonts/web/EasyTypeFocus-Bold.woff2') format('woff2'),
5454
url('../fonts/ttf/EasyTypeFocus-Bold.ttf') format('truetype');
5555
font-weight: 700;
5656
font-style: normal;
5757
}
5858
@font-face {
59-
font-family: 'EasyType Focus';
59+
font-family: 'EasyTypeFocus';
6060
src: url('../fonts/web/EasyTypeFocus-BoldItalic.woff2') format('woff2'),
6161
url('../fonts/ttf/EasyTypeFocus-BoldItalic.ttf') format('truetype');
6262
font-weight: 700;
6363
font-style: italic;
6464
}
6565

66-
/* EasyType Dyslexic */
66+
/* EasyTypeDyslexic */
6767
@font-face {
68-
font-family: 'EasyType Dyslexic';
68+
font-family: 'EasyTypeDyslexic';
6969
src: url('../fonts/web/EasyTypeDyslexic-Regular.woff2') format('woff2'),
7070
url('../fonts/ttf/EasyTypeDyslexic-Regular.ttf') format('truetype');
7171
font-weight: 400;
7272
font-style: normal;
7373
}
7474
@font-face {
75-
font-family: 'EasyType Dyslexic';
75+
font-family: 'EasyTypeDyslexic';
7676
src: url('../fonts/web/EasyTypeDyslexic-Italic.woff2') format('woff2'),
7777
url('../fonts/ttf/EasyTypeDyslexic-Italic.ttf') format('truetype');
7878
font-weight: 400;
7979
font-style: italic;
8080
}
8181
@font-face {
82-
font-family: 'EasyType Dyslexic';
82+
font-family: 'EasyTypeDyslexic';
8383
src: url('../fonts/web/EasyTypeDyslexic-Bold.woff2') format('woff2'),
8484
url('../fonts/ttf/EasyTypeDyslexic-Bold.ttf') format('truetype');
8585
font-weight: 700;
8686
font-style: normal;
8787
}
8888
@font-face {
89-
font-family: 'EasyType Dyslexic';
89+
font-family: 'EasyTypeDyslexic';
9090
src: url('../fonts/web/EasyTypeDyslexic-BoldItalic.woff2') format('woff2'),
9191
url('../fonts/ttf/EasyTypeDyslexic-BoldItalic.ttf') format('truetype');
9292
font-weight: 700;

‎css/styles.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ html, body { margin:0; padding:0; }
1414
body {
1515
background: var(--bg);
1616
color: var(--text);
17-
font-family: 'EasyType Sans', system-ui, -apple-system, sans-serif;
17+
font-family: 'EasyTypeSans', system-ui, -apple-system, sans-serif;
1818
line-height: 1.6;
1919
}
2020

@@ -30,7 +30,7 @@ body {
3030
}
3131
.header h1 {
3232
margin: 0;
33-
font-family: 'EasyType Sans';
33+
font-family: 'EasyTypeSans';
3434
font-weight: 700;
3535
letter-spacing: .2px;
3636
font-size: 2rem;
@@ -65,7 +65,7 @@ body {
6565
}
6666

6767
h2 {
68-
font-family: 'EasyType Sans';
68+
font-family: 'EasyTypeSans';
6969
font-size: 1.1rem;
7070
margin: 0 0 8px;
7171
}

‎demo.html‎

Lines changed: 71 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -2,45 +2,19 @@
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
5-
<title>EasyType – Full Specimen (Sans, Focus, Dyslexic × Regular/Italic/Bold/Bold Italic)</title>
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<title>EasyType – Full Specimen (EasyTypeSans, EasyTypeFocus, EasyTypeDyslexic × Regular/Italic/Bold/Bold Italic)</title>
7+
8+
<link rel="stylesheet" href="css/easytype.css">
69

710
<!--
811
Usage:
9-
1) Put this HTML in the SAME folder as your generated fonts:
10-
EasyTypeSans-Regular.ttf
11-
EasyTypeSans-Italic.ttf
12-
EasyTypeSans-Bold.ttf
13-
EasyTypeSans-BoldItalic.ttf
14-
EasyTypeFocus-Regular.ttf
15-
EasyTypeFocus-Italic.ttf
16-
EasyTypeFocus-Bold.ttf
17-
EasyTypeFocus-BoldItalic.ttf
18-
EasyTypeDyslexic-Regular.ttf
19-
EasyTypeDyslexic-Italic.ttf
20-
EasyTypeDyslexic-Bold.ttf
21-
EasyTypeDyslexic-BoldItalic.ttf
22-
23-
2) Open this file in a modern browser.
12+
1) Ensure the generated fonts live in fonts/ttf and fonts/web, and that css/easytype.css points to them.
13+
2) Open this file in a modern browser from the project root so the stylesheet is resolved.
2414
-->
2515

2616
<style>
27-
/* ---------- Font faces: 3 families × 4 styles ---------- */
28-
@font-face { font-family: "EasyType Sans"; src: url("out/EasyTypeSans-Regular.ttf?v=7") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
29-
@font-face { font-family: "EasyType Sans"; src: url("out/EasyTypeSans-Italic.ttf?v=7") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
30-
@font-face { font-family: "EasyType Sans"; src: url("out/EasyTypeSans-Bold.ttf?v=7") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
31-
@font-face { font-family: "EasyType Sans"; src: url("out/EasyTypeSans-BoldItalic.ttf?v=7") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }
32-
33-
@font-face { font-family: "EasyType Focus"; src: url("out/EasyTypeFocus-Regular.ttf?v=7") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
34-
@font-face { font-family: "EasyType Focus"; src: url("out/EasyTypeFocus-Italic.ttf?v=7") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
35-
@font-face { font-family: "EasyType Focus"; src: url("out/EasyTypeFocus-Bold.ttf?v=7") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
36-
@font-face { font-family: "EasyType Focus"; src: url("out/EasyTypeFocus-BoldItalic.ttf?v=7") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }
37-
38-
@font-face { font-family: "EasyType Dyslexic"; src: url("out/EasyTypeDyslexic-Regular.ttf?v=7") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
39-
@font-face { font-family: "EasyType Dyslexic"; src: url("out/EasyTypeDyslexic-Italic.ttf?v=7") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
40-
@font-face { font-family: "EasyType Dyslexic"; src: url("out/EasyTypeDyslexic-Bold.ttf?v=7") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
41-
@font-face { font-family: "EasyType Dyslexic"; src: url("out/EasyTypeDyslexic-BoldItalic.ttf?v=7") format("truetype"); font-weight: 700; font-style: italic; font-display: swap; }
42-
43-
/* Base reference: Noto Sans */
17+
/* Base reference: Noto Sans (for comparison blocks) */
4418
@font-face { font-family: "Noto Sans"; src: url("base_fonts/NotoSans-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
4519
@font-face { font-family: "Noto Sans"; src: url("base_fonts/NotoSans-Italic.ttf") format("truetype"); font-weight: 400; font-style: italic; font-display: swap; }
4620
@font-face { font-family: "Noto Sans"; src: url("base_fonts/NotoSans-Bold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@@ -66,45 +40,84 @@
6640
margin:0;
6741
color:var(--fg);
6842
background:var(--bg);
69-
font: 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "EasyType Sans", "Noto Sans", sans-serif;
43+
font: 15px/1.5 "EasyTypeSans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", sans-serif;
7044
}
7145

7246
header{
7347
position:sticky; top:0; z-index:10;
7448
background:var(--card);
7549
border-bottom:1px solid var(--ring);
76-
padding:16px;
50+
padding:14px;
51+
box-shadow:0 4px 12px rgba(0,0,0,0.04);
52+
}
53+
.row{
54+
display:flex;
55+
flex-direction:column;
56+
gap:10px;
57+
align-items:flex-start;
7758
}
78-
.row{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
59+
.row.controls{ margin-top:10px; }
7960
.row > *{ margin:0; }
80-
label{ font-size:12px; color:var(--muted); }
81-
input[type="range"]{ width:200px; }
61+
label{
62+
font-size:12px;
63+
color:var(--muted);
64+
display:flex;
65+
flex-direction:column;
66+
gap:6px;
67+
width:100%;
68+
}
69+
input[type="range"]{
70+
width:100%;
71+
min-height:32px;
72+
}
8273
.chip{
83-
display:inline-block; padding:6px 10px; border:1px solid var(--ring); border-radius:999px; background:#fff; font-size:12px; color:#333;
74+
display:inline-flex;
75+
align-items:center;
76+
padding:6px 12px;
77+
border:1px solid var(--ring);
78+
border-radius:999px;
79+
background:#fff;
80+
font-size:12px;
81+
color:#333;
8482
}
8583

86-
main{ padding:20px; max-width:1200px; margin:0 auto; }
84+
main{
85+
padding:20px 16px 32px;
86+
max-width:1200px;
87+
margin:0 auto;
88+
}
8789

8890
.family{
8991
margin:24px 0 32px 0;
9092
}
9193
.family h2{
92-
margin:0 0 12px 0; font-size:22px; font-weight:700;
94+
margin:0 0 12px 0;
95+
font-size:clamp(1.4rem, 5vw, 2rem);
96+
font-weight:700;
9397
}
9498
.grid{
9599
display:grid;
96-
grid-template-columns: repeat(2, minmax(320px, 1fr));
100+
grid-template-columns:1fr;
97101
gap:16px;
98102
}
99-
@media (min-width:1100px){
100-
.grid{ grid-template-columns: repeat(4, 1fr); }
101-
}
102103
.card{
103104
background:var(--card);
104105
border:1px solid var(--ring);
105-
border-radius:12px;
106-
padding:14px;
107-
box-shadow:0 1px 2px rgba(0,0,0,.03);
106+
border-radius:16px;
107+
padding:18px;
108+
box-shadow:0 6px 18px rgba(0,0,0,0.06);
109+
}
110+
@media (min-width:640px){
111+
.row{ flex-direction:row; flex-wrap:wrap; align-items:center; }
112+
label{ width:auto; min-width:220px; }
113+
}
114+
@media (min-width:900px){
115+
.grid{ grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); }
116+
}
117+
@media (min-width:1200px){
118+
.grid{ grid-template-columns: repeat(4, 1fr); }
119+
header{ padding:18px 22px; }
120+
main{ padding:32px 24px 48px; }
108121
}
109122
.meta{
110123
display:flex; justify-content:space-between; align-items:center;
@@ -132,9 +145,9 @@
132145
}
133146

134147
/* Font family classes */
135-
.of-sans{ font-family: "EasyType Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", sans-serif; }
136-
.of-focus{ font-family: "EasyType Focus", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", sans-serif; }
137-
.of-dys{ font-family: "EasyType Dyslexic", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", sans-serif; }
148+
.of-sans{ font-family: "EasyTypeSans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", sans-serif; }
149+
.of-focus{ font-family: "EasyTypeFocus", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", sans-serif; }
150+
.of-dys{ font-family: "EasyTypeDyslexic", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", sans-serif; }
138151
.of-noto{ font-family: "Noto Sans", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }
139152
</style>
140153
</head>
@@ -145,7 +158,7 @@
145158
<span class="chip">12 styles</span>
146159
<span class="chip">Live controls</span>
147160
</div>
148-
<div class="row" style="margin-top:8px">
161+
<div class="row controls">
149162
<label>Size
150163
<input id="sz" type="range" min="12" max="28" step="1" value="16">
151164
<span id="szv" class="kbd">16 px</span>
@@ -166,9 +179,9 @@
166179
</header>
167180

168181
<main>
169-
<!-- FAMILY: EasyType Sans -->
182+
<!-- FAMILY: EasyTypeSans -->
170183
<section class="family">
171-
<h2>EasyType Sans</h2>
184+
<h2>EasyTypeSans</h2>
172185
<div class="grid of-sans">
173186
<!-- Regular -->
174187
<div class="card">
@@ -228,9 +241,9 @@ <h2>EasyType Sans</h2>
228241
</div>
229242
</section>
230243

231-
<!-- FAMILY: EasyType Focus -->
244+
<!-- FAMILY: EasyTypeFocus -->
232245
<section class="family">
233-
<h2>EasyType Focus</h2>
246+
<h2>EasyTypeFocus</h2>
234247
<div class="grid of-focus">
235248
<!-- Regular -->
236249
<div class="card">
@@ -290,9 +303,9 @@ <h2>EasyType Focus</h2>
290303
</div>
291304
</section>
292305

293-
<!-- FAMILY: EasyType Dyslexic -->
306+
<!-- FAMILY: EasyTypeDyslexic -->
294307
<section class="family">
295-
<h2>EasyType Dyslexic</h2>
308+
<h2>EasyTypeDyslexic</h2>
296309
<div class="grid of-dys">
297310
<!-- Regular -->
298311
<div class="card">

‎font.py‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -36,9 +36,9 @@
3636

3737
# -------------------- Families -----------------------
3838
FAMILIES = {
39-
"EasyType Sans": ({"Regular":400,"Italic":400,"Bold":700,"BoldItalic":700}, 0.25, 1.02, 1.06, 1.12, 0.8),
40-
"EasyType Focus": ({"Regular":400,"Italic":400,"Bold":700,"BoldItalic":700}, 0.40, 1.06, 1.14, 1.24, 1.0),
41-
"EasyType Dyslexic": ({"Regular":400,"Italic":400,"Bold":700,"BoldItalic":700}, 0.55, 1.10, 1.22, 1.32, 1.0),
39+
"EasyTypeSans": ({"Regular":400,"Italic":400,"Bold":700,"BoldItalic":700}, 0.25, 1.02, 1.06, 1.12, 0.8),
40+
"EasyTypeFocus": ({"Regular":400,"Italic":400,"Bold":700,"BoldItalic":700}, 0.40, 1.06, 1.14, 1.24, 1.0),
41+
"EasyTypeDyslexic": ({"Regular":400,"Italic":400,"Bold":700,"BoldItalic":700}, 0.55, 1.10, 1.22, 1.32, 1.0),
4242
}
4343

4444
VERSION_STR = "EasyType v1.0.2"

easytypesans.zip renamed to fonts.zip

File renamed without changes.

‎fonts/.DS_Store‎

0 Bytes
Binary file not shown.

0 commit comments

Comments
 (0)