<div class="w-full my-12 p-4">
<h2 class="text-center mb-4 text-6xl font-heading font-semibold text-navy">Typography</h2>
<p class="text-center pb-12 max-w-screen-lg m-auto">This is not a strict scale for h1-h5 but rather suggested combinations of font family, size and line height. Different sizes and font types can be applied based on context/component e.g. a h2 could use text-5xl or text-3xl, or you may apply text-3xl at mobile and text-5xl at desktop (text-3xl lg:text-5xl)</p>
<h3 class="text-center text-4xl text-navy mb-4">Font Scale</h3>
<table class="w-full mb-12">
<tr class="border-b border-black">
<td class="p-4">
<div class="font-light text-lg">
text-15xl - (128px)
</div>
<div class="font-light">
<div>
<span class="font-semibold">Tailwind size:</span> text-15xl
</div>
<div>
<span class="font-semibold">Tailwind font:</span> font-heading (Soleil)
</div>
</div>
</td>
<td class="p-4 font-normal text-15xl font-heading leading-tight">
Display <br /> normal
</td>
<td class="p-4 font-bold text-15xl font-heading leading-tight">
Display <br /> Bold
</td>
</tr>
<tr class="border-b border-black">
<td class="p-4">
<div class="font-light text-lg">
text-14xl - (112px)
</div>
<div class="font-light">
<div>
<span class="font-semibold">Tailwind size:</span> text-14xl
</div>
<div>
<span class="font-semibold">Tailwind font:</span> font-heading (Soleil)
</div>
</div>
</td>
<td class="p-4 font-normal text-14xl font-heading leading-tight">
Display <br /> normal
</td>
<td class="p-4 font-bold text-14xl font-heading leading-tight">
Display <br /> Bold
</td>
</tr>
<tr class="border-b border-black">
<td class="p-4">
<div class="font-light text-lg">
text-13xl - (96px)
</div>
<div class="font-light">
<div>
<span class="font-semibold">Tailwind size:</span> text-13xl
</div>
<div>
<span class="font-semibold">Tailwind font:</span> font-heading (Soleil)
</div>
</div>
</td>
<td class="p-4 font-normal text-13xl font-heading leading-tight">
Display <br /> normal
</td>
<td class="p-4 font-bold text-13xl font-heading leading-tight">
Display <br /> Bold
</td>
</tr>
<tr class="border-b border-black">
<td class="p-4">
<div class="font-light text-lg">
text-12xl - (88px)
</div>
<div class="font-light">
<div>
<span class="font-semibold">Tailwind size:</span> text-12xl
</div>
<div>
<span class="font-semibold">Tailwind font:</span> font-heading (Soleil)
</div>
</div>
</td>
<td class="p-4 font-normal text-12xl font-heading leading-tight">
Display <br /> normal
</td>
<td class="p-4 font-bold text-12xl font-heading leading-tight">
Display <br /> Bold
</td>
</tr>
<tr class="border-b border-black">
<td class="p-4">
<div class="font-light text-lg">
text-11xl - (80px)
</div>
<div class="font-light">
<div>
<span class="font-semibold">Tailwind size:</span> text-11xl
</div>
<div>
<span class="font-semibold">Tailwind font:</span> font-heading (Soleil)
</div>
</div>
</td>
<td class="p-4 font-normal text-11xl font-heading leading-tight">
Display <br /> normal
</td>
<td class="p-4 font-bold text-11xl font-heading leading-tight">
Display <br /> Bold
</td>
</tr>
<tr class="border-b border-black">
<td class="p-4">
<div class="font-light text-lg">
text-10xl - (72px)
</div>
<div class="font-light">
<div>
<span class="font-semibold">Tailwind size:</span> text-10xl
</div>
<div>
<span class="font-semibold">Tailwind font:</span> font-heading (Soleil)
</div>
</div>
</td>
<td class="p-4 font-normal text-10xl font-heading leading-tight">
Display <br /> normal
</td>
<td class="p-4 font-bold text-10xl font-heading leading-tight">
Display <br /> Bold
</td>
</tr>
<tr class="border-b border-black">
<td class="p-4">
<div class="font-light text-lg">
text-9xl - (64px)
</div>
<div class="font-light">
<div>
<span class="font-semibold">Tailwind size:</span> text-9xl
</div>
<div>
<span class="font-semibold">Tailwind font:</span> font-heading (Soleil)
</div>
</div>
</td>
<td class="p-4 font-normal text-9xl font-heading ">
Display <br /> normal
</td>
<td class="p-4 font-bold text-9xl font-heading ">
Display <br /> Bold
</td>
</tr>
<tr class="border-b border-black">
<td class="p-4">
<div class="font-light text-lg">
text-8xl - (56px)
</div>
<div class="font-light">
<div>
<span class="font-semibold">Tailwind size:</span> text-8xl
</div>
<div>
<span class="font-semibold">Tailwind font:</span> font-heading (Soleil)
</div>
</div>
</td>
<td class="p-4 font-normal text-8xl font-heading ">
Display <br /> normal
</td>
<td class="p-4 font-bold text-8xl font-heading ">
Display <br /> Bold
</td>
</tr>
<tr class="border-b border-black">
<td class="p-4">
<div class="font-light text-lg">
text-7xl - (48px)
</div>
<div class="font-light">
<div>
<span class="font-semibold">Tailwind size:</span> text-7xl
</div>
<div>
<span class="font-semibold">Tailwind font:</span> font-heading (Soleil)
</div>
</div>
</td>
<td class="p-4 font-normal text-7xl font-heading ">
Display <br /> normal
</td>
<td class="p-4 font-bold text-7xl font-heading ">
Display <br /> Bold
</td>
</tr>
<tr class="border-b border-black">
<td class="p-4">
<div class="font-light text-lg">
text-6xl - (40px)
</div>
<div class="font-light">
<div>
<span class="font-semibold">Tailwind size:</span> text-6xl
</div>
<div>
<span class="font-semibold">Tailwind font:</span> font-heading (Soleil)
</div>
</div>
</td>
<td class="p-4 font-normal text-6xl font-heading ">
Display <br /> normal
</td>
<td class="p-4 font-bold text-6xl font-heading ">
Display <br /> Bold
</td>
</tr>
<tr class="border-b border-black">
<td class="p-4">
<div class="font-light text-lg">
text-5xl - (36px)
</div>
<div class="font-light">
<div>
<span class="font-semibold">Tailwind size:</span> text-5xl
</div>
<div>
<span class="font-semibold">Tailwind font:</span> font-heading (Soleil)
</div>
</div>
</td>
<td class="p-4 font-normal text-5xl font-heading ">
Display <br /> normal
</td>
<td class="p-4 font-bold text-5xl font-heading ">
Display <br /> Bold
</td>
</tr>
<tr class="border-b border-black">
<td class="p-4">
<div class="font-light text-lg">
text-4xl - (32px)
</div>
<div class="font-light">
<div>
<span class="font-semibold">Tailwind size:</span> text-4xl
</div>
<div>
<span class="font-semibold">Tailwind font:</span> font-heading (Soleil)
</div>
</div>
</td>
<td class="p-4 font-normal text-4xl font-heading ">
Display <br /> normal
</td>
<td class="p-4 font-bold text-4xl font-heading ">
Display <br /> Bold
</td>
</tr>
<tr class="border-b border-black">
<td class="p-4">
<div class="font-light text-lg">
text-3xl - (28px)
</div>
<div class="font-light">
<div>
<span class="font-semibold">Tailwind size:</span> text-3xl
</div>
<div>
<span class="font-semibold">Tailwind font:</span> font-heading (Soleil)
</div>
</div>
</td>
<td class="p-4 font-normal text-3xl font-heading ">
Display <br /> normal
</td>
<td class="p-4 font-bold text-3xl font-heading ">
Display <br /> Bold
</td>
</tr>
<tr class="border-b border-black">
<td class="p-4">
<div class="font-light text-lg">
text-2xl - (24px)
</div>
<div class="font-light">
<div>
<span class="font-semibold">Tailwind size:</span> text-2xl
</div>
<div>
<span class="font-semibold">Tailwind font:</span> font-heading (Soleil)
</div>
</div>
</td>
<td class="p-4 font-normal text-2xl font-heading ">
Display <br /> normal
</td>
<td class="p-4 font-bold text-2xl font-heading ">
Display <br /> Bold
</td>
</tr>
<tr class="border-b border-black">
<td class="p-4">
<div class="font-light text-lg">
text-xl - (20px)
</div>
<div class="font-light">
<div>
<span class="font-semibold">Tailwind size:</span> text-xl
</div>
<div>
<span class="font-semibold">Tailwind font:</span> font-heading (Soleil)
</div>
</div>
</td>
<td class="p-4 font-normal text-xl font-heading ">
Display <br /> normal
</td>
<td class="p-4 font-bold text-xl font-heading ">
Display <br /> Bold
</td>
</tr>
<tr class="border-b border-black">
<td class="p-4">
<div class="font-light text-lg">
text-lg - (18px)
</div>
<div class="font-light">
<div>
<span class="font-semibold">Tailwind size:</span> text-lg
</div>
<div>
<span class="font-semibold">Tailwind font:</span> font-body (Soleil)
</div>
</div>
</td>
<td class="p-4 font-normal text-lg font-body ">
Display <br /> normal
</td>
<td class="p-4 font-bold text-lg font-body ">
Display <br /> Bold
</td>
</tr>
<tr class="border-b border-black">
<td class="p-4">
<div class="font-light text-lg">
text-base - (16px)
</div>
<div class="font-light">
<div>
<span class="font-semibold">Tailwind size:</span> text-base
</div>
<div>
<span class="font-semibold">Tailwind font:</span> font-body (Soleil)
</div>
</div>
</td>
<td class="p-4 font-normal text-base font-body ">
Display <br /> normal
</td>
<td class="p-4 font-bold text-base font-body ">
Display <br /> Bold
</td>
</tr>
<tr class="border-b border-black">
<td class="p-4">
<div class="font-light text-lg">
text-sm - (14px)
</div>
<div class="font-light">
<div>
<span class="font-semibold">Tailwind size:</span> text-sm
</div>
<div>
<span class="font-semibold">Tailwind font:</span> font-body (Soleil)
</div>
</div>
</td>
<td class="p-4 font-normal text-sm font-body ">
Display <br /> normal
</td>
<td class="p-4 font-bold text-sm font-body ">
Display <br /> Bold
</td>
</tr>
<tr class="border-b border-black">
<td class="p-4">
<div class="font-light text-lg">
text-xs - (12px)
</div>
<div class="font-light">
<div>
<span class="font-semibold">Tailwind size:</span> text-xs
</div>
<div>
<span class="font-semibold">Tailwind font:</span> font-body (Soleil)
</div>
</div>
</td>
<td class="p-4 font-normal text-xs font-body ">
Display <br /> normal
</td>
<td class="p-4 font-bold text-xs font-body ">
Display <br /> Bold
</td>
</tr>
</table>
</div>
<div class="w-full my-12 p-4">
<h2 class="text-center mb-4 text-6xl font-heading font-semibold text-navy">Typography</h2>
<p class="text-center pb-12 max-w-screen-lg m-auto">This is not a strict scale for h1-h5 but rather suggested combinations of font family, size and line height. Different sizes and font types can be applied based on context/component e.g. a h2 could use text-5xl or text-3xl, or you may apply text-3xl at mobile and text-5xl at desktop (text-3xl lg:text-5xl)</p>
{% for object in typography %}
<h3 class="text-center text-4xl text-navy mb-4">{{object.heading}}</h3>
<table class="w-full mb-12">
{% for text in object.values %}
<tr class="border-b border-black">
<td class="p-4">
<div class="font-light text-lg">
{{text.size }} - ({{text.pxSize}}px)
</div>
<div class="font-light">
<div>
<span class="font-semibold">Tailwind size:</span> {{text.size}}
</div>
<div>
<span class="font-semibold">Tailwind font:</span> {{text.font.class}} ({{text.font.value}})
</div>
</div>
</td>
{% for fontWeight in object.fontWeights %}
<td class="p-4 {{fontWeight.class}} {{text.size}} {{text.font.class}} {{text.leading.class}}">
Display <br /> {{ fontWeight.value }}
</td>
{% endfor %}
</tr>
{% endfor %}
</table>
{% endfor %}
</div>
{
"siteName": "Gigaclear Pattern Library",
"navItems": [
{
"menu_item": "About Us"
},
{
"menu_item": "Testimonials"
},
{
"menu_item": "Our Team"
},
{
"menu_item": "Contact Us"
}
],
"typography": [
{
"heading": "Font Scale",
"fontWeights": [
{
"class": "font-normal",
"value": "normal"
},
{
"class": "font-bold",
"value": "Bold"
}
],
"values": [
{
"size": "text-15xl",
"pxSize": "128",
"font": {
"class": "font-heading",
"value": "Soleil"
},
"leading": {
"class": "leading-tight",
"value": "1.25"
}
},
{
"size": "text-14xl",
"pxSize": "112",
"font": {
"class": "font-heading",
"value": "Soleil"
},
"leading": {
"class": "leading-tight",
"value": "1.25"
}
},
{
"size": "text-13xl",
"pxSize": "96",
"font": {
"class": "font-heading",
"value": "Soleil"
},
"leading": {
"class": "leading-tight",
"value": "1.25"
}
},
{
"size": "text-12xl",
"pxSize": "88",
"font": {
"class": "font-heading",
"value": "Soleil"
},
"leading": {
"class": "leading-tight",
"value": "1.25"
}
},
{
"size": "text-11xl",
"pxSize": "80",
"font": {
"class": "font-heading",
"value": "Soleil"
},
"leading": {
"class": "leading-tight",
"value": "1.25"
}
},
{
"size": "text-10xl",
"pxSize": "72",
"font": {
"class": "font-heading",
"value": "Soleil"
},
"leading": {
"class": "leading-tight",
"value": "1.25"
}
},
{
"size": "text-9xl",
"pxSize": "64",
"font": {
"class": "font-heading",
"value": "Soleil"
}
},
{
"size": "text-8xl",
"pxSize": "56",
"font": {
"class": "font-heading",
"value": "Soleil"
}
},
{
"size": "text-7xl",
"pxSize": "48",
"font": {
"class": "font-heading",
"value": "Soleil"
}
},
{
"size": "text-6xl",
"pxSize": "40",
"font": {
"class": "font-heading",
"value": "Soleil"
}
},
{
"size": "text-5xl",
"pxSize": "36",
"font": {
"class": "font-heading",
"value": "Soleil"
}
},
{
"size": "text-4xl",
"pxSize": "32",
"font": {
"class": "font-heading",
"value": "Soleil"
}
},
{
"size": "text-3xl",
"pxSize": "28",
"font": {
"class": "font-heading",
"value": "Soleil"
}
},
{
"size": "text-2xl",
"pxSize": "24",
"font": {
"class": "font-heading",
"value": "Soleil"
}
},
{
"size": "text-xl",
"pxSize": "20",
"font": {
"class": "font-heading",
"value": "Soleil"
}
},
{
"size": "text-lg",
"pxSize": "18",
"font": {
"class": "font-body",
"value": "Soleil"
}
},
{
"size": "text-base",
"pxSize": "16",
"font": {
"class": "font-body",
"value": "Soleil"
}
},
{
"size": "text-sm",
"pxSize": "14",
"font": {
"class": "font-body",
"value": "Soleil"
}
},
{
"size": "text-xs",
"pxSize": "12",
"font": {
"class": "font-body",
"value": "Soleil"
}
}
]
}
]
}
No notes defined.