<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" /> <title>Photopea - Text Style</title> <link rel="stylesheet" href="https://blog.photopea.com/wp-content/themes/simplex/style.css" type="text/css" media="screen" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" /> </head> <body> <div id="page"> <div id="header"> <a href="index.html" class="title">Learn Photopea</a> <!--<p>Web-based image editor.</p>--> <a href="https://blog.photopea.com">Blog</a> | <a class="curr" href="index.html">Learn</a> | <a href="../tuts/index.html">Tutorials</a> | <a href="../api/index.html">API</a> | <a href="https://www.facebook.com/photopea">Facebook</a> | <a href="https://www.twitter.com/photopeacom">Twitter</a> </div> <div id="main" style="max-width:1000px;"> <div id="sidebar" style="width:22%;"> <h3>Topics</h3> <ul> <li class="lvl0"><a href="index.html">Introduction</a></li> <li class="lvl0"><a href="workspace.html">Workspace</a></li> <li class="lvl1"><a href="opening-saving.html">Open and Save</a></li> <li class="lvl1"><a href="navigation.html">Navigation</a></li> <li class="lvl1"><a href="image-size.html">Image size</a></li> <li class="lvl0"><a href="layers.html">Layers</a></li> <li class="lvl1"><a href="masks.html">Masks</a></li> <li class="lvl1"><a href="layer-styles.html">Layer Styles</a></li> <li class="lvl1"><a href="smart-objects.html">Smart Objects</a></li> <li class="lvl1"><a href="other-layers.html">Other Layers</a></li> <li class="lvl0"><a href="layer-manipulation.html">Layer Editing</a></li> <li class="lvl1"><a href="free-transform.html">Free Transform</a></li> <li class="lvl1"><a href="adjustments-filters.html">Adjust. & Filters</a></li> <li class="lvl0"><a href="selections.html">Selections</a></li> <li class="lvl1"><a href="creating-selections.html">Make Selections</a></li> <li class="lvl1"><a href="advanced-selecting.html">Advanced Selecting</a></li> <li class="lvl1"><a href="refine-edge.html">Refine Edge</a></li> <li class="lvl1"><a href="moving-selected-data.html">Move Selected Data</a></li> <li class="lvl0"><a href="brush-tools.html">Brush Tools</a></li> <li class="lvl1"><a href="bt-basic.html">Basic Tools</a></li> <li class="lvl1"><a href="bt-advanced.html">Advanced Tools</a></li> <li class="lvl1"><a href="bt-smart.html">Smart Tools</a></li> <li class="lvl0"><a href="text.html">Text</a></li> <li class="lvl1 active"><a href="text-style.html">Text Style</a></li> <li class="lvl0"><a href="vector-graphics.html">Vector Graphics</a></li> <li class="lvl1"><a href="vg-structure.html">The Structure</a></li> <li class="lvl1"><a href="vg-manipulation.html">Editing Shapes</a></li> <li class="lvl1"><a href="vg-creating.html">Creating Shapes</a></li> <li class="lvl0"><a href="other.html">Other</a></li> <li class="lvl1"><a href="guides-grid-snapping.html">Guides & Snapping</a></li> <li class="lvl1"><a href="animations.html">Animations</a></li> <li class="lvl1"><a href="layer-comps.html">Layer Comps</a></li> <li class="lvl1"><a href="scripts.html">Scripts</a></li> </ul> </div> <div id="content" style="width:78%;"> <div class="post"> <h1>Text Style</h1> <p>There are two kinds of style parameters: <b>Character Style</b> (e.g. text size, color, ...), which can be different for each character, and <b>Paragraph Style</b> (e.g. text aligning, margin etc.), which is shared by the whole paragraph.</p> <p>Character properties can be found in the Character panel (Window - Character), while Paragraph properties can be found in the Paragraph panel (Window - Paragraph). Some basic Character and Paragraph properties can be found also in the top menu of a Type tool.</p> <img src="https://i.imgur.com/lkyQupT.png" style="width:75%" /> <p>When the type layer is selected (in the Layers panel), you can change the style (e.g. the font family or aligning) of the whole layer. Another option is to enter the layer and select a specific part of the text. As you change the style, it will be applied only to the selected part of the text.</p> <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-0885095539348241" data-ad-slot="5352893134"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <h2>Align</h2> <p>Aligning of a constrained type layer is computed with respect to the sides of the rectangle. Aligning of a free layer is computed according to the point of origin. Below, we can see a free and a constrained layer with the same three paragraphs. The first paragraph is aligned to the left, the second is aligned to the right, and the third is aligned to the center.</p> <img src="https://i.imgur.com/VmoLs1l.png" /> <h2>Writing directions</h2> <p>When you use e.g. latin and arabic words in the same text, they direction of writing is detected automatically, just as in any other text editor. But there is so-called <b>base direction</b>, which is necessary for the correct rendering of bidirectional text and punctuations. You can change the base direction in the Paragraph window.</p> <h2>Custom fonts</h2> <p>Photopea has a huge database of royalty-free fonts. If you are using a free font, there is almost a 100% chance, that it is already available in PP.</p> <p>For all other fonts, Photopea allows you to open them (TTF or OTF files) the same way you open any other file (File - Open, or drag-and-drop). They will be added to the end of the font list and used, when some type layer needs them.</p> </div> <h2 style="margin-top: 4em">Comments</h2> <div id="disqus_thread"></div> <script> (function() { // DON'T EDIT BELOW THIS LINE var d = document, s = d.createElement('script'); s.src = 'https://learn-photopea.disqus.com/embed.js'; s.setAttribute('data-timestamp', +new Date()); (d.head || d.body).appendChild(s); })(); </script> </div> </div> <div id="footer">© 2013-2018 support@photopea.com</div> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-4249565-43', 'auto'); ga('send', 'pageview'); </script> </div> </html>