調和数列デモ

設定例1

スマートフォン基準:16px*9（144px）

PC基準:16px*8（128px）

Mとh6はサイズ同じ

サイズ	スマートフォン	PC
XXXXL/h1	36px 2.25rem あいうえお	42.667px 2.667rem あいうえお
XXXL/h2	28.8px 1.8rem あいうえお	32px 2rem あいうえお
XXL/h3	24px 1.5rem あいうえお	25.6px 1.6rem あいうえお
XL/h4	20.571px 1.286rem あいうえお	21.333px 1.333rem あいうえお
L/h5	18px 1.125rem あいうえお	18.286px 1.143rem あいうえお
M/h6	16px 1rem あいうえお	16px 1rem あいうえお
M	16px 1rem あいうえお	16px 1rem あいうえお
S	14px 0.875rem あいうえお	14px 0.875rem あいうえお

clamp: 375px-1000px

h1あいうえお新しい朝ABCDE

h2あいうえお新しい朝ABCDE

h3あいうえお新しい朝ABCDE

h4あいうえお新しい朝ABCDE

h5あいうえお新しい朝ABCDE

h6あいうえお新しい朝ABCDE

Mあいうえお新しい朝ABCDE

Sあいうえお新しい朝ABCDE

theme.json fluid: 375px-1000px

"fontSizes": [
	{
	"fluid": false,
	"name": "S",
	"size": "0.8rem", //0.875ではなくて0.8にしちゃう
	"slug": "small"
	},
	{
	"fluid": false,
	"size": "1rem",
	"name": "M",
	"slug": "medium"
	},
	{
	"fluid": {
	"min": "1.125rem",
	"max": "1.143rem"
	},
	"size": "1.143rem",
	"name": "L",
	"slug": "large"
	},
	{
	"fluid": {
	"min": "1.286rem",
	"max": "1.333rem"
	},
	"size": "1.333rem",
	"name": "XL",
	"slug": "x-large"
	},
	{
	"fluid": {
	"min": "1.5rem",
	"max": "1.6rem"
	},
	"size": "1.6rem",
	"name": "XXL",
	"slug": "xx-large"
	},
	{
	"fluid": {
	"min": "1.8rem",
	"max": "2rem"
	},
	"size": "2rem",
	"name": "XXXL",
	"slug": "xxx-large"
	},
	{
	"fluid": {
	"min": "2.25rem",
	"max": "2.667rem"
	},
	"size": "2.667rem",
	"name": "XXXXL",
	"slug": "xxxx-large"
	}
],
"fluid": {
	"minViewportWidth": "375px",
	"maxViewportWidth": "1000px"
}

設定例2

スマートフォン基準:16px*8（128px）

PC基準:16px*7（112px）

Mとh6はサイズ同じ

サイズ	スマートフォン	PC
XXXXL/h1	42.667px 2.667rem あいうえお	56px 3.5rem あいうえお
XXXL/h2	32px 2rem あいうえお	37.333px 2.333rem あいうえお
XXL/h3	25.6px 1.6rem あいうえお	28px 1.75rem あいうえお
XL/h4	21.333px 1.333rem あいうえお	22.4px 1.4rem あいうえお
L/h5	18.286px 1.143rem あいうえお	18.667px 1.167rem あいうえお
M/h6	16px 1rem あいうえお	16px 1rem あいうえお
M	16px 1rem あいうえお	16px 1rem あいうえお
S	14px 0.875rem あいうえお	14px 0.875rem あいうえお

clamp: 375px-1000px

h1あいうえお新しい朝ABCDE

h2あいうえお新しい朝ABCDE

h3あいうえお新しい朝ABCDE

h4あいうえお新しい朝ABCDE

h5あいうえお新しい朝ABCDE

h6あいうえお新しい朝ABCDE

Mあいうえお新しい朝ABCDE

Sあいうえお新しい朝ABCDE

theme.json fluid: 375px-1000px

"fontSizes": [
	{
	"fluid": false,
	"name": "S",
	"size": "0.8rem",//0.875ではなくて0.8にしちゃう
	"slug": "small"
	},
	{
	"fluid": false,
	"size": "1rem",
	"name": "M",
	"slug": "medium"
	},
	{
	"fluid": {
	"min": "1.143rem",
	"max": "1.167rem"
	},
	"size": "1.167rem",
	"name": "L",
	"slug": "large"
	},
	{
	"fluid": {
	"min": "1.333rem",
	"max": "1.4rem"
	},
	"size": "1.4rem",
	"name": "XL",
	"slug": "x-large"
	},
	{
	"fluid": {
	"min": "1.6rem",
	"max": "1.75rem"
	},
	"size": "1.75rem",
	"name": "XXL",
	"slug": "xx-large"
	},
	{
	"fluid": {
	"min": "2rem",
	"max": "2.333rem"
	},
	"size": "2.333rem",
	"name": "XXXL",
	"slug": "xxx-large"
	},
	{
	"fluid": {
	"min": "2.667rem",
	"max": "3.5rem"
	},
	"size": "3.5rem",
	"name": "XXXXL",
	"slug": "xxxx-large"
	}
],
"fluid": {
"minViewportWidth": "375px",
"maxViewportWidth": "1000px"
}

