Much has been written about type design, especially about the history of its creation. We have read about many techniques for creating fonts. But where, exactly, should we start? If you are a designer or illustrator and this discipline is new to you, then where should you start?
We found useful information, which was collected from many sources, and decided to put it all together.
1. Start with a brief
Creating a font is a long and painstaking job, so it is very important to have a clear understanding of what this font should be.
Developing a brief will certainly require research and thought. How will your font be used: will it be needed for a specific project or for personal use? Is there a problem that your font would solve? Will your font fit into an array of similar designs? What makes it unique?
There are many options. Fonts can be created, for example, specifically for academic texts or for posters. Only when you know how your typeface can be used will you be ready to start designing.
2. Fundamental choice
There are a number of decisions to keep in mind. Will it be a sans serif or sans serif? Will it be handwritten text based or more geometric? Will the font be designed for text and suitable for long documents? Or maybe it will display text in a creative style and look better in a larger size?
Clue: It is assumed that the design of sans serif fonts is more difficult for beginners, since the capabilities of such fonts are more specific.
3. Pitfalls in the early stages
There are several pitfalls:
- You may decide to start by computerizing handwriting, which can be a useful practice exercise. But because handwriting is so individual, your font may not have much success due to its specificity.
- You should not use existing fonts as a basis. By slightly reworking a font that is already familiar to everyone, you will not create a better font and will not develop your skills.
4. Use your hands
There is a lot of material on how to draw fonts using computer programs, but we strongly recommend that you draw it by hand first. Trying to do this on a computer will make your job much more difficult.
Try creating beautiful shapes the first few letters on paper, and only then start computer work. Subsequent letters can then be designed based on existing shapes, according to key features.
Clue: By hand you can usually draw smoother, more precise curves. To make it more convenient, do not be afraid to rotate the sheet of paper the way you need.
5. What characters to start with
Creating specific characters first can help you set the style of your font. Well, then these symbols will be used as guides. Typically, the “control characters,” as they are called, in Latin are n and o, and capital letters are H and O. The word adhension is often used to help test the basic proportions of the font (but some write this word as adhencion because the letter s can be very insidious).
6. Transfer the font to your computer
There are many ways to transfer a drawing to a computer. Some recommend tracing programs, but many prefer to do this work manually in order to have full control over points and shapes.
Many programs need a clear and vibrant design, so once you like your font, trace it with a fine pen and fill in the shapes with a marker.
Clue: If you processed the drawn font as described above, then you can simply take a photo of the drawing and work with it.
7. Program selection
Many designers like to use Adobe Illustrator. It's great for drawing individual shapes and experimenting. But later it becomes obvious that it is not suitable for creating fonts. You will want to work with a program that allows you to work with letter spacing and word creation.
An excellent program is FontLab Studio, but new software such as Glyphs and Robofont are gaining more and more popularity. These programs aren't cheap, but Glyghs has a "mini" version on Mac App Store with some missing features which is not good because these features are important for beginners.
8. Using programs
Don't forget to position the extreme points of the letter shapes (top, bottom, right, left) to better control the process.
9. Words
When you have finished all the work on smoothing out the shapes, look at how it looks in full text. Make it a goal to analyze how the font looks in a line, paragraph, and so on. And don't wait until you've done the entire alphabet.
One of the most popular font design programs. Available on Windows and Mac.
The program is available on Windows, has an intuitive interface and is perfect for beginners.
Another powerful editor font from FontLab, allowing you to create new fonts or modify existing ones. Available on Windows and Mac.
This program works on Windows, Mac, Unix/Linux and has been translated into many languages. It also allows you to create new fonts and edit existing ones.
OpenType font editor, available on Windows and Mac OS X. Quite simple and contains a sufficient number of functions.
Another free tool, with which you can create dot fonts.
A free trial ($9 per font download) online tool that lets you create fonts from handwritten text.
Another online tool (also almost $10 to download) that lets you create a font from handwritten text.
A free and fairly powerful font editor. Great for beginners and those who don't want to spend money on buying software.
This app is available on iPad and Windows 8. It allows you to create a font from a sketch and edit existing fonts.
Free tool for a limited time. With it you can create fonts and download them.
A free online tool that allows you to create TTF and OTF fonts from handwritten text.
There is a free and premium version. The program runs on Windows, Linux, Mac OS X and BSD.
In this article tutorial I will tell you how to create your own font for a website using icons that you created yourself. All we need for this is a program to create vector graphics(Adobe Illustrator or Inkspcape) and Internet access! So, let's get started! You can download all the images, icons and css font used for this at the end of the article.
For this tutorial we will do something simple. For the first icon we will draw a regular star. For the second icon - an eagle with the letter W inside. It is quite easy to draw and you can create any shapes and combinations. I used illustrator for these purposes.
After you have completed the creative part, your creation must be saved in SVG format. Click “Save As” and select the file type as SVG. Now you can proceed directly to creating the font.
For these purposes, we use the popular and free service IcoMoon.
The first thing to do is create a new project, so click on the menu in the upper left corner and click “New Project”. Next, we load our ready-made svg files after clicking on the “Import Icons” button. After completing these steps, you should see an image like this on your monitor:
Now we have the ability to change the code for each icon (in our case it will be e600 and e601), the name of our font, the CSS prefix, and so on. All this is done in “Preferences”. Also, we can see the font in action by clicking on the “Enable Quick Usage” link - which will allow us to get a temporary link to our font, as well as the option to view the code in CodePen.
After you have configured everything, click the “Download” button at the bottom of the page and download the archive. In this archives you will find your font in ttf, eot, svg and woff formats + a demo page with the font.
Using icons on the site
Now, all we need is to include the CSS font using @font-face, and specify other parameters (they are all written in the css file in the archive that you downloaded.
@font-face ( font-family: "wdm-eagle"; src: url("//yourwebsitename.com/fonts/wdm-eagle.eot"); , ( font-family: "wdm-eagle"; speak: none; font-style: normal; font-variant: normal; line-height: 1; /* Better Font Rendering ========== -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; ) .wdm-star:before ( content: "\e600"; ) .wdm-eagle:before ( content: "\e601"; )
Now we can use our font in HTML code like this:
Specifying the class name for the tag we get our icon.
.I learned a lot of new things about this topic. In particular, two ways to connect fonts, a feature of working with the Google Fonts service and a numerical scale of font density, resources for finding free fonts, the intricacies of working with the FontSquirrel generator, resources on font icons. For me, the information turned out to be extremely useful and interesting.
Below is a brief summary of all the questions that seemed interesting and new to me in my practice, retold in my own words. I hope this material will be useful not only for me.
Connecting web fonts using @font-face:
- connecting a non-standard font using a directive
Directive
Instructs the browser to apply the font with the specified name to selected page elements.There are several web font formats. The most common ones are: EOT, WOFF, OTF or TTF,
EOT format, which is understood by IE browsers up to version 8. Actually, this font format was created and exists only for the sake of this browser and its versions. To obtain an EOT format font, you need a special software to convert TTF to OET format.
WOFF format(Web Open Font Format) is the best today for use on the Web: the smallest and lightest, supported by all modern browsers (including IE9 and higher); this format was created specifically for the Web. In fact, it is a lightweight version of the TTF or OTF format.
OTF formats(Open Type Font) and TTF (True Type Font) are the most common computer fonts that are used in most operating systems (Windows, Macintosh, Linux) and in applications for these systems. But, besides this, such fonts can be easily used on the Internet.
SVG format- this is not even a font format, but a graphics format, graphic image. The peculiarity of this format is that graphics in this format are created exclusively using vectors, that is, mathematical formulas.
Thanks to this, images in this format are scaled without loss of quality - when the image size increases, the computer only needs to recalculate the vector points. The peculiarity of this graphics format made it possible to use it to create “fonts”. That is, a regular font is converted to SVG format, where each font is actually an image in a scalable SVG format.
Why were such difficulties necessary? The thing is that browsers running Android OS (a very common OS for mobile devices) can only display web fonts in this format. Browsers for iPhone (Safari 4.1 and below) also cannot recognize web fonts. These “incompetents” are given pictures in the form of fonts - “if you don’t know how to eat regular food, then at least eat this!”
Legal issue of using fonts
The question can be briefly formulated in the following two sentences. All fonts are divided into paid or free.
Paid fonts are divided into those that:
- Can use on the web
- it is forbidden use on the web
To avoid the hassle of resolving the confusing issue of font licenses, you can use web services Google Fonts or TypeKit, which contains all the fonts, which can be used on the web. The fonts on these servers are either free (Google Fonts), or paid(TypeKit).
Short list free font sources, which can be used on the Web:
- https://www.theleagueofmoveabletype.com/)
- FontSquirrel (http://www.fontsquirrel.com/)
- Google Fonts ( https://www.google.com/fonts)
- The Open Font Library (http://openfontlibrary.org/ru)
- Fontex.org (http://fontex.org/)
- Exljbris Font Foundry (http://www.exljbris.com/)
Most web services that provide fonts for the Web serve them in OTF or TTF format. Therefore, you need to convert this font into the four formats described above so that the maximum number of site visitors can see the content of this site on their devices. You don't need to look for special software to convert. You can use the free @font-face Generator located on the FontSquirrel server (http://www.fontsquirrel.com/).
The only limitation of this service is that it has its own blacklist, which contains fonts that are prohibited under the license for use on the Web. In other words, if you “slip” this generator with a licensed font purchased pirated, it will refuse to generate the latter.
Generator
is important and should be: @font-face ( font-family : "PTSans" ; src : url("PTSansRegular.eot") ; src : format ("embedded-opentype") , url("PTSansRegular.woff") format ("woff"), url("PTSansRegular.ttf") format ("truetype"), url("PTSansRegular.svg") format ("svg" )- EOT- format only for Internet Explorer 8 and below
- WOFF- the most modern and smallest font that most people understand modern browsers
- TTF- the font is relatively large in size and quite outdated
- SVG- the largest font in size and volume, so it must be placed in the very last line. In addition, this font format is only used in Android OS browsers or Safari browser 4 (that is, iPhone)
The browser reads the body of the directive
is non-random and empirically verified based on the experience of previous web developers. h1 ( font-family : "League Gothic" , Arial , sans-serif ; font-weight : normal ; )Correct use of the connected League Gothic web font. Here the name of the connected font is indicated first, and then - backup fonts that are known to be installed on the user's system(name of the font guaranteed to be available in the system and font family).
An attentive reader will pay attention to the second line and say: this is unnecessary here, some kind of nonsense. Actually not quite like that. Browsers always try to render headings bold by default. Therefore, here we are telling the browser to simply not do this, and that’s all.
In addition to letters, fonts can consist of icons or images. Resources dedicated to the topic of font icons and icons:
Types of fonts
When connecting fonts installed on a computer, usually no questions arise and we don’t think about how it happens that when we tell the browser to render text bold using a tag
the text is actually made italic; and with bold italics through tags| 1 | strong em |
Actually this is not true. Or not quite like that. The browser actually renders the font in the manner specified to it, but it cannot do anything with the font itself. It simply takes the font style specified by the tag and displays it on the screen. The fact is that designers or font companies create fonts in this way: the artist draws four sets of the same font. That is, a set of characters is drawn in regular style (regular), then a set of characters is drawn in italic style (italic), then a set of characters in bold style (bold), and finally a set of characters in bold italic style (bold italic). All four of these character sets are actually separate fonts, although they share the same name (Georgia, Tahoma, Helvetica, and so on).
When the browser is told which style to use, it simply takes the font with the specified style and displays it. For example, the Arial font has four styles. If it is specified that a bold style is required, then the browser uses Arial bold style. The browser itself cannot convert one style to another in any way. He can only do one thing - try to make the usual “italic” style. The command that tells the browser to perform such a task is called
is significantly more complicated and can be done in two ways: simple, which IE8 doesn't understand (but all other browsers do) and complex, which will be available in IE8 as well.An easy way to connect a web font
A simple way is to add to the directive
and these rules serve another role, they force the browser to load the web font with the specified style and weight. To be more clear, we will immediately give an example of connecting the PTSans web font with four options for its display: @font-face ( font-family : "PTSans" ; src : url("PTSansRegular.eot") ; src : url("PTSansRegular.eot#iefix") format ("embedded-opentype"), url("PTSansRegular.woff") format ("woff"), url("PTSansRegular.ttf") format ("truetype"), url("PTSansRegular.svg") format (" svg" ); font-weight: normal; font-style: normal; ) @font-face ( font-family : "PTSans" ; src : url("PTSansItalic.eot") ; src : url("PTSansItalic.eot#iefix") format ("embedded-opentype" ), url("PTSansItalic .woff") format ("woff"), url("PTSansItalic.ttf") format ("truetype"), url("PTSansItalic.svg") format ("svg" ); font-weight : normal ; font-style : italic ; ) @font-face ( font-family : "PTSans" ; src : url("PTSansBold.eot") ; src : url("PTSansBold.eot#iefix") format ("embedded-opentype" ), url ("PTSansBold.woff") format ("woff") , url("PTSansBold.ttf") format ("truetype") , url("PTSansBold.svg") format ("svg" ); font-style : normal ; ) @font-face ( font-family : "PTSans" ; src : url("PTSansBoldItalic.eot") ; src : format ("embedded-opentype" ), url("PTSansBoldItalic.woof") format ("woff"), url("PTSansBoldItalic.ttf") format ("truetype"), url("PTSansBoldItalic.svg") format ("svg" );I'll tell you how I understand these CSS rules. Directive
. This variable is an array that is filled with values using the following rules:- - load the font of the specified weight;
- was done each time by a separate function call to the selected page elements: p ( font-family : PTSans ; )
And then HTML tags
specify which font style to apply to the specified elements: dolor ets< strong >lorem ipsum dolor etslorem ipsum ipsum dolor ets lorem ipsum< em >dolor ets lorem ipsum dolorets lorem ipsum dolor etsThe browser will “pull” the font of the desired style (bold or italic or bold italic) from the PTSans array and apply it to the specified page elements.
Advantage this method The connection of a web font is its versatility. It is enough to declare the font once using the directive
And .In places where tags are applied
, the IE8 browser will itself make styles from the PTSans font. An example of an IE8-friendly web font connection option is shown below: @font-face ( font-family : "PTSansRegular" ; src : url("PTSansRegular.eot") ; src : url("PTSansRegular.eot#iefix") format ("embedded-opentype"), url("PTSansRegular.woff") format ("woff"), url("PTSansRegular.ttf") format ("truetype"), url("PTSansRegular.svg") format (" svg" ); ) @font-face ( font-family : "PTSansItalic" ; src : url("PTSansItalic.eot" ; src : url("PTSansItalic.eot#iefix") format ("embedded-opentype" ), url("PTSansItalic .woff") format ("woff"), url("PTSansItalic.ttf") format ("truetype"), url("PTSansItalic.svg") format ("svg" ); ) @font-face ( font-family : "PTSansBold" ; src : url("PTSansBold.eot") ; src : url("PTSansBold.eot#iefix") format ("embedded-opentype") , url("PTSansBold.woff") format ("woff" ), url("PTSansBold.ttf") format ("truetype"), url("PTSansBold.svg") format ("svg" ) @font-face ( font-family : "PTSansBoldItalic" ; src : url( "PTSansBoldItalic.eot" ; src : url("PTSansBoldItalic.eot#iefix") format ("embedded-opentype"), url("PTSansBoldItalic.woof") format ("woff"), url("PTSansBoldItalic.ttf") format ("truetype"), url("PTSansBoldItalic.svg") format (" svg" ); )Notice there are no rules
And , ? How bloated the style sheets will be in this case! What if suddenly (God forbid!) you have to make changes to such code? p ( font-family : PTSansRegular ; font-weight : normal ; font-italic : normal ; font-size : 36px ; ) p strong ( font-family : PTSansBold ; font-weight : bold ; font-italic : normal ; ) p em ( font-family : PTSansItalic ; font-weight : normal ; font-italic : italic ; ) p strong em ( font-family : PTSansBoldItalic ; font-weight : bold ; font-italic : italic ; )To use or not to use the second method of connecting web fonts is a matter of how necessary IE8 support is for a particular site. Please note that IE8's share is falling and will continue to fall.
Google Fonts
In order not to bother with searching for a font, downloading it in TTF or OTF format, converting it using a generator like FontSquirrel Generator, connecting the resulting CSS styles to the project using numerous directives
, the second one is more concise using the directive - it is enough to connect it to the beginning of the style sheets so that the selected fonts are applied to all HTML pages.Third way With using JavaScript Apart from complexity, it has no other advantages over the other two.
Google does not indicate font weight using keywords.
, and in the numerical scale - 100 to 900. The value 400 corresponds to the Gentium Book Basic font of normal italic weight: em ( font-family: "Gentium Book Basic", serif; font-weight: 400; font-style: italic; )This concludes the discussion on web fonts.
Are you tired of the daily monotony of using regular fonts? Or maybe you have any creative ideas for your own font and its style? If yes, then we want to tell you that since you are confident and creative enough, it’s time to start visiting free sites where you can bring all your font-related ideas to life. Yes, that's right, there are plenty of resources online for graphic designers where you can design and design your own fonts. In the future, you can use them in your own projects or share them with others. It's worth noting that there is a huge demand for new and exciting types of fonts right now. Believe me, the graphic world simply needs talented font developers, and if you are good at it, then you can also earn extra money from it.
We offer you a list of 10 free resources with tools to help you get creative and create new creative fonts.
Bird Font is an online tool for creating and editing vector graphics. The service offers import and export settings for True Type Font (TTF), Embedded OpenType Font (EOF) and Scalable Vector Graphics (SVG). On the site you can explore many possibilities and tools for creating various vector images. The most popular among them are curve orientation, contextual linking substitution, kerning, object rotation, background change and much more.
The site is designed specifically for creating fonts and offers an effective platform for their design. The resource will be useful for enthusiasts who like to experiment with fonts and create new types. With FontStruct, you can create fonts using various geometric shapes, for example, like tiles or brick mesh. In addition, here you can find ready-made new types of fonts. Fonts created with FontStruct are called FontStructions and can be installed or loaded into a True Type Font (.ttp) file. They can also be used in Photoshop, Mac/Windows applications or on websites and blogs. This is a site that is really worth checking out.
Glyphr Studio is a font design and editing program, as well as a tool that offers a variety of interesting features. On Glyphr Studio, you can create your own character ligatures and glyphs using various vector editing tools such as pen and pointer. One of its characteristic advantages of the service is the import of SVG code from Inkscape and Illustrator. The tool offers dual screen mode for convenient design and editing. Among other things, Glyphr Studio supports font files such as True Type Font (TTF), Embedded OpenType Font (EOF) and Scalable Vector Graphics (SVG) font files.
The site is a browser-based tool for designing and editing bitmap fonts. The service allows you to download or upload fonts to their gallery in a True Type Font file.
MyScriptFont is a great online tool for creating vector fonts based on your own handwriting. All you need to do is download the template from PDF format or PNG and then print it. Next, write the text in it by hand, scan it and upload it to the website (the program supports JPG formats, PNG, PDF and others). You can also use Paint to write text. Unlike other similar tools, MyScriptFont allows you to view and download your handwritten font in Open Type and True Type formats. Handwritten fonts can be used in graphics programs, greeting cards, logos, personal letters and more.
FontForge is an online platform for creating free fonts. It has easy to use user interface and a built-in program for comparing different fonts. With FontForge, you can create and edit fonts in a variety of formats, including PostScript, SVG, True Type, Open Type and more. Also at your service full text textbook to help vocational training on creating fonts.
FontArk is what every font designer is looking for. Access to the service is only free for a limited time, but it is actually worth taking advantage of. FontArk is a browser-based program and generation of font tools with a built-in fluid grid system. FontArk's design and editing tools are what sets the site apart from its contemporaries. It offers users in real time, several glyphs, tools for editing characters and designing fonts, as well as logos. Moreover, it offers many other features and supports multiple languages.
PaintFont.com is another great tool for converting handwritten text into vector fonts. The site has an extensive set of ready-made characters classified into categories such as ligatures, math and punctuation. The tool offers glyphs and symbols from various languages: Japanese, German, Turkish, Hebrew, Spanish and others.
You can create fonts or upload and modify your own using the custom tools on Fontastic. The service offers several features such as adding or changing colors, adding shadows, changing zoom, and syncing across multiple devices. The site also contains a huge collection of vector icons that can be used for implementation in any of your design projects. They are sorted into several categories for complete convenience. 
This service can be called an ideal place for professional font designers and just amateurs. The service has more than 20 parameters that allow you to experiment with built-in glyphs. Also here you will find several editing and design functions, which will be expanded in the future. 
A few more resources you might find useful:
FontPunk.com– free online tool for adding styles and visual effects to create a visually appealing font for an advertisement, flyer or website.
FontConverter.org– free online converter font files.
Font Squirrel is a free online resource with a collection of web fonts that are licensed for commercial use.
Conclusion
Now you know that designing your own fonts is very easy if you have the right resources. For do-it-yourselfers and hobbyists, these resources are useful for learning practical skills such as kerning, adjusting curves, learning structural variations, and glyph packaging.
Design is a vast ocean, growing every day. New types of fonts are created every day or by making custom changes to existing fonts. Fonts enhance the visual appeal of textual content and that is why designers are constantly looking for new font styles to make their work as fresh and innovative as possible.
Exists huge amount ways to find the right font for your website. For example, you can use services with huge font libraries that require a paid subscription.
If you're on a budget or experimenting with a small project, you can use free web fonts that are publicly available. Finding the right web font for your website can be time-consuming, so we present you with a selection of the best among them.
1. Montserrat
As typography evolves, it moves away from vintage urban posters and signs. The creator of this font tried to preserve the beauty of the typography of the urban posters she saw on the streets of Buenos Aires.
2. Abril Fatface
Abril Fatface is part of a large font family that comes in 18 styles created for different purposes. This font has a strong, elegant presence, making it a great solution for creating eye-catching headlines. It is most often combined with Lato, Open Sans and Droid Sans.
3. Playfair Display
Given the significant x-height and small descenders of the letters, Playfair Display is also suitable for writing a heading, especially if space is limited. It pairs well with Georgia and is often used with Oswald, Lato and Arvo.
4. GT Walsheim
Used on many blogs today, GT Walsheim is a representative of geometric sans serifs and is part of the Grilli Type family. You have to pay for a full set of fonts, but Grilli Type offers free trial version GT Walsheim.
5. Merriweather
If on-screen readability is a priority for your project, check out Merriweather, which was created for this purpose. In addition, this font is constantly being improved.
6. Josephine Sans
Josefin Sans is inspired by vintage Swedish design and features an elegant, geometric aesthetic.
7. Gravitas One
Gravitas One is based on “UK fat face”, a bold advertising font that appeared during the Industrial Revolution in England. This font looks great in medium to large scale and is suitable for headings, titles and tabs.
8. Jura
The letters of this font repeat the forms of the Kaya-li letter. It also contains Cyrillic glyphs and Greek alphabet. It is available in light, normal, medium and bold weights.
9.League Gothic
Originally designed by Morris Fuller Benton for the American Type Founders Company in 1903, League Gothic found a new use with an update and the addition of new glyphs.
10. Fjord
Fjord is a serif font originally created for printed books and is particularly suitable for fitting long text into a small print format. It can be used to create a large amount of text content on the site, as the font has a clear structure, prominent serifs and long, elegant heads and feet.
11. Amaranth
The Amaranth font family features a non-oblique italic design with little contrast and noticeable curves. All three Amaranth styles pair well with almost any other font. You can play with this font - experiment and choose the best.
12. Poly
This medium-contrast font was originally created for the indigenous Wayuunaiki language, which requires wide glyphs. It features small stems and a large x-height, making it especially useful in small sizes.
13. Gentium Basic
This font was created as a multi-linguistic font, including Latin and Greek letters, as well as Cyrillic and advanced support in the Gentium Plus version. Gentium Basic and Gentium Book Basic are available in a free web version, but are limited to the Latin alphabet only.
14. Open Sans
Open Sans is a representative of humanistic grotesques. This font is highly legible and is suitable for both web and mobile interfaces. This is a non-slanted font with a simple style of letters, which is characterized by a neutral, but pleasant enough appearance that it can be used for a variety of purposes.
15. Ledger Regular
This is a multifunctional font with large x-height, strong color contrast, clearly defined serifs, which contributes to the readability of the text. This font looks good both in print and on a low-resolution screen.
16. Signika
This free web font is representative of sans serif. Low contrast and high x-height allow Signika to display well on screen. The wide selection of icons includes symbols, pictograms and arrows.
17. Josefin Slab
Created according to the canons of a geometric font typical of the 1930s, with the addition of Scandinavian features, Josefin Slab has the characteristics of a slab font and is reminiscent of a typewriter font. Interestingly, its x-height is half the height of a capital letter.
18. Forum
As the name suggests, this is a Roman font that is good for caps lock headings, but also suitable for displaying text. The elegant proportions of this font are reminiscent of classical architecture with its semicircular arches, horizontal cornices and vertical columns.
Named after one of the most famous Mayan cities, Tikal Sans has features of glyphs that were used in the writing of the South American civilization. Its creator chose a large x-height, which gives the font a modern look and has a beneficial effect on its legibility, and a large selection of styles allows it to be used for a variety of purposes.
20. Arvo
Suitable for both print and web, this geometric slab font is available in Roman, Italic, Roman Bold and Bold Italic. Arvo's low contrast enhances its on-screen readability.
21. Bevan
Bevan was created based on the traditional slab font of the 1930s. The letters were digitized, given a new shape and optimized for the web version. This is one of the few super bold fonts that are suitable for websites.
22. Old Standard TT
Old Standard TT was based on the Modern serif font, which was popular in the late 19th and early 20th centuries and then forgotten in for a long time. This font is suitable for adding style to a specific type of content, e.g. scientific research or texts in Greek or Cyrillic.
23. Creon
Ideal for news websites and blogs, this serif font also shares the characteristics of a slab font, but its balance and low contrast make Kreon significantly more personal.
24. Droid Sans
Droid Sans has been optimized for maximum readability even in small interfaces, such as menus on mobile phone screens. This is a neutral, non-oblique font with simple, open letterforms.
25. Italiana
The creator of this font was inspired by classic Italian calligraphy, so the font will be very useful for projects where you need to add elegance. Italiana is also suitable for writing news headlines in both print and electronic format.
26. Vollkorn
This detailed, feature-rich serif font is very popular. Its clarity and solidity convey confidence and energy, making the font equally effective in larger sizes for headings and titles, as well as large amounts of text in smaller formats.
27. Actor
This font has a particularly large x-height, which requires quite a lot of space. Actor also features an old-fashioned style for some characters, such as the numbers 6 and 9.
With roots dating back to the 16th century, the humanistic typeface Garamond has become a true typographic icon, often serving as the basis for the creation of modern typefaces, including EB Garamond.
31. Ubuntu
Ubuntu Grotesque was created to personalize web text on both desktops and mobile devices. Users are encouraged to experiment with this font, modify and improve it as they see fit.
32. Rosario
Rosario is a classic humanistic sans serif that is perfect for stylizing paragraphs of text.
33. Roboto Slab
Roboto Slab is one of the fonts from the Roboto family. The block version is especially eye-catching with its geometric shapes and open curves. It is equally suitable for gadget screens and printed versions of texts.
34. Oswald
The font is a reworked version of the classic Alternate Gothic sans serif. Oswald was recently updated to come in a variety of weights, an expanded character set, and better kerning.
35. Stalemate
Stalemate is a sleek handwritten font with some vintage flair. It is suitable for creating accents and personalizing your website.
36. Crimson Text
This carefully designed classic proportional font can be used for both displaying large amounts of text and writing headings.
