![]() ![]() ![]() Most UI design tools, such as Figma, usually have three values for alignment: Stroke is like a border - it lies outside of the fill area, but its placement can vary. In this scenario, the text looks like an outline:Ī less obvious facet of a stroke is its alignment. Stroke text may have no fill, or may have a transparent fill, so that the background is visible through the text. This is usually referred to as stroke width: It is similar to a border in this regard. Also, it can vary in width (i.e., thickness). The stroke can have a color that is different from that of the fill, usually referred to as a stroke color. In graphic design or web design, the outside bit of outlined text is referred to as the stroke, and the inside bit as the fill: The non-standard -webkit-text-stroke property.Then, we’ll move on to some examples, and dive into the CSS. In this article, we’ll clarify some terminology pertaining to web fonts and explore how a stroke is applied to text. The example above makes me think of American football jerseys! What do you think? Stroked text can bring a different aesthetic to a webpage and can be utilized in some cool ways. Here’s an example of stroked text, sometimes referred to as outlined text:Ī stroke is a border drawn along the outline of a letter. Here’s an example of the type of text that’s usually seen on the web: It can be employed in a variety of ways to give your webpage some additional punch. Stroked text, also referred to as outlined text, can be used to improve readability, helping letters stand out from a background. Can you create beautiful stroked text in CSS? He is travel-obsessed (one bug he cannot fix). He is an active participant in non-profit organizations supporting the underprivileged and promoting equality. ![]() Rob O'Leary Follow Rob is a solution architect, fullstack developer, technical writer, and educator. ![]()
0 Comments
Leave a Reply. |