Mastering Text: How to Change Font Size in Excalidraw

Introduction

Diagrams are essential tools for communication, collaboration, and brainstorming. Excalidraw, with its intuitive interface and focus on simplicity, has become a favorite platform for creating quick and effective diagrams. But what if your Excalidraw diagram is looking cluttered with tiny text, or you need to emphasize key points with larger fonts to grab the viewer’s attention? You’re not alone. Many Excalidraw users find themselves needing to adjust text sizes to optimize the readability and visual impact of their diagrams.

Excalidraw is a free, open-source virtual whiteboard tool that allows users to create hand-drawn-style diagrams, flowcharts, mockups, and more. Its appeal lies in its ease of use, making it accessible to both experienced designers and those new to diagramming. You can instantly create visually appealing diagrams and collaborate with others, all within your web browser. One of the key elements that influences the effectiveness of any diagram is the text used within it, and a critical aspect of that text is its size.

The ability to control font size is crucial for several reasons. First and foremost, it directly impacts readability. Text that is too small can be difficult to decipher, especially on smaller screens or when the diagram is printed. Conversely, text that is too large can overwhelm the diagram and make it appear cluttered. Second, font size plays a significant role in visual hierarchy. By strategically using different font sizes, you can guide the viewer’s eye to the most important elements of your diagram, highlighting key concepts and relationships. Finally, appropriate font sizes contribute to the overall clarity and professionalism of your diagram. A well-designed diagram with properly sized text is simply more effective at conveying information.

This article serves as a comprehensive guide to changing font size in Excalidraw. We will explore all the methods available, from simple adjustments within individual text elements to global changes that affect the entire diagram. By the end of this article, you will have a complete understanding of how to master text size in Excalidraw and create diagrams that are both visually appealing and highly effective at communicating your ideas.

Direct Font Size Adjustment Within Text Elements

The most basic way to change font size in Excalidraw is to adjust it directly within individual text elements. This is useful when you only need to modify the size of a few specific pieces of text, such as headings, labels, or annotations.

Leveraging the Toolbar or Properties Panel

The primary method for direct font size adjustment involves using the toolbar or properties panel, depending on the specific version of Excalidraw you are using and the element selected. Here’s how it generally works:

1. Select a Text Element: The first step is to select the text element you want to modify. This could be a text box, an arrow label, a piece of free-form text, or any other element that contains text. You can usually select an element by clicking on it with your mouse cursor.
2. Locate the Font Size Control: Once the text element is selected, the properties panel on the right-hand side of the screen will appear. If this is not visible, ensure it is enabled in your settings, or click to edit the element. Within the properties panel, you should find a font size control. This is often represented as a dropdown menu with numerical values, or sometimes a numeric input field. The icon beside it will often be represented as a capital “A” with an up or down arrow.
3. Adjust the Font Size: Using the font size control, you can now change the size of the text. If it’s a dropdown menu, click on it and select the desired font size from the list. If it’s a numeric input field, you can either type in the desired font size directly or use the arrow keys to increase or decrease the value. Note that you may have to press “Enter” to confirm the changes if typing in a number directly.
4. Observe Changes: As you adjust the font size, the text within the selected element should update in real time, allowing you to preview the changes. Experiment with different font sizes until you find one that looks appropriate for your diagram.

This method provides a simple and intuitive way to control the size of individual text elements. However, its limitation is that it can only be applied to one element at a time. If you need to change the font size of multiple elements, you’ll need to repeat these steps for each one, which can be time-consuming.

Utilizing Keyboard Shortcuts

While not consistently available in all versions or across all operating systems, some implementations of Excalidraw may offer keyboard shortcuts for quickly increasing or decreasing font size. These shortcuts can significantly speed up the process of adjusting text sizes.

To determine if Excalidraw supports these shortcuts, consult the application’s documentation or look for a list of keyboard shortcuts within the settings menu. Common shortcuts for font size adjustment might include:

• Ctrl + Shift + > (or Cmd + Shift + > on macOS): Increase font size.
• Ctrl + Shift + < (or Cmd + Shift + < on macOS): Decrease font size.

If these shortcuts are available, simply select the text element you want to modify and then use the appropriate keyboard shortcut to increase or decrease the font size in small increments. This can be a much faster way to fine-tune the size of your text compared to using the toolbar or properties panel.

Global Font Size Adjustments: Applying Changes Across Multiple Elements

