Typography

Typography

We used Inter font for Ayro UI. If you want to change the font-family then open starter.css file and change the code below with your own font-family that you got from Google fonts.

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700;800;900&display=swap');

also change the font-family CSS variable from the root:

--font-family: 'Inter', sans-serif;

Headings

h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 600;
color: var(--black);
margin: 0px;
}
h1,
.h1 {
font-size: 2.75em;
line-height: 1.25;
}
h2,
.h2 {
font-size: 2.25em;
line-height: 1.25;
}
h3,
.h3 {
font-size: 1.75em;
line-height: 1.25;
}
h4,
.h4 {
font-size: 1.5em;
line-height: 1.25;
}
h5,
.h5 {
font-size: 1.25em;
line-height: 1.25;
}
h6,
.h6 {
font-size: 0.875em;
line-height: 1.25;
}

Paragraphs

p {
font-size: 1em;
font-weight: 400;
line-height: 1.5;
color: var(--dark-3);
margin: 0px;
}
.text-small {
font-size: 0.875em;
line-height: 1.5;
}
.text-lg {
font-size: 1.15em;
line-height: 1.5;
}

Display

.display-1 {
font-size: 5.5em;
line-height: 1.25;
}
.display-2 {
font-size: 4.75em;
line-height: 1.25;
}
.display-3 {
font-size: 4em;
line-height: 1.25;
}
.display-4 {
font-size: 3.25em;
line-height: 1.25;
}