Making your own font for web development. How to make a beautiful font in html: sizes, colors, html font tags

Hi all! Today, as part of the web design section, I want to talk about the fonts that should be used when developing a web site.

As a rule, not everyone thinks about what fonts should be used for the content part of the site. Selecting beautiful fonts for a website is the most important part of design development. Since the readability of the site’s information depends on this part, and this, as we know, is the most important thing on the site. For this reason, this issue should be taken very seriously.

But you can only use fonts in website design that are available to future site visitors. This is done to ensure that the pages are displayed correctly for all users, with different operating systems and browsers. Otherwise, if you use non-standard fonts, then most visitors will see everything differently and, in most cases, in an unsightly way. For this reason, it is recommended to use the standard fonts listed below. The list of fonts includes fonts that are installed on the operating system Windows XP and higher.

In this article I do not consider fonts from other operating systems. An experienced layout designer should know the comparison of fonts in different operating systems, and during layout he will write this point in CSS styles.

Basically, when developing the content part of the design, two types of fonts are used:

• serif fonts
• sans-serif fonts

Serif fonts- (English serif - serif) fonts whose style begins and ends with strokes. For example Times New Roman.

Sans serif fonts(chopped fonts) - (English sans-serif - sans serif) fonts with strict, straight lines without serifs. For example Arial.

Below you can see a screenshot of serif and sans serif fonts.

Fonts for web design:

• Arial
• Arial Black
• Arial Narrow
• Book Antiqua
• Century Gothic
• Comic Sans MS
• Courier New
• Franklin Gothic Medium
• Georgia
• Impact
• Lucida Console
• Lucida Sans Unicode
• Microsoft Sans Serif
• Palatino Linotype
• Sylfaen
• Tahoma
• Times New Roman
• Trebuchet MS
• Verdana
• Webdings (various symbols and marks)
• Wingdings (various symbols and signs)

I would also like to note such a point as the absence of italics in a number of fonts; instead of italics, they use slant, which makes the text difficult to read.

Of the standard fonts in Windows that do not have italics:

• Arial Black
• Comic Sans MS
• Franklin Gothic Medium
• Impact
• Lucida Console
• Lucida Sans Unicode
• Microsoft Sans Serif
• Sylfaen
• Tahoma

Since I mentioned fonts that do not have italics, I would also like to note the fact that there are fonts that are initially bold fonts. For these reasons, there is no point in using styles that indicate bold font, since the result will not be what we need.

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 for creating 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 finished 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 you need 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 haven't written anything for a while, but oh well.
I am currently engaged in web development and the question arose about a beautiful menu. With animation, but without JS or Flash. Of course, all this is done using CSS3, and in addition we will not use images. At all.

We launch it, we see the window

Open "Text > SVG Font Editor...", a panel will appear on the right

Click on font 1, change it to the name of your font, for example MySomeFont, and clear the *Typeface* field to the right.

Now open the tab *Glyphs* everything on our panel *SVG Font Editor*. As we can see, glyphs of the English layout have already been added for us. You can delete everything if it gets in the way by right-clicking on it. You can also edit the name of the glyph and the symbol that it identifies

Let's start adding the pictures themselves.

Import "File > Import..." (Ctrl+I) the image that we want to include in the font. If this is a raster graphic, after adding it you need to do "Outline > Vectorize Raster" (Alt + Shift + B). Personally, I didn’t fiddle with the options, just click on *OK* and a vector image is created.

We delete the raster one (Select it and press the Delete key) - at the bottom in the line when selecting an object it is written whether it is raster (Image) or vector (Outline).

Next, stretch the outline to the work area (in the top panel there are input areas - x: 0, y: 0; W: 1000 and H: 1000). I leave the outline selected, go to our favorite panel *SVG Font Editor* in the *Glyphs* tab. Now select the glyph that we want to associate with our outline. Let it be a glyph with the symbol *a*. Then simply click on the *Get curves from selection* button. To check if we did everything correctly, simply enter the added symbol in the *Text* field below and our image should be displayed. After checking, the contour can be moved beyond the work area or deleted; it is no longer needed.

We can also associate all unused characters in the font with any outline via *Take from Selection* with the text *Missing Glyph* in the *Glyphs* tab. The operation proceeds as described above.

In general, we added all the contours to our symbols. Now we need to edit the XML file itself a little. Open *XML Editor* (Shift+Ctrl+X) - the button is on the main panel - fourth from the right. And we need to change the *id* attribute of the item *

@font-face (
font-family: "MySomeFont";
src: url("fonts/font.svg") format("svg");
}

Well, in general, that's all.

There are a huge number of 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 subscripts 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 a free trial of 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 glyphs of the Cyrillic 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 adapts to both web and mobile interfaces. It 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

It is a multi-functional font with a large x-height, strong color contrast, and well-defined serifs that contribute 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 for a long time. This font is suitable for adding style to a specific type of content, such as 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.

In html, font size plays an important role. It allows you to draw the user's attention to important information posted on the site page. Although not only the size of the letters is important, but also their color, thickness and even family.

Tags and attributes when working with html fonts

Hypertext language has a wide range of tools for working with fonts. After all, text formatting is the main task of html.

The reason for the creation of the HTML language was the problem of displaying text formatting rules in browsers.