While adjusting font size on a per-element basis is useful in some situations, there are often times when you need to make global changes to the font size of multiple elements at once. This is particularly helpful when you are scaling a diagram for different screen sizes, or when you want to improve the overall readability of the diagram by uniformly increasing or decreasing the font size.

Selecting Multiple Elements and Changing Font Size

One way to achieve global font size adjustments is to select multiple elements and then modify their font sizes simultaneously. Here’s how to do it:

1. Select Multiple Elements: There are several ways to select multiple elements in Excalidraw. The most common method is to use the selection tool (usually represented as an arrow icon). Click and drag the selection tool to create a rectangular selection box that encompasses all the elements you want to modify. Alternatively, you can hold down the Shift key while clicking on individual elements to add them to the selection. Note that selecting elements of different types (i.e. text and shape) can make this step fail. Ensure only to select text based elements.
2. Adjust the Font Size: Once you have selected all the desired elements, locate the font size control in the toolbar or properties panel (as described in the previous section). Modify the font size using the dropdown menu or numeric input field. As you adjust the font size, all the selected elements should update in real time, allowing you to preview the changes.

This method is a quick and efficient way to change the font size of multiple elements at once. However, it’s important to note that the changes will only apply to the selected elements. If you add new text elements to the diagram later, they will not inherit the adjusted font size.

Considerations for Font Size Choices

Choosing the right font size is essential for creating diagrams that are both visually appealing and easy to understand. Here are some important considerations to keep in mind:

• Readability: Readability is paramount. Choose font sizes that are easily legible, even when the diagram is viewed on different devices or screen sizes. Pay attention to factors like contrast between the text and the background, and the letter spacing within the font. If the text is too small, viewers will struggle to read it, diminishing the diagram’s effectiveness.
• Visual Hierarchy: Use different font sizes to create visual hierarchy and guide the viewer’s attention to the most important elements. Headings and titles should generally be larger than body text, and key concepts can be emphasized by increasing their font size. By strategically using font sizes, you can create a clear and logical flow through the diagram.
• Diagram Size and Complexity: The appropriate font size should be proportional to the overall size and complexity of the diagram. A large, complex diagram might require smaller fonts to fit everything in, while a simple diagram can benefit from larger, more prominent fonts. Experiment with different font sizes to find a balance that works well for your specific diagram.
• Target Audience: Consider who will be viewing the diagram and their visual acuity. If the diagram is intended for an audience with visual impairments, you should use larger font sizes to ensure that everyone can easily read the text.

Troubleshooting Common Issues

Even with a clear understanding of how to change font size in Excalidraw, you may occasionally encounter some common issues. Here are some troubleshooting tips:

• Text Overflowing: If the text is too large for its container, it may overflow and become cut off. In this case, you can try resizing the container, reducing the font size, or rephrasing the text to make it shorter. You can also attempt to wrap the text to the next line, although this may require resizing the containing shape.
• Font Size Not Changing: If the font size control doesn’t seem to be working, make sure that the text element is properly selected. Also, check for any conflicting styles or settings that may be overriding the font size. If you’re still having trouble, try restarting Excalidraw or clearing your browser cache.
• Inconsistent Font Sizes: If you notice inconsistent font sizes across the diagram, carefully review each text element and manually adjust its font size to match the desired style. You can also use the selection tool to select multiple elements with inconsistent font sizes and adjust them all at once.

Conclusion

Mastering text size in Excalidraw is crucial for creating diagrams that are clear, effective, and visually appealing. By understanding the different methods for changing font size, you can ensure that your diagrams communicate your ideas effectively and leave a lasting impression. We covered adjusting single elements, mass selecting elements, and troubleshooting common issues.

Font size is a small detail that can make a big difference. By taking the time to choose the right font sizes for your diagrams, you can significantly improve their readability, visual hierarchy, and overall impact. Experiment with different font sizes and find what works best for your needs. Don’t be afraid to try new things and push the boundaries of what’s possible with Excalidraw.

Now that you have a comprehensive understanding of how to change font size in Excalidraw, it’s time to put your knowledge into practice. Start creating your own diagrams and experimenting with different font sizes to see how they affect the overall look and feel. Share your creations with others and get feedback on your design choices. With a little practice, you’ll be able to master text size in Excalidraw and create diagrams that are both visually stunning and highly effective at communicating your ideas. Now, go forth and create!