設定例3

スマートフォン基準:16px*8（128px）

PC基準:16px*7（112px）

Mとh6はサイズ変える

サイズ	スマートフォン	PC
XXXXXL/h1	64px 4rem あいうえお	112px 7rem あいうえお
XXXXL/h2	42.667px 2.667rem あいうえお	56px 3.5rem あいうえお
XXXL/h3	32px 2rem あいうえお	37.333px 2.333rem あいうえお
XXL/h4	25.6px 1.6rem あいうえお	28px 1.75rem あいうえお
XL/h5	21.333px 1.333rem あいうえお	22.4px 1.4rem あいうえお
L/h6	18.286px 1.143rem あいうえお	18.667px 1.167rem あいうえお
M	16px 1rem あいうえお	16px 1rem あいうえお
S	14px 0.875rem あいうえお	14px 0.875rem あいうえお

16px*7（112px）

XXXXXXLあいうえお

XXXXXLあいうえお

XXXXLあいうえお

XXXLあいうえお

XXLあいうえお

XLあいうえお

Lあいうえお

Mあいうえお

Sあいうえお

XSあいうえお

サイズ	【px】基準値*整数		【rem】基準値*整数
XXXXXXL	16px*7	112px	1rem*7	7rem
XXXXXL	16px*7/2	56px	1rem*7/2	3.5rem
XXXXL	16px*7/3	37.333px	1rem*7/3	2.333rem
XXXL	16px*7/4	28px	1rem*7/4	1.75rem
XXL	16px*7/5	22.4px	1rem*7/5	1.6rem
XL	16px*7/6	18.667px	1rem*7/6	1.167rem
L	16px*7/7	16px	1rem*7/7	1rem
M	16px*7/8	14px	1rem*7/8	0.875rem
S	16px*7/9	12.444px	1rem*7/9	0.778rem
XS	16px*7/10	11.2px	1rem*7/10	0.7rem

16px*8（128px）

XXXXXXLあいうえお

XXXXXLあいうえお

XXXXLあいうえお

XXXLあいうえお

XXLあいうえお

XLあいうえお

Lあいうえお

Mあいうえお

Sあいうえお

XSあいうえお

サイズ	【px】基準値*整数		【rem】基準値*整数
XXXXXXL	16px*8	128px	1rem*8	8rem
XXXXXL	16px*8/2	64px	1rem*8/2	4rem
XXXXL	16px*8/3	42.667px	1rem*8/3	2.667rem
XXXL	16px*8/4	32px	1rem*8/4	2rem
XXL	16px*8/5	25.6px	1rem*8/5	1.6rem
XL	16px*8/6	21.333px	1rem*8/6	1.333rem
L	16px*8/7	18.286px	1rem*8/7	1.142rem
M	16px*8/8	16px	1rem*8/8	1rem
S	16px*8/9	14.222px	1rem*8/9	0.889rem
XS	16px*8/10	12.8px	1rem*8/10	0.8rem

16px*9（144px）

XXXXXXLあいうえお

XXXXXLあいうえお

XXXXLあいうえお

XXXLあいうえお

XXLあいうえお

XLあいうえお

Lあいうえお

Mあいうえお

Sあいうえお

XSあいうえお

サイズ	【px】基準値*整数		【rem】基準値*整数
XXXXXXL	16px*9	144px	1rem*9	9rem
XXXXXL	16px*9/2	72px	1rem*9/2	4.5rem
XXXXL	16px*9/3	48px	1rem*9/3	3rem
XXXL	16px*9/4	36px	1rem*9/4	2.25rem
XXL	16px*9/5	28.8px	1rem*9/5	1.8rem
XL	16px*9/6	24px	1rem*9/6	1.5rem
L	16px*9/7	20.571px	1rem*9/7	1.286rem
M	16px*9/8	18px	1rem*9/8	1.125rem
S	16px*9/9	16px	1rem*9/9	1rem
XS	16px*9/10	14.4px	1rem*9/10	0.9rem