History: Typefaces

• «
• »

{HTML(wiki="1")}
<style>
@font-face {
    font-family: 'Paneuropa';
    src: url('https://branding.tiki.org/tiki-download_file.php?fileId=201&display') format('truetype');

}

@font-face {
    font-family: 'Paneuropa';
    src: url('https://branding.tiki.org/tiki-download_file.php?fileId=202&display') format('truetype');
}

@font-face {
    font-family: 'Paneuropa';
    src: url('https://branding.tiki.org/tiki-download_file.php?fileId=203&display') format('truetype');
}

@font-face {
    font-family: 'Arial';
    src: url('https://fonts.cdnfonts.com/css/arial-2') format('woff2'),
         url('https://fonts.cdnfonts.com/css/arial-2') format('truetype');
}


h1, h2, h3, h4, h5, h6 {
    font-family: 'Paneuropa', sans-serif;
    font-family: Arial, Helvetica, sans-serif;
}

</style>
{HTML}

{DIV(class="container-lg")}
    {DIV(class="text-center py-5 bg-body-secondary")}
        {DIV(class="display-5 fw-bold" style="font-family: 'Paneuropa', sans-serif;")}Typography & Brand Voice{DIV}
        {DIV(class="lead font-secondary")}How we speak through type{DIV}
    {DIV}


    {DIV(class="row g-4 mb-5")}
        {DIV(class="col-md-6")}
            {DIV(class="bg-body rounded-3 shadow-sm border")}
                {DIV(class="fs-3 fw-bold mb-3 px-3" style="font-family: 'Paneuropa', sans-serif;")}Paneuropa{DIV}
                {DIV(class="px-3")}Our primary typeface. Modern, confident, and distinctive. Used for headlines, emphasis, and brand moments. Paneuropa is Tiki's official font used to produce its logos. It is licensed as: Open Font License (OFL){DIV}
                {DIV(class="mt-3 p-3 bg-light rounded")} 
!!! -+Paneuropia Highway+-
                    {DIV(class="fs-2 fw-bold" style="font-family: 'Paneuropa', sans-serif;")}ABCDEFGHIJKLMNOPQRSTUVWXYZ
                    {DIV}
                    {DIV(class="fs-2 fw-bold" style="font-family: 'Paneuropa', sans-serif;")}abcdefghijklmnopqrstuvwxyz{DIV}
                    {DIV(class="fs-2 fw-bold" style="font-family: 'Paneuropa', sans-serif;")}1234567890!@#$%&()/?{DIV}%%%%%%
!!! -+Paneuropia Road+-
                    {DIV(class="fs-2 fw-normal" style="font-family: 'Paneuropa', sans-serif;")}ABCDEFGHIJKLMNOPQRSTUVWXYZ
                    {DIV}
                    {DIV(class="fs-2 fw-normal" style="font-family: 'Paneuropa', sans-serif;")}abcdefghijklmnopqrstuvwxyz{DIV}
                    {DIV(class="fs-2 fw-normal" style="font-family: 'Paneuropa', sans-serif;")}1234567890!@#$%&()/?{DIV}
                {DIV}
        {DIV(class="col-sm-12 col-md-6 m-3")}{BUTTON(href="dl102" _class="btn btn-outline-secondary" _type="none" _text="Download this font" _icon_name="download")}{BUTTON}{DIV}
            {DIV}
        {DIV}
        {DIV(class="col-md-6")}
            {DIV(class="bg-body rounded-3 shadow-sm border")}
                {DIV(class="fs-3 fw-bold font-secondary px-3 mb-3" style="font-family: Arial, Helvetica, sans-serif;")}Arial{DIV}
                {DIV(class="px-3")}Our secondary typeface. Neutral, accessible, and universally readable. Used for body copy, UI, and documentation.{DIV}
                {DIV(class="mt-3 p-3 bg-light rounded")}
!!!! -+Arial — Regular+-
                    {DIV(class="fs-4" style="font-family: Arial, Helvetica, sans-serif;")}ABCDEFGHIJKLMNOPQRSTUVWXYZ
                    {DIV}
                    {DIV(class="fs-4" style="font-family: Arial, Helvetica, sans-serif;")}abcdefghijklmnopqrstuvwxyz{DIV}
                    {DIV(class="fs-4")}1234567890!@#$%&()/?{DIV}%%%
!!!! -+Arial — Bold+-
                    {DIV(class="fs-4 fw-bold" style="font-family: Arial, Helvetica, sans-serif;")}ABCDEFGHIJKLMNOPQRSTUVWXYZ
                    {DIV}
                    {DIV(class="fs-4 fw-bold" style="font-family: Arial, Helvetica, sans-serif;")}abcdefghijklmnopqrstuvwxyz{DIV}
                    {DIV(class="fs-4 fw-bold" style="font-family: Arial, Helvetica, sans-serif;")}1234567890!@#$%&()/?{DIV}%%%
!!!! -+Arial — Italic+-
                    {DIV(class="fs-4 fst-italic" style="font-family: Arial, Helvetica, sans-serif;")}ABCDEFGHIJKLMNOPQRSTUVWXYZ
                    {DIV}
                    {DIV(class="fs-4 fst-italic" style="font-family: Arial, Helvetica, sans-serif;")}abcdefghijklmnopqrstuvwxyz{DIV}
                    {DIV(class="fs-4 fst-italic" style="font-family: Arial, Helvetica, sans-serif;")}1234567890!@#$%&()/?{DIV}
                {DIV}
            {DIV}
        {DIV}
    {DIV}

{DIV(class="bg-body-secondary p-4 rounded-4 mb-5 shadow-sm")}
    {DIV(class="fs-3 fw-bold mb-4" style="font-family: 'Paneuropa', Arial, sans-serif;")}Typography Rules{DIV}
    
    {DIV(class="row g-3")}
        {DIV(class="col-md-6")}
            {DIV(class="h-100 rounded-4 border border-success bg-success-subtle p-3")}
                {DIV(class="d-flex align-items-center gap-2 mb-3")}
                    {DIV(class="fw-bold fs-5 text-success" style="font-family: 'Paneuropa', Arial, sans-serif;")}Do{DIV}
                {DIV}
* Use __Paneuropa__ for headings, buttons, and short labels
* Use __Arial__ for paragraphs, tables, and form elements
* Minimum Paneuropa size: __20 px__
* Always define Arial as the Paneuropa fallback
            {DIV}
        {DIV}
        {DIV(class="col-md-6")}
            {DIV(class="h-100 rounded-4 border border-danger border-opacity-75 bg-danger-subtle p-3")}
                {DIV(class="d-flex align-items-center gap-2 mb-3")}
                    {DIV(class="fw-bold fs-5 opacity-75 text-danger" style="font-family: 'Paneuropa', Arial, sans-serif;")}Don't{DIV}
                {DIV}
* Use Paneuropa for long reading passages
* Substitute Arial for primary headlines
* Apply faux-bold or faux-italic to Paneuropa
* Introduce a third display font
            {DIV}
        {DIV}
    {DIV}
{DIV}
{DIV}
~tc~! Official font – Paneuropa

Paneuropa is Tiki's official font used to produce its logos. It is licensed as: Open Font License (OFL)

{img fileId=51}
{img fileId=52}
{img fileId=53}

[dl102|Download]

! System font – Arial

Arial is the system font to use in place of Paneuropa on Tiki's different websites and for word processing applications such as PowerPoint presentations.

{img fileId=54}
{img fileId=55}
{img fileId=56}
{img fileId=57}
~/tc~

!! Related links
* http://images.google.com/images?q=tiki+font

-=alias=-
* (alias(font))