{ "componentChunkName": "component---src-templates-doc-template-js", "path": "/tr/docs/typography", "result": {"data":{"current":{"fields":{"page":{"path":"/docs/typography","type":"docs","lang":"en","layout":"docs","versions":[{"lang":"en","title":"Typography","markdown":"\nGralig uses `rem` unit for the font size. The `html` element has 62.5% font size which means 10px = 1rem and the main font size defined as 1.6rem(16px). You don't need complex calculation for px to rem.\n\nAs a font family we used [Catamaran](https://fonts.google.com/specimen/Catamaran 'font') while developing but we didn't include it inside library.\n\nIf you want to use this font, you can import to\n\n`html`\n\n```html\n\n```\n\nor `scss`\n\n```scss\n@import url('https://fonts.googleapis.com/css2?family=Catamaran:wght@300;400;600&display=swap')\n```\n\nor you can use whatever font you like.\n\n## Headings and Subheadings\n\nThere are two type headings. Main `.gra-heading` and `.gra-subheading`\n\n
\n
\n
\n

heading

\n \n H14.4rem (44px)\n \n
\n
\n

heading

\n \n H23.6rem (36px)\n \n
\n
\n

heading

\n \n H32.8rem (28px)\n \n
\n
\n

heading

\n \n H42.4rem (24px)\n \n
\n
\n
heading
\n \n H51.8rem (18px)\n \n
\n
\n
heading
\n \n H61.6rem (16px)\n \n
\n
\n\n```html\n

heading

\n

heading

\n

heading

\n

heading

\n
heading
\n
heading
\n```\n\n
\n
\n

subheading

\n \n H14.4rem (44px)\n \n
\n
\n

subheading

\n \n H23.6rem (36px)\n \n
\n
\n

subheading

\n \n H32.8rem (28px)\n \n
\n
\n

subheading

\n \n H42.4rem (24px)\n \n
\n
\n
subheading
\n \n H51.8rem (18px)\n \n
\n
\n
subheading
\n \n H61.6rem (16px)\n \n
\n
\n\n```html\n

subheading

\n

subheading

\n

subheading

\n

subheading

\n
subheading
\n
subheading
\n```\n\n
\n\n## Paragraphs\n\nYou can use three different sizes of paragraphs. You can use a normal paragraph without class, for large font use `.gra-p-large`, for small font use `.gra-p-small`\n\n
\n
\n

\n \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita tenetur dolore debitis nostrum rem inventore dicta quidem eaque delectus\n \n

\n

\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita tenetur dolore debitis nostrum rem inventore dicta quidem eaque delectus\n

\n

\n \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita tenetur dolore debitis nostrum rem inventore dicta quidem eaque delectus\n \n

\n
\n\n```html\n

\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita tenetur\n dolore debitis nostrum rem inventore dicta quidem eaque delectus\n

\n

\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita tenetur\n dolore debitis nostrum rem inventore dicta quidem eaque delectus\n

\n

\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita tenetur\n dolore debitis nostrum rem inventore dicta quidem eaque delectus\n

\n```\n\n
\n\n## Texts\n\nYou can use multiple text types below.\n\n
\n
\n Gralig\n
\n Gralig\n
\n Gralig\n
\n Gralig\n
\n Gralig\n
\n Gralig\n
\n Gralig\n
\n Gralig\n
\n Gralig\n
\n Gralig\n
\n Gralig\n
\n Gralig\n
\n Gralig\n
\n
\n\n```html\nGralig\nGralig\nGralig\nGralig\nGralig\nGralig\nGralig\nGralig\nGralig\nGralig\nGralig\nGralig\nGralig\n```\n","mdtype":"MDHTML","section":"typography"},{"lang":"tr","title":"Tipografi","markdown":"\nGralig yazı boyutu için `rem` birimini kullanır. `html` elementi varsayılan yazı boyutunun %62.5'i oranında değere sahiptir ve 10px yazı boyutunu 1rem değerine eşitler. Bu şekilde karmaşık rem-px hesaplaması yapmanıza gerek kalmaz. Ana yazı boyutu 1.6rem'dir ve 16px değerine eşittir.\n\nYazı tipi olarak [Catamaran](https://fonts.google.com/specimen/Catamaran 'font') kullanıldı ancak kütüphane içerisine dahil edilmedi.\n\nSiz de bu yazı tipini kullanmak isterseniz\n\n`html` içerisinde\n\n```html\n\n```\n\n`scss` içerisinde\n\n```scss\n@import url('https://fonts.googleapis.com/css2?family=Catamaran:wght@300;400;600&display=swap')\n```\n\nşeklinde import edebilir ya da istediğiniz herhangi bir yazı tipini projenize dahil edip kullanabilirsiniz.\n\n## Başlıklar ve Alt Başlıklar\n\nİki çeşit başlık tipi bulunmakta. `.gra-heading` ve `.gra-subheading`\n\n
\n
\n
\n

heading

\n \n H14.4rem (44px)\n \n
\n
\n

heading

\n \n H23.6rem (36px)\n \n
\n
\n

heading

\n \n H32.8rem (28px)\n \n
\n
\n

heading

\n \n H42.4rem (24px)\n \n
\n
\n
heading
\n \n H51.8rem (18px)\n \n
\n
\n
heading
\n \n H61.6rem (16px)\n \n
\n
\n\n```html\n

heading

\n

heading

\n

heading

\n

heading

\n
heading
\n
heading
\n```\n\n
\n
\n

subheading

\n \n H14.4rem (44px)\n \n
\n
\n

subheading

\n \n H23.6rem (36px)\n \n
\n
\n

subheading

\n \n H32.8rem (28px)\n \n
\n
\n

subheading

\n \n H42.4rem (24px)\n \n
\n
\n
subheading
\n \n H51.8rem (18px)\n \n
\n
\n
subheading
\n \n H61.6rem (16px)\n \n
\n
\n\n```html\n

subheading

\n

subheading

\n

subheading

\n

subheading

\n
subheading
\n
subheading
\n```\n\n
\n\n## Paragraflar\n\nÜç farklı boyutta paragraf oluşturuldu. Normal boyut için herhangi bir class kullanmanız gerekmez. Büyük paragraf için `.gra-p-large` , küçük paragraf için `.gra-p-small` kullanabilirsiniz.\n\n
\n
\n

\n \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita tenetur dolore debitis nostrum rem inventore dicta quidem eaque delectus\n \n

\n

\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita tenetur dolore debitis nostrum rem inventore dicta quidem eaque delectus\n

\n

\n \n Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita tenetur dolore debitis nostrum rem inventore dicta quidem eaque delectus\n \n

\n
\n\n```html\n

\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita tenetur\n dolore debitis nostrum rem inventore dicta quidem eaque delectus\n

\n

\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita tenetur\n dolore debitis nostrum rem inventore dicta quidem eaque delectus\n

\n

\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita tenetur\n dolore debitis nostrum rem inventore dicta quidem eaque delectus\n

\n```\n\n
\n\n## Texts\n\nAşağıda çeşitli metin türleri sunulmuştur.\n\n
\n
\n Gralig\n
\n Gralig\n
\n Gralig\n
\n Gralig\n
\n Gralig\n
\n Gralig\n
\n Gralig\n
\n Gralig\n
\n Gralig\n
\n Gralig\n
\n Gralig\n
\n Gralig\n
\n Gralig\n
\n
\n\n```html\nGralig\nGralig\nGralig\nGralig\nGralig\nGralig\nGralig\nGralig\nGralig\nGralig\nGralig\nGralig\nGralig\n```\n","mdtype":"MDHTML","section":"typography"}]}}},"site":{"siteMetadata":{"siteUrl":"https://gralig.netlify.app"}}},"pageContext":{"relativePath":"docs/typography/en.md","language":"tr","intl":{"language":"tr","languages":["en","tr"],"messages":{"404.pagenotfound":"Sayfa Bulunamadı","404.emptyroute":"Aradığınız sayfa muhtemelen değiştirildi ya da kaldırıldı.","404.gotodocs":"Dökümanlara Dön","404.gotohome":"Ana Sayfaya Dön","title":"Gralig CSS","description":"Sade, grimsi CSS Kütüphanesi","summary":"Gralig sade, gri tonlu bir CSS kütüphanesi. Bu kütüphaneyi başlangıç yardımcınız olarak kullanabilirsiniz.","author":"@erenesto","keywords":"css, css kütüphanesi, frontend, ui, tasarım, gri, basit css","pages.404":"Hata 404","pages.index":"Gralig CSS","pages.docs":"Gralig Dökümantasyonu","sidenavLinks.docs.name":"Giriş","sidenavLinks.colors.name":"Renkler","sidenavLinks.grid.name":"Izgara(Grid)","sidenavLinks.dark.name":"Karanlık Mod","sidenavLinks.vars.name":"Değişkenler","sidenavLinks.responsive.name":"Mobil Uyumluluk","sidenavLinks.utils.name":"Yardımcılar","sidenavLinks.typography.name":"Tipografi","sidenavLinks.button.name":"Buton","sidenavLinks.form.name":"Form","sidenavLinks.custom-inputs.name":"Özel Inputlar","sidenavLinks.checkbox.name":"Onay Butonu","sidenavLinks.radio.name":"Radyo Buton","sidenavLinks.switch.name":"Anahtar","sidenavLinks.nav.name":"Navigasyon","sidenavLinks.navbar.name":"Navigasyon Barı","sidenavLinks.footer.name":"Altbilgi Barı","sidenavLinks.breadcrumb.name":"Gezinti Menüsü","sidenavLinks.card.name":"Kart","sidenavLinks.alert.name":"Uyarı","sidenavLinks.list.name":"Liste","sidenavLinks.table.name":"Tablo","sidenavLinks.dropdown.name":"Açılır Liste","sidenavLinks.progress.name":"İlerleme","sidenavLinks.loading.name":"Bekleme","sidenavLinks.modal.name":"Açılır Pencere","words.copy":"Kopyala","words.copied":"Kopyalandı!","words.docs":"Döküman","words.builtwith":"ile yapıldı."},"routed":true,"originalPath":"/docs/typography","redirect":false,"defaultLanguage":"en"}}}, "staticQueryHashes": ["63159454"]}