In html, font size plays an important role. It allows you to draw the user's attention to important information posted on the website page. Although not only the size of the letters is important, but also their color, thickness and even family.
Tags and attributes when crawling with html fonts
The hypertext language has a large set of tools for working with fonts. After all, it is text formatting that 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.
Consider the tags that are used to work with fonts in html and their attributes. The main one is the tag ... Using the values of its attributes, you can set several characteristics of the font:
- color - sets the color of the text;
- size - font size in conventional units.
Positive attribute values from 1 to 7 are supported.
- face - used to set the font family of the text to be used inside the tag ... Several values are supported at once, separated by commas.
Only the text between the parts of the paired font tag is formatted. The rest of the text is displayed in the default standard font.
Also in html there are a number of paired tags that specify only one formatting rule. These include:
- - sets bold font in html. Tag the action is similar to the previous one;
- - the size is larger than the default;
- - smaller font size;
- - italicized text. Similar tag ;
- - underlined text;
- crossed out;- - display text only in lower case;
- - in upper case.
Plain text
Thumbnail
Thumbnail
More than usual
Less than usual
Italics
Italics
Underlined
Crossed out
Style Attribute Capabilities
In addition to the described tags, there are several more ways to change the font in html. One of them is the use of the generic style attribute. Using the values of its properties, you can set the font display style:
1) font-family - property sets the font family. Enumeration of several values is possible.
Changing the font in html to the next value will occur if the previous family is not installed on the user's operating system.
Writing syntax:
font-family: font name [, font name [, ...]]
2) font-size - the size is set from 1 to 7. This is one of the main ways you can increase the font in html.
Writing syntax:
font-size: absolute size | relative size | value | interest | inherit
The font size can also be set:
- In pixels;
- In absolute value ( xx-small, x-small, small, medium, large);
- In percents;
- In points (pt).
Font-size: 7
Font-size: 24px
Font-size: x-large
Font-size: 200%
Font-size: 24pt
3) font-style - sets the style of writing the font. Syntax:
font-style: normal | italic | oblique | inherit
Values:
- normal - normal spelling;
- italic - italic
- oblique - right-tilted font;
- inherit - inherits the spelling of the parent element.
An example of how to change the font in html using this property:
font-style: inherit
font-style: italic
font-style: normal
font-style: oblique
4) font-variant - converts all uppercase letters to uppercase. Syntax:
font-variant: normal | small-caps | inherit
An example of how to change the font in html with this property:
font-variant: inherit
font-variant: normal
font-variant: small-caps
5) font-weight - allows you to set the thickness of the writing of the text (saturation). Syntax:
font-weight: bold | bolder | lighter | normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Values:
- bold - sets the html bold font;
- bolder - fatter relative to normal;
- lighter - less saturated relative to normal;
- normal - normal spelling;
- 100-900 - sets the font thickness in numeric equivalent.
font-weight: bold
font-weight: bolder
font-weight: lighter
font-weight: normal
font-weight: 900
font-weight: 100
The font property and html font color
Font is another container property. Internally, it has combined the values of several properties designed to change fonts. The font syntax is:
font: font-size font-family | inherit
Also, the value can be set to the fonts used by the system in the inscriptions on various controls:
- caption - for buttons;
- icon - for icons;
- menu - menu;
- message-box - for dialog boxes;
- small-caption - for small controls
- status-bar - status bar font.
font: icon
font: caption
font: menu
font: message-box
small-caption
font: status-bar
font: italic 50px bold "Times New Roman", Times, serif
In order to set the color of the font in html, you can use the color property. It allows you to set the color, either using a keyword or in rgb format. And also in the form of a hexadecimal code.
A drop cap is the first letter of a paragraph that is larger than the rest and placed so that its top is at the level of the first line of the paragraph. In the image, you can see an example of a drop cap embedded in the text.
By the way, WordPress has a special plugin (wordpress.org/extend/plugins/drop-caps) that allows you to automatically create embedded in the text (and offset down) capital letters... Wonderful! However, what if you don’t want to use a plugin (I’m sure you don’t), and you just need to create a drop cap for several posts, and possibly in some specific place?
The good news is that you don't need to use a plugin to create the capital letters, all you need is a little css and a span tag. Open your css file and add the following code:
Span.dropcaps (font-family: Georgia, serif; color: #ccc; font-size: 46px; float: left; font-weight: 400; line-height: 1em; margin-bottom: -0.4em; margin-right : 0.09em; position: relative;)
Something like this. Of course, you will need a style that matches your design and text. For example, the property values: font-size, margins and line-height will need to be selected based on your design and text.
Span tag
In order for the style to be applied to the capital letter of the text, you need to "wrap" the capital letter in the span tag and write the appropriate class.
A
Pseudo-element: first-letter
You can also style the first character in the text using the: first-letter pseudo-element. However, a limited number of properties can be applied to the: first-letter pseudo-element: these are properties related to font, color, background, borders, margins, and padding. It should also be noted that the: first-letter pseudo-element will not work in older browsers.
P: first-letter (font-family: Georgia, serif; color: #ccc; font-size: 46px; float: left; font-weight: 400; line-height: 1em; margin-bottom: -0.4em; margin -right: 0.09em; position: relative;)
Here are a couple of editing methods. capital letters using CSS.
CSS capital letters help to break the monotony of a uniform design, the texts of which look the same from start to finish.
Earlier and now drop caps
The chroniclers used capital letters in handwritten manuscripts, some of which date back to the 5th century. Capital letters continued to be used from the 8th to the 15th century, when the printing press brought printing to an industrial level. Both handwritten and printed drop caps were placed at the beginning of the text. They were often decorated with a decorative pattern that was placed around the letter.
Raised and lowered letters are still in use today. They can be found in newspapers, magazines and books, as well as in digital typography. Raised letters are sometimes called extended. They are placed flush with the bottom of the text that follows them. Omitted letters are flush with the top of the text, sometimes in a layer behind the main body of text content, or the rest of the text flows around them.
Raised letters are much easier to define, because they are flush with the rest of the text, and usually you do not need to change the flow around the outer margins to do this. Omitted letters require more fine tuning. It will be easier for you to sort this out if you first understand how raised characters are handled.
Using classes
Designers who are already familiar with CSS know to create a separate CSS class for the first capital letter.
The CSS for the paragraph element and the class that creates the letter would look like this:
p (font-size: 20px; font-family: Georgia, "Times New Roman", Times, serif;) .myinitialcaps (font-size: 48px; font-family: Didot;)
And the HTML code will look like this:
Which gives us:
Seems too easy? In fact, you will have to make adjustments based on the specific raised letters, as each capital letter requires special kerning. After choosing a font for the raised letters and for the body text, you need to create separate classes for each raised letter. In the below Css class.myinitialcapsi the box on the right is negative to decrease the distance between I and n.
Myinitialcapsi (font-size: 48px; font-family: Didot; margin-right: -1px;)
n this case, there’s some extra space between the “I” and “n.”
ncluding a new class with a negative margin pulls it closer.
Depending on the screen resolution, in the above example, I and n may look like they have merged together. This is due to the serifs at the ends of the letters. Therefore, before deciding on the final CSS styles, test the site on various devices to see how the text in all uppercase CSS looks on them.
Quotes and other special cases
You can enlarge not only the letters at the beginning of the text. You can implement another class to create an oversized version of the quotes that appear next to the letter. In our case, neither the 48-pixel class nor the 20-pixel text class is suitable for quotation marks. Rather, it will be something in between - 30 pixels. We'll move the quotes down 4 pixels to optically align them with I:
Myinitialcapsq (font-size: 30px; font-family: Didot; float: left; margin-top: 4px;)
ncluding ”a new class with a negative margin pulls it closer.
You need to be very careful about specifying each of the CSS caps, along with the quotes, so that their kerning and alignment match the surrounding markup. For example, the letter T will need to be shifted to the left, slightly beyond the edge of the paragraph, so that its transverse line visually fits into the layout. You will need to do the same with round letters such as C, G, O and Q. In this example, the font sizes used are 20, 30 and 48. But you will need to choose the sizes based on the specifics of the fonts you have chosen. As well as the sizes and resolutions of the screens on which the site will be viewed.
Pseudo-elements and pseudo-classes
With a CSS pseudo-element, you can easily create a raised letter by adding :: first-letter to the paragraph element. Use: first-letter ( with one colon) for outdated browsers:
p (font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height: 2em; padding-bottom: 1.2em;) p :: first-letter (font-size: 3.6em; text-transform: uppercase; font-family: "Monotype Bernard Condensed", serif; margin-right: 0.03em;) .initialb (margin-right: -0.1em;) .initialn (margin-right: -0.15 em;)
The HTML code that contains the CSS classes that account for the kerning of the letters N and B will look like this ...
An inital letter, with the first letter being a capital letter.
With a line break, the next line has no initial cap.
n otice in the HTML source how the first letter, not a capital letter in the HTML, gets sized to the initial cap size of 3.6em. Neat, huh?
B ut with a hard return, and a new paragraph started, another initial cap always gets created. You might be asking yourself, How am I going to account for this? Am I supposed to have an initial cap at the beginning of very new paragraph? Well, you could. But, do you want it to look that way, and does it absolutely have to look that way?
The first capital letter of the paragraph is converted to a letter.
The first letter after a line break will not be capitalized.
O Note that in the HTML source, the first letter is not capitalized, but is converted to a 3.6em character.
O However, even after a forced line break, and at the beginning of each new paragraph, a letter is always created. You may be asking yourself: How can I take this into account? Do I need to add letters for all of these cases? Well, you can. But is it necessary?
Even with the benefits that pseudo-elements provide, we had to add a lot of code to define separate classes to handle kerning and indentation issues. But this method converts the first letter of each new paragraph to CSS a capital letter. For some, it may not work, because you do not need to transform the first letter of each paragraph.
Combining pseudo-classes and pseudo-elements to create a smart layout
Adding the: first-child pseudo-class helps solve the problem of unnecessary conversion of first letters:
p (font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height: 2em; padding-bottom: 0.5em;) p: first-child :: first-letter ( font-size: 3.6em; text-transform: uppercase; font-family: "Monotype Bernard Condensed", serif; margin-right: 0.03em;)
Combining this code with HTML:
The first letter, which is defined as first-child, is the only letter that is converted to a raised drop cap in this method.
Since only the letter defined as first-child is converted, note that this example differs from the previous one, without first-child. In addition, we do not convert the first letters after the beginning of a paragraph and after a forced line break. This looks more elegant than what the layout looked like when we converted all the first letters of the paragraphs.
The advantage of using pseudo-classes is the ability to handle various special cases. What about the downsides? There are many different pseudo-classes, and they can be combined in so many ways that it can make your head spin. For example, the pseudo-classes: first-child and: first-of-type can give the same results. You can also apply the pseudo-class not only to the paragraph, but also to the elements section (font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height: 3em;) section> p: first-child: first-letter (font-size: 4em; text-transform: uppercase; font-family: Didot, serif; margin-right: 5px;) And together with HTML: At the beginning of a section, the first letter is set to the raised drop cap. And a new paragraph ... If you feel like experimenting, you can explore various methods in addition to: first-child and: first-of-type. For example, such as: nth-of-type or: nth-of-child to see how certain types of pseudo-classes can be used for text in uppercase CSS. Regardless of whether you follow the principles outlined in this article or start digging deeper, once you learn to work with the CSS pseudo-classes first-child,: first-of-type, and: first-letter, you can correctly apply them to HTML elements. or in detail about letters and HTML CSS formatting Chapter contains examples formatting letters from the Hypertext Markup area. In the menu on the left you will find modern and highly detailed HTML tutorials. They will allow you to create your website from scratch., but for now, look a little below. This might be interesting. The era of the information society Humanity has entered a new period of its development, in which information and network technologies play an extremely important role. We live in the era of the information society, which is characterized by the rapid development of information and telecommunication technologies. With the advent of the computer and the Internet, colossal changes began. The computer and the Internet are pushing society to formulate new norms of behavior, rules and ideals. The Internet for the new generation is what television was for the previous generation. But the global network is much more functional than television, because it provides an opportunity to make purchases, sales, offers communication and various ways of self-expression, such as creating personal internet pages and sites. An example of formatting letters: Formatting result: An example of free text written in large letters An example of free text written in capital letters Tags - define big letters(these tags are not supported in HTML 5). CSS style = "text-transform: uppercase" code - defines capital letters.
In other words, capital letters are defined using CSS attributes. An example of formatting letters: Formatting result: Arbitrary HTML text and CSS 2px letter spacing Description of attributes and values: CSS code style = "letter-spacing: 2px" - defines CSS letter spacing.
Look for similar formatting examples in the menu on the left. Thank you for your attention. Allows you to change the case of the letters in the text. By default, the value is set to none, which has no effect on the text. The case of the text remains the same. The uppercase and lowercase values convert characters to upper and lower case, respectively. If you specify a capitalize value, then only the first characters of each word will be capitalized. Inherit inherits the value from the parent. The Text-transform Property has been applied to this paragraph with a Value of Lowercase, which means all letters will be in lowercase. And this last paragraph has a text-transform property with a CAPITALIZE property applied. The first letters of each word will be uppercase, and only that.HTML letters: capital and uppercase
HTML letters and CSS distance between them
Example
h3 (text-transform: uppercase;) .lowercase (text-transform: lowercase;) .capitalize (text-transform: capitalize;)
This is the title. It has a text-transform property set to uppercase. All characters will be uppercase.