Graphik Font

Designed to be a blank slate; Graphik is a “vanilla-flavored” typeface that is perfectly suited for whatever style of expression is needed. Its purposeful, elegant plainness allows it to move effortlessly between being a central design element or playing a supporting role in a wide range of projects and applications. The inspiration for Graphik came from designer Christian Schwartz’s longstanding interest in the expressive possibilities found in plain typefaces. This stems from his early exposure to Modernist graphic design, particularly posters, from the mid-twentieth century. While many of these designs were dominated by the three iconic sans serifs from Europe: Helvetica, Univers, and Futura, Schwartz was drawn to the “B-list” of sans serifs, such as Plak, Folio, and Neuzeit Grotesk. Graphik is a typeface without the baggage of Univers and Helvetica that can be used in similar ways without only evoking Modernism.

ABCČĆDĐEFGHIJKLMNOPQRSŠTUVWXYZŽabcčćdđefghijklmnopqrsštuvwxyzžАБВГҐДЂЕЁЄЖЗЅИІЇЙЈКЛЉМНЊОПРСТЋУЎФХЦЧЏШЩЪЫЬЭЮЯабвгґдђеёєжзѕиіїйјклљмнњопрстћуўфхцчџшщъыьэюяΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρστυφχψωάΆέΈέΉίϊΐΊόΌύΰϋΎΫΏĂÂÊÔƠƯăâêôơư1234567890‘?’“!”(%)[#]{@}/&\<-+÷×=>®©$€£¥¢:;,.*

Aa
Graphik Regular
400
Aa
Graphik Medium
500
Aa
Graphik Semibold
600
Aa
Graphik Bold
700
Aa
Graphik Black
800
Aa
Graphik Extralight
200
Aa
Graphik Thin
100
Aa
Graphik Light
300
Aa
Graphik Super
900
SuperItalic - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac orci id sem fringilla bibendum at nec tellus. Nam rutrum iaculis mauris vitae vehicula. Nulla pellentesque molestie laoreet. Quisque mauris nisl, posuere sit amet libero sed, porttitor pellentesque mi. Nam pellentesque at urna eget accumsan. Praesent varius, dolor ac malesuada efficitur, orci justo rutrum turpis, sit amet porta turpis libero ac ante. Cras et quam quis lectus tincidunt scelerisque. Curabitur ultrices aliquet enim in condimentum. Morbi mi diam, ultricies consectetur dui quis, sagittis fermentum libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac facilisis nunc.
CSS

.Graphik-SuperItalic-Cy-Gr-Web{

font-family:"Graphik-SuperItalic-Cy-Gr-Web'";
font-style:italic;
font-weight:900;
font-stretch:normal;

}
    
CSS

@font-face{

font-family:"Graphik-SuperItalic-Cy-Gr-Web'";
src:url('Graphik-SuperItalic-Cy-Gr-Web.eot');
font-style:italic;
font-weight:900;

}
    
ThinItalic - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac orci id sem fringilla bibendum at nec tellus. Nam rutrum iaculis mauris vitae vehicula. Nulla pellentesque molestie laoreet. Quisque mauris nisl, posuere sit amet libero sed, porttitor pellentesque mi. Nam pellentesque at urna eget accumsan. Praesent varius, dolor ac malesuada efficitur, orci justo rutrum turpis, sit amet porta turpis libero ac ante. Cras et quam quis lectus tincidunt scelerisque. Curabitur ultrices aliquet enim in condimentum. Morbi mi diam, ultricies consectetur dui quis, sagittis fermentum libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac facilisis nunc.
CSS

.Graphik-ThinItalic-Cy-Gr-Web{

font-family:"Graphik-ThinItalic-Cy-Gr-Web";
font-style:italic;
font-weight:100;
font-stretch:normal;

}
    
CSS

@font-face{

font-family:"Graphik-ThinItalic-Cy-Gr-Web";
src:url('Graphik-ThinItalic-Cy-Gr-Web.eot');
font-style:italic;
font-weight:100;

}
    
Super - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac orci id sem fringilla bibendum at nec tellus. Nam rutrum iaculis mauris vitae vehicula. Nulla pellentesque molestie laoreet. Quisque mauris nisl, posuere sit amet libero sed, porttitor pellentesque mi. Nam pellentesque at urna eget accumsan. Praesent varius, dolor ac malesuada efficitur, orci justo rutrum turpis, sit amet porta turpis libero ac ante. Cras et quam quis lectus tincidunt scelerisque. Curabitur ultrices aliquet enim in condimentum. Morbi mi diam, ultricies consectetur dui quis, sagittis fermentum libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac facilisis nunc.
CSS

.Graphik-Super-Cy-Gr-Web{

font-family:"Graphik-Super-Cy-Gr-Web";
font-style:normal;
font-weight:900;
font-stretch:normal;

}
    
CSS

@font-face{

font-family:"Graphik-Super-Cy-Gr-Web";
src:url('Graphik-Super-Cy-Gr-Web.eot');
font-style:normal;
font-weight:900;

}
    
Thin - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac orci id sem fringilla bibendum at nec tellus. Nam rutrum iaculis mauris vitae vehicula. Nulla pellentesque molestie laoreet. Quisque mauris nisl, posuere sit amet libero sed, porttitor pellentesque mi. Nam pellentesque at urna eget accumsan. Praesent varius, dolor ac malesuada efficitur, orci justo rutrum turpis, sit amet porta turpis libero ac ante. Cras et quam quis lectus tincidunt scelerisque. Curabitur ultrices aliquet enim in condimentum. Morbi mi diam, ultricies consectetur dui quis, sagittis fermentum libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac facilisis nunc.
CSS

.Graphik-Thin-Cy-Gr-Web{

font-family:"Graphik-ThinItalic-Cy-Gr-Web";
font-style:normal;
font-weight:100;
font-stretch:normal;

}
    
CSS

@font-face{

font-family:"Graphik-Thin-Cy-Gr-Web";
src:url('Graphik-Thin-Cy-Gr-Web.eot');
font-style:normal;
font-weight:100;

}
    
BlackItalic - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac orci id sem fringilla bibendum at nec tellus. Nam rutrum iaculis mauris vitae vehicula. Nulla pellentesque molestie laoreet. Quisque mauris nisl, posuere sit amet libero sed, porttitor pellentesque mi. Nam pellentesque at urna eget accumsan. Praesent varius, dolor ac malesuada efficitur, orci justo rutrum turpis, sit amet porta turpis libero ac ante. Cras et quam quis lectus tincidunt scelerisque. Curabitur ultrices aliquet enim in condimentum. Morbi mi diam, ultricies consectetur dui quis, sagittis fermentum libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac facilisis nunc.
CSS

.Graphik-BlackItalic-Cy-Gr-Web{

font-family:"Graphik-BlackItalic-Cy-Gr-Web";
font-style:italic;
font-weight:800;
font-stretch:normal;

}
    
CSS

@font-face{

font-family:"Graphik-BlackItalic-Cy-Gr-Web";
src:url('Graphik-BlackItalic-Cy-Gr-Web.eot');
font-style:italic;
font-weight:800;

}
    
Black - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac orci id sem fringilla bibendum at nec tellus. Nam rutrum iaculis mauris vitae vehicula. Nulla pellentesque molestie laoreet. Quisque mauris nisl, posuere sit amet libero sed, porttitor pellentesque mi. Nam pellentesque at urna eget accumsan. Praesent varius, dolor ac malesuada efficitur, orci justo rutrum turpis, sit amet porta turpis libero ac ante. Cras et quam quis lectus tincidunt scelerisque. Curabitur ultrices aliquet enim in condimentum. Morbi mi diam, ultricies consectetur dui quis, sagittis fermentum libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac facilisis nunc.
CSS

.Graphik-Black-Cy-Gr-Web{

font-family:"Graphik-Black-Cy-Gr-Web";
font-style:normal;
font-weight:800;
font-stretch:normal;

}
    
CSS

@font-face{

font-family:"Graphik-Black-Cy-Gr-Web";
src:url('Graphik-Black-Cy-Gr-Web.eot');
font-style:normal;
font-weight:800;

}
    
Bolditalic - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac orci id sem fringilla bibendum at nec tellus. Nam rutrum iaculis mauris vitae vehicula. Nulla pellentesque molestie laoreet. Quisque mauris nisl, posuere sit amet libero sed, porttitor pellentesque mi. Nam pellentesque at urna eget accumsan. Praesent varius, dolor ac malesuada efficitur, orci justo rutrum turpis, sit amet porta turpis libero ac ante. Cras et quam quis lectus tincidunt scelerisque. Curabitur ultrices aliquet enim in condimentum. Morbi mi diam, ultricies consectetur dui quis, sagittis fermentum libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac facilisis nunc.
CSS

.Graphik-BoldItalic-Cy-Gr-Web{

font-family:"Graphik-BoldItalic-Cy-Gr-Web";
font-style:italic;
font-weight:700;
font-stretch:normal;

}
    
CSS

@font-face{

font-family:"Graphik-BoldItalic-Cy-Gr-Web";
src:url('Graphik-BoldItalic-Cy-Gr-Web.eot');
font-style:italic;
font-weight:700;

}
    
Bold - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac orci id sem fringilla bibendum at nec tellus. Nam rutrum iaculis mauris vitae vehicula. Nulla pellentesque molestie laoreet. Quisque mauris nisl, posuere sit amet libero sed, porttitor pellentesque mi. Nam pellentesque at urna eget accumsan. Praesent varius, dolor ac malesuada efficitur, orci justo rutrum turpis, sit amet porta turpis libero ac ante. Cras et quam quis lectus tincidunt scelerisque. Curabitur ultrices aliquet enim in condimentum. Morbi mi diam, ultricies consectetur dui quis, sagittis fermentum libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac facilisis nunc.
CSS

.Graphik-Bold-Cy-Gr-Web{

font-family:"Graphik-Bold-Cy-Gr-Web";
font-style:normal;
font-weight:700;
font-stretch:normal;

}
    
CSS

@font-face{

font-family:"Graphik-Bold-Cy-Gr-Web";
src:url('Graphik-Bold-Cy-Gr-Web.eot');
font-style:normal;
font-weight:700;

}
    
SemiboldItalic - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac orci id sem fringilla bibendum at nec tellus. Nam rutrum iaculis mauris vitae vehicula. Nulla pellentesque molestie laoreet. Quisque mauris nisl, posuere sit amet libero sed, porttitor pellentesque mi. Nam pellentesque at urna eget accumsan. Praesent varius, dolor ac malesuada efficitur, orci justo rutrum turpis, sit amet porta turpis libero ac ante. Cras et quam quis lectus tincidunt scelerisque. Curabitur ultrices aliquet enim in condimentum. Morbi mi diam, ultricies consectetur dui quis, sagittis fermentum libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac facilisis nunc.
CSS

.Graphik-SemiboldItalic-Cy-Gr-Web{

font-family:"Graphik-SemiboldItalic-Cy-Gr-Web";
font-style:italic;
font-weight:600;
font-stretch:normal;

}
    
CSS

@font-face{

font-family:"Graphik-SemiboldItalic-Cy-Gr-Web";
src:url('Graphik-SemiboldItalic-Cy-Gr-Web.eot');
font-style:italic;
font-weight:600;

}
    
Semibold - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac orci id sem fringilla bibendum at nec tellus. Nam rutrum iaculis mauris vitae vehicula. Nulla pellentesque molestie laoreet. Quisque mauris nisl, posuere sit amet libero sed, porttitor pellentesque mi. Nam pellentesque at urna eget accumsan. Praesent varius, dolor ac malesuada efficitur, orci justo rutrum turpis, sit amet porta turpis libero ac ante. Cras et quam quis lectus tincidunt scelerisque. Curabitur ultrices aliquet enim in condimentum. Morbi mi diam, ultricies consectetur dui quis, sagittis fermentum libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac facilisis nunc.
CSS

.Graphik-Semibold-Cy-Gr-Web{

font-family:"Graphik-Semibold-Cy-Gr-Web";
font-style:normal;
font-weight:600;
font-stretch:normal;

}
    
CSS

@font-face{

font-family:"Graphik-Semibold-Cy-Gr-Web";
src:url('Graphik-Semibold-Cy-Gr-Web.eot');
font-style:normal;
font-weight:600;

}
    
Mediumitalic - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac orci id sem fringilla bibendum at nec tellus. Nam rutrum iaculis mauris vitae vehicula. Nulla pellentesque molestie laoreet. Quisque mauris nisl, posuere sit amet libero sed, porttitor pellentesque mi. Nam pellentesque at urna eget accumsan. Praesent varius, dolor ac malesuada efficitur, orci justo rutrum turpis, sit amet porta turpis libero ac ante. Cras et quam quis lectus tincidunt scelerisque. Curabitur ultrices aliquet enim in condimentum. Morbi mi diam, ultricies consectetur dui quis, sagittis fermentum libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac facilisis nunc.
CSS

.Graphik-MediumItalic-Cy-Gr-Web{

font-family:"Graphik-MediumItalic-Cy-Gr-Web";
font-style:italic;
font-weight:500;
font-stretch:normal;

}
    
CSS

@font-face{

font-family:"Graphik-MediumItalic-Cy-Gr-Web";
src:url('Graphik-MediumItalic-Cy-Gr-Web.eot');
font-style:italic;
font-weight:500;

}
    
Medium - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac orci id sem fringilla bibendum at nec tellus. Nam rutrum iaculis mauris vitae vehicula. Nulla pellentesque molestie laoreet. Quisque mauris nisl, posuere sit amet libero sed, porttitor pellentesque mi. Nam pellentesque at urna eget accumsan. Praesent varius, dolor ac malesuada efficitur, orci justo rutrum turpis, sit amet porta turpis libero ac ante. Cras et quam quis lectus tincidunt scelerisque. Curabitur ultrices aliquet enim in condimentum. Morbi mi diam, ultricies consectetur dui quis, sagittis fermentum libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac facilisis nunc.
CSS

.Graphik-Medium-Cy-Gr-Web{

font-family:"Graphik-Medium-Cy-Gr-Web";
font-style:normal;
font-weight:500;
font-stretch:normal;

}
    
CSS

@font-face{

font-family:"Graphik-Medium-Cy-Gr-Web";
src:url('Graphik-Medium-Cy-Gr-Web');
font-style:normal;
font-weight:500;

}
    
RegularItalic - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac orci id sem fringilla bibendum at nec tellus. Nam rutrum iaculis mauris vitae vehicula. Nulla pellentesque molestie laoreet. Quisque mauris nisl, posuere sit amet libero sed, porttitor pellentesque mi. Nam pellentesque at urna eget accumsan. Praesent varius, dolor ac malesuada efficitur, orci justo rutrum turpis, sit amet porta turpis libero ac ante. Cras et quam quis lectus tincidunt scelerisque. Curabitur ultrices aliquet enim in condimentum. Morbi mi diam, ultricies consectetur dui quis, sagittis fermentum libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac facilisis nunc.
CSS

.Graphik-RegularItalic-Cy-Gr-Web{

font-family:"Graphik-RegularItalic-Cy-Gr-Web'";
font-style:italic;
font-weight:400;
font-stretch:normal;

}
    
CSS

@font-face{

font-family:"Graphik-RegularItalic-Cy-Gr-Web'";
src:url('Graphik-RegularItalic-Cy-Gr-Web.eot');
font-style:italic;
font-weight:400;

}
    
Regular - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac orci id sem fringilla bibendum at nec tellus. Nam rutrum iaculis mauris vitae vehicula. Nulla pellentesque molestie laoreet. Quisque mauris nisl, posuere sit amet libero sed, porttitor pellentesque mi. Nam pellentesque at urna eget accumsan. Praesent varius, dolor ac malesuada efficitur, orci justo rutrum turpis, sit amet porta turpis libero ac ante. Cras et quam quis lectus tincidunt scelerisque. Curabitur ultrices aliquet enim in condimentum. Morbi mi diam, ultricies consectetur dui quis, sagittis fermentum libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac facilisis nunc.
CSS

.Graphik-Regular-Cy-Gr-Web{

font-family:"Graphik-Regular-Cy-Gr-Web'";
font-style:normal;
font-weight:400;
font-stretch:normal;

}
    
CSS

@font-face{

font-family:"Graphik-Regular-Cy-Gr-Web'";
src:url('Graphik-Regular-Cy-Gr-Web.eot');
font-style:normal;
font-weight:400;

}
    
LightItalic - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac orci id sem fringilla bibendum at nec tellus. Nam rutrum iaculis mauris vitae vehicula. Nulla pellentesque molestie laoreet. Quisque mauris nisl, posuere sit amet libero sed, porttitor pellentesque mi. Nam pellentesque at urna eget accumsan. Praesent varius, dolor ac malesuada efficitur, orci justo rutrum turpis, sit amet porta turpis libero ac ante. Cras et quam quis lectus tincidunt scelerisque. Curabitur ultrices aliquet enim in condimentum. Morbi mi diam, ultricies consectetur dui quis, sagittis fermentum libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac facilisis nunc.
CSS

.Graphik-LightItalic-Cy-Gr-Web{

font-family:"Graphik-LightItalic-Cy-Gr-Web";
font-style:italic;
font-weight:300;
font-stretch:normal;

}
    
CSS

@font-face{

font-family:"Graphik-LightItalic-Cy-Gr-Web";
src:url('Graphik-LightItalic-Cy-Gr-Web.eot');
font-style:italic;
font-weight:300;

}
    
Light - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac orci id sem fringilla bibendum at nec tellus. Nam rutrum iaculis mauris vitae vehicula. Nulla pellentesque molestie laoreet. Quisque mauris nisl, posuere sit amet libero sed, porttitor pellentesque mi. Nam pellentesque at urna eget accumsan. Praesent varius, dolor ac malesuada efficitur, orci justo rutrum turpis, sit amet porta turpis libero ac ante. Cras et quam quis lectus tincidunt scelerisque. Curabitur ultrices aliquet enim in condimentum. Morbi mi diam, ultricies consectetur dui quis, sagittis fermentum libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac facilisis nunc.
CSS

.Graphik-Light-Cy-Gr-Web{

font-family:"Graphik-Light-Cy-Gr-Web";
font-style:normal;
font-weight:300;
font-stretch:normal;

}
    
CSS

@font-face{

font-family:"Graphik-Light-Cy-Gr-Web";
src:url('Graphik-Light-Cy-Gr-Web.eot');
font-style:normal;
font-weight:300;

}
    
ExtralightItalic - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac orci id sem fringilla bibendum at nec tellus. Nam rutrum iaculis mauris vitae vehicula. Nulla pellentesque molestie laoreet. Quisque mauris nisl, posuere sit amet libero sed, porttitor pellentesque mi. Nam pellentesque at urna eget accumsan. Praesent varius, dolor ac malesuada efficitur, orci justo rutrum turpis, sit amet porta turpis libero ac ante. Cras et quam quis lectus tincidunt scelerisque. Curabitur ultrices aliquet enim in condimentum. Morbi mi diam, ultricies consectetur dui quis, sagittis fermentum libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac facilisis nunc.
CSS

.Graphik-ExtralightItalic-Cy-Gr-Web{

font-family:"Graphik-ExtralightItalic-Cy-Gr-Web";
font-style:italic;
font-weight:200;
font-stretch:normal;

}
    
CSS

@font-face{

font-family:"Graphik-ExtralightItalic-Cy-Gr-Web";
src:url('Graphik-ExtralightItalic-Cy-Gr-Web.eot');
font-style:italic;
font-weight:200;

}
    
Extralight - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac orci id sem fringilla bibendum at nec tellus. Nam rutrum iaculis mauris vitae vehicula. Nulla pellentesque molestie laoreet. Quisque mauris nisl, posuere sit amet libero sed, porttitor pellentesque mi. Nam pellentesque at urna eget accumsan. Praesent varius, dolor ac malesuada efficitur, orci justo rutrum turpis, sit amet porta turpis libero ac ante. Cras et quam quis lectus tincidunt scelerisque. Curabitur ultrices aliquet enim in condimentum. Morbi mi diam, ultricies consectetur dui quis, sagittis fermentum libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac facilisis nunc.
CSS

.Graphik-Extralight-Cy-Gr-Web{

font-family:"Graphik-Extralight-Cy-Gr-Web";
font-style:normal;
font-weight:200;
font-stretch:normal;

}
    
CSS

@font-face{

font-family:"Graphik-Extralight-Cy-Gr-Web";
src:url('Graphik-Extralight-Cy-Gr-Web.eot');
font-style:normal;
font-weight:200;

}
    

1K+ amazing features

We took a step further and created a set of amazing tools for a variety of purposes that makes it the ideal point to start building and growing your dream.

1 month onboarding support free

Use our dedicated support email to send your issues or suggestions. We are here to help anytime: support@synerise